CSS经典总结

nullnullCSS样式与盒模型null CSS样式基本语法 CSS选择符 CSS属性值 在网页中应用CSS CSS的继承、层叠和特殊性 CSS盒模型nullnullSelector { property : value ; }null类型选择符id选择符class选择符特殊选择符通用选择符伪类和伪对象选择符分组选择符包含选择符元素指定选择符CSS选择符nullP { color:red; border:2px solde #ffcc00; }h2 { font-size:24px; line-weight:30px; }nullnull定义如下： .red{ color:red; } 应用时：

...

nullnull定义如下： #top{ width:800px; height:150px; background-color:#ffcc00; } 应用时： nullnull定义如下： *{ margin:0px; padding:0px; }注意：通过选择符会影响网页中所有元素。nulla:link a:visited a:hover a:active超链接默认样式访问过的链接样式鼠标经过链接时的样式鼠标按下链接时的样式与超链接相关的四个伪类:nulla{ text-decoration:none; font-weight:bold; } a:link{ color:#0000cc; } a:visited{ color:#660099; } a:hover{ color:#ff0000; } a:active{ color:#006600; }把超链接伪类选择符中相同的声明提出来放在a选择符中。当这个4个超链接伪类选择符联合使用时,应注意它们的定义顺序，如左侧所示。伪类可以应用到不同的元素，但目前所有浏览器只支持与超链接有关的4个伪类。伪类和伪对象定义时，必须在其前面指定对象，确定其作用范围。nullfirst-letter文本段落中第一个字符的样式文本段落中第一个行的样式常用的伪对象选择符:first-linenullP:first-letter{ color:green; font-size:66px; float:left; } p:first-line{ line-height:2em; }null h1,h2,p { border-bottom:1px dashed #66ff00; padding-left:10px; margin-left:20px; } 功能：为不同的元素或对象定义相同的样式。null#top h1{ color:green; font-size:36px; bacground-color:#ff0000; }nullnullspan.red{ color:green; font-size:36px; } #div1#top{ width:300px; Height:200px; }元素指定选择符与包含选择符有点相似，但元素指定选择符不要求前后两个对象之间是包含关系。nullcolor:rgb(100%,40%,35%); color:rgb(200,200,200); color:#ff0000; color:#f00; color:red; p{ color:#ff0000; }null字体高(em) 字母x的高(ex) 像素(px) 百分比(%)nullnull 绝对路径就是被链接文档的完整URL，包括所使用的传输协议(对于网页通常是http://) 如：http://www.sohu.comnull 相对路径就是指以当前文件所在位置为起点到被链接文件经由的路径 如：dreamweaver/main.htmlnull 根相对路径就是指从站点根文件夹到被链接文件经由的路径。 如：/news/beijing2008.html注意：根路径由前斜杠开头，它代站点根文件夹null把当前文件与同一文件夹中的另一文件链接时，只要提供被链接文件的文件名即可； 把当前文件与一个位于当前文件所在文件夹中的子文件夹里的文件链接，就需要提供子文件夹名、前斜杠和文件名； 若要把当前文件与一个位于当前文件所在文件夹的父文件夹里的文件链接，则要在文件名前加上 ../(..表示 上一级文件夹)。D:\webfuna.htmb.htmc.htmd.htmnull内联样式 内部样式 外部样式null

nullnullnullnull定义: div{ color:red; font-size:36px; } 应用:

文档内容

nullnullnullnullborder:2px solid blue;null 当同一属性的不同样式作用于同一个对象时如何进行选择？样式的层叠性带来的问：null作者定义的样式 > 用户的样式 > 浏览器的预定义样式nullnullbody{ color:red; } div{ color:green; } .blue{ color:blue; } #header{ color:gray; } #header{ color:yellow; }nulldiv h2{ color:red; } div.blue{ color:green; } div.blue.dark { color:blue; } #header span{ color:gray; } null（1）在特殊性逻辑框架下，被继承的值具有特殊性0，即一个元素显示声明的样式覆盖继承来的样式。#header{ font-size:36px; color:black; } span{ color:red; }null（2）内联样式优先，带有style属性的元素，其内联样式的特殊性可以为100或更高。div{ color:green; } .blue{ color:blue; } #head{ color:gray; }null（3）在相同的特殊性下，CSS将遵循就近原则，排在最后的样式优先权最大。（4）定义了“!important”命令，该命令会被赋予最大优先权。 外部样式表文件style.css： #header{ color:red!important; }null 所谓盒模型，就是把每个HTML元素看作一个装了东西的盒子，盒子里面的内容有属性“宽（width）”和“高（height）”；盒子里面的内容到盒子的边框之间的距离叫“填充（padding）”；盒子本身有“边框（border）”；而盒子边框外和其他盒子之间的距离叫“边界（margin）”。nullnull元素的总宽度= 左边界+左边框+左填充+宽+右填充+右边框+右边界元素的高宽度= 上边界+上边框+上填充+高+下填充+下边框+下边界null1.写规则Margin:20px; Margin:20px 40px; Margin:20px 40px 60px; Margin:20px 40px 60px 80px;null2.垂直相邻的块状元素边界会发生重叠,且两个边界中最小的边界将被覆盖。null示例nullnull