- 1、本文档共13页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
CSS原文档
CSS
一、CSS概述
1.1 CSS概述
? CSS级联样式表单
– Cascading Style Sheet
– 对WEB页面进行外观控制的机制
– 将页面的内容和表现分离
? CSS版本
– 目前为止,CSS有两个官方标准:CSS1和CSS2
– CSS1的功能在大多数浏览器中都被支持
1.2 示例- 无CSS
head
titleCSS入门/title
/head
body
注意:此页面没有用到CSS样式,很显然源代码重复的比较多,有冗余;
font face=宋体 color=red
h2欢迎同学们学习CSS/h2
/fontbr
font face=宋体 color=green
h2欢迎同学们学习CSS/h2
/fontbr
font face=宋体 color=blue
h2欢迎同学们学习CSS/h2
/fontbr
/body
1.2 示例- 有CSS
head
titleCSS入门/title
style
h2{font-family:宋体; color:red}
/style
/head
body
注意:此页面用到了CSS,请查看源代码,是不是干净了许多;
h2欢迎同学们学习CSS/h2br
h2欢迎同学们学习CSS/h2br
h2欢迎同学们学习CSS/h2
/body
1.3 CSS 优点
? 优点
– 代码独立,便于控制
– 样式文件可在浏览器中缓存
– 便于分工合作
– 提高了可访问性
– 提供更多的外观控制手段
二、CSS 的样式
2.1 样式
? CSS样式
– 内联样式
– 嵌入样式
– 外联样式
2.2 内联
? 内联样式
– 把样式代码内联到标记内
? 使用style作为属性,样式语句作为属性值
? 如:table style=“border-collapse”
? 控制table标记的边框样式为不折叠
2.2 内联特点
? 内联样式特点
– 看上去很直观
– 针对个别元素控制
– 和传统的外观控制方式没有本质的不同
– 不推荐使用
2.3 嵌入
? 嵌入样式
– 使用style标记把样式代码插入到页面中
– 一般插入到head标记中
– 如:headstyleCSS语句/style/head
2.3 嵌入特点
? 特点
– 将CSS语句直接写在HTML文档中,但它独立存在,方便维护和修改
– 仅针对一个HTML文档进行设置
– 代码是HTML文档的一部分,没有利用浏览器的缓存机制
2.4 外联
? 外联样式
– 通过外部样式文件对页面进行控制
– 外部的样式文件通过HTML的link元素连接到HTML文档中
link rel=“stylesheet” href=“myCSS.css” type=“text/css”/
href属性指定了样式文件的相对地址;rel和type属性表明这是一个样式文件
2.4 外联使用
? 使用
– 建立外部样式文件(.css)
– 外部的样式文件不能含有任何像head或style这样的HTML标记
– 样式表文件仅仅由样式规则或声明组成
例如: h3{font-family:“宋体” color:red} 文件名myCSS.css
2.4 外联特点
? 特点
– 当样式被应用到很多的网页时,推荐使用外部样式表
– 网页制作者使用外部样式表,在改变整个网站的外观时,仅需要改变一个文件
– 大多数浏览器会保存外部样式表在缓冲区,从而如果样式表在缓冲区就避免 了
在展示网页时的延迟
– 在实际开发中一般都使用外联样式
三、CSS 基本语法
3.1 语法
? 选择符{属性1:属性值1; 属性2:属性值2;}
– 选择符(selector):指定样式适用的标记,除指定标记外,样式不起作用
– 属性:样式的关键字
– 属性值:描述样式的值;
– 格式:属性与属性之间使用分号分隔,属性与属性值之间使用冒号分隔
– 如:P{font-size:12pt; color:red;}
3.1 语法
? 例子:
body{color:black}-----------------单个属性示例.
p{font-family:“sans serif”}-----多个单词属性需要括起来“”.
p{text-align:center; color:red}---多个属性用分号隔开.
p{ -----------------注意代码的格式可读性
text-align:center;
color:black;
tont-family:arial
}
3.2 选择符分类
? 选择符分类
– 普通选择符
– 类选择符
文档评论(0)