Download
1 / 42
420 likes | 586 Views
CSS 介绍. HTML 文件起始标签. 文件头标签. <html> <head> <title> </title> </head> <body> </body> </html>. 文件标题标签. 文件体标签. HTML 文件结束标签. 复习 HTML 文件基本结构. 选择符. 属 性. 属性值. Body { background-color:#ff0000; font-size:12px; }. CSS 样式基本语法.
E N D
HTML文件起始标签 文件头标签 <html> <head> <title> </title> </head> <body> </body> </html> 文件标题标签 文件体标签 HTML文件结束标签 复习HTML文件基本结构
选择符 属 性 属性值 Body { background-color:#ff0000; font-size:12px; } CSS样式基本语法 Selector { property : value ; } 举例：
CSS选择符 类型选择符 id选择符 通用选择符 CSS选择符 class选择符 伪类和伪对象选择符 分组选择符 特殊选择符 包含选择符 元素指定选择符
类型选择符 举例： h2 { font-size:24px; line-weight:30px; } P { color:red; border:2px solde #ffcc00; }
类型选择符 注意 • 类型选择符定义的样式会影响整个页面中所有该元素的显示； • 若想改变某个元素的默认样式时，可使用类型选择符； • 当统一文档某个元素的显示效果时，可使用类型选择符； • 对于div、span等通用结构元素，不建议使用类型选择符。
class选择符 举例： 定义如下： .red{ color:red; } 应用时： <h3 class=“red”> ... </h3>
class选择符 注意 • class可以把具有相同样式的元素统一为一类； • 只有应用了该class名称的元素会受到影响； • 不要把每个元素都应用一个class ，会产生代码冗余； • 命名时通俗易懂。
id选择符 举例： 定义如下： #top{ width:800px; height:150px; background-color:#ffcc00; } 应用时： <div id=“top”> ... </div>
id选择符 注意 • 只有应用了该id名称的元素会受到影响； • 用来构建整体框架的元素对象应定义id 属性。 • 在符合Web标准的设计中，每个id名称只能使用一次 <div id=“header”> <div id=“logo”></div> <div id=“banner”></div> <div id=“nav”></div> </div> <div id=“main”> <div id=“left”></div> <div id=“right”></div> </div> <div id=“footer”></div>
通用选择符 举例： 定义如下： *{ margin:0px; padding:0px; } 注意：通过选择符会影响网页中所有元素。
伪类和伪对象选择符 与超链接相关的四个伪类: a:link a:visited a:hover a:active 超链接默认样式 访问过的链接样式 鼠标经过链接时的样式 鼠标按下链接时的样式
伪类和伪对象选择符 把超链接伪类选择符中相同的声明提出来放在a选择符中。 a{ text-decoration:none; font-weight:bold; } a:link{ color:#0000cc; } a:visited{ color:#660099; } a:hover{ color:#ff0000; } a:active{ color:#006600; } 举例： 当这个4个超链接伪类选择符联合使用时,应注意它们的定义顺序，如左侧所示。 伪类和伪对象定义时，必须在其前面指定对象，确定其作用范围。 伪类可以应用到不同的元素，但目前所有浏览器只支持与超链接有关的4个伪类。
伪类和伪对象选择符 常用的伪对象选择符: first-letter 文本段落中第一个字符的样式 first-line 文本段落中第一个行的样式
伪类和伪对象选择符 举例： P:first-letter{ color:green; font-size:66px; float:left; } p:first-line{ line-height:2em; }
分组选择符 元素之间用“，”号分隔 功能：为不同的元素或对象定义相同的样式。 举例： h1,h2,p{ border-bottom:1px dashed #66ff00; padding-left:10px; margin-left:20px; }
包含选择符 前后两个对象之间以空格隔开 举例： #top h1{ color:green; font-size:36px; bacground-color:#ff0000; }
包含选择符 注意 • 定义包含选择符时，必须保证第一个对象能够包含第二个对象； • 包含选择符也可以实现跨级包含，即父对象可以包含子对象、孙对象或孙的子对象； • 包含选择符是最有用的一类选择符。
元素指定选择符 前后两个对象之间没有空格 举例： span.red{ color:green; font-size:36px; } #div1#top{ width:300px; Height:200px; } 元素指定选择符与包含选择符有点相似，但元素指定选择符不要求前后两个对象之间是包含关系。
颜色值 CSS属性值 color:rgb(100%,40%,35%); color:rgb(200,200,200); color:#ff0000; color:#f00; color:red; p{ color:#ff0000; }
在网页中应用CSS 内联样式 内部样式 外部样式
在网页中应用CSS 内联样式 <p style=“ font-size:18px;color:red; ”> </p>
在HEAD中定义: <head> <style type=“text/css”> <! -- .class{ font-family:“宋体”； } Body{ background-color:red } --> </style> </head> 在网页中应用CSS 内部样式
在文件外定义: <head> <link href=“style.css” rel=“stylesheet” type= “text/css” /> </head> 在网页中应用CSS 外部样式
继承就是允许样式不仅可以应用于某个特定的元素，而且还可以应用于它的后代（子）元素。继承就是允许样式不仅可以应用于某个特定的元素，而且还可以应用于它的后代（子）元素。 CSS的继承、层叠和特殊性
举例： 定义: div{ color:red; font-size:36px; } 应用: <body> <p>文档内容</p> <div> <p>文档内容</p> </div> </body>
不具有继承性 具有继承性 边框属性 边界属性 补白属性 背景属性 定位属性 布局属性 元素高、宽属性 字体 字号 颜色 行距 是不是所有的属性都可以继承呢?
显示声明的样式覆盖继承来的样式。 定义: 应用: div{ font-size:36px; color:red; } p{ font-size:48px; color:blue; } <body> <div> <p>文档内容</p> </div> </body>
如果两个规则的特殊性相同，就根据在网页中位置的先后顺序来决定规则的优先级，一般后面的样式优先于前面相同属性的样式。如果两个规则的特殊性相同，就根据在网页中位置的先后顺序来决定规则的优先级，一般后面的样式优先于前面相同属性的样式。 如果两个规则的特殊性不同，就根据特殊性高的样式显示。 样式的层叠性带来的问题： 当同一属性的不同样式作用于同一个对象时如何进行选择？
为了优化排序各种规则的特殊性，CSS为每一种选择符都分配一个值，然后，将规则的每个选择符的值加在一起，就可以计算出每个规则的特殊性，即优先级。为了优化排序各种规则的特殊性，CSS为每一种选择符都分配一个值，然后，将规则的每个选择符的值加在一起，就可以计算出每个规则的特殊性，即优先级。 CSS的继承和特殊性（优先级）
优先级计算方式 • 一个标签选择器值1分 • 一个类选择器值10分 • 一个ID选择器值100分 • 一个行内样式值1000分
判断优先级 黄色 <div id=“header” class=“blue”> 帮帮我，我到底显示什么颜色？ </div> body{ color:red; } div{ color:green; } .blue{ color:blue; } #header{ color:gray; } #header{ color:yellow; } 1 1 10 100 100
判断优先级 div h2{ color:red; } div.blue{ color:green; } div.blue.dark { color:blue; } #header span{ color:gray; } 2 11 21 101
红色 （1）在特殊性逻辑框架下，被继承的值具有特殊性0，即一个元素显示声明的样式覆盖继承来的样式。 #header{ font-size:36px; color:black; } span{ color:red; } 举例： <div id=“header”> 我到底显示<span>什么颜色</span> </div>
红色 （2）内联样式优先，带有style属性的元素，其内联样式的特殊性可以为100或更高。 举例： div{ color:green; } .blue{ color:blue; } #head{ color:gray; } <div id=“header” class=“blue” style=“color:red”> 我到底显示什么颜色 </div>
红色 （3）在相同的特殊性下，CSS将遵循就近原则，排在最后的样式优先权最大。 （4）定义了“!important”命令，该命令会被赋予最大优先权。 <head> <link href=“style.css” rel=“stylesheet” type=“text/css”/> <style type=“text/css”> #header{ color:green； } </style> </head> <body> <div id=“header” >我到底显示什么颜色</div> </body> 外部样式表文件style.css： #header{ color:red!important; }
CSS盒模型 所谓盒模型，就是把每个HTML元素看作一个装了东西的盒子，盒子里面的内容有属性“宽（width）”和“高（height）”；盒子里面的内容到盒子的边框之间的距离叫“填充（padding）”；盒子本身有“边框（border）”；而盒子边框外和其他盒子之间的距离叫“边界（margin）”。
border-top margin-top margin-left padding-top border-right padding-left width height border-left padding-right padding-bottom margin-right margin-bottom border-bottom
四边边界都是20px 上下边界是20px左右边界是40px 上边界是20px 左右边界是40px 下边界是60px 上边界是20px 右边界是40px 下边界是60px 左边界是80px 1.书写规则 Margin:20px; Margin:20px 40px; Margin:20px 40px 60px; Margin:20px 40px 60px 80px;
结论 元素的总宽度= 左边界+左边框+左填充+宽+右填充+右边框+右边界 元素的高宽度= 上边界+上边框+上填充+高+下填充+下边框+下边界
CSS标准校验 http://validator.w3.org 输入网址即可检查CSS规范情况
CSS调试工具 Firefox+ Firebug
