一、概念
CSS(Cascading Style Sheets，层叠样式表) 可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
所谓层叠，就是可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。而CSS可以分别为网页的各个层次设置样式。
书写的位置：
1、内联样式：可以将css样式表书写到元素(标签)的style属性中，只对当前标签中的内容起作用，不方便复用。属于结构与表现耦合，不推荐使用。
2、内部样式：可以将css样式编写的head中style标签中，然后通过css选择器选中指定的元素，然后可以同时为这些元素设置同样的样式，提高样式的复用性。
3、外部样式：可以将css样式表编写到外部的css文件，然后通过link标签引入外部的css文件到当前的HTML文件中，最大限度提高复用性，利用浏览器缓存，加快用户
的访问速度，提升用户体验。开发中推荐使用外部样式。
语法：选择器，通过选择器可以选择页面中的指定标签，并且将声明块的样式应用到对应的标签中。
声明块，紧跟选择器的后边，使用大括号括起来，声明块中就是一组名值对结构，这一组一组名值对称为声明。一个声明块中可写多种声明，中间用分号隔开。声明的
样式名和样式值使用冒号连接。
IDE（Integrated Development Environment，集成开发工具）：Hbuilder ,Alt+/ 代码提示 Ctrl+enter 换行 Ctrl+d 删除当前行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css基础</title> <!--一2、内部样式：将css样式设置到head标签中，可以同时给这些元素设置同样的样式，提高复用性。--> <style type="text/css"> /*这里边写的全是css的代码，不能出现HTML的代码*/ p{/*表示给body中的所有p标签设置这种样式*/ color: greenyellow; font-size:20px ; } </style> <!-- 一3、外部样式：引入外部的css文件中,按照代码的执行顺序这里把上边的样式给替代了--> <link rel="stylesheet" type="text/css" href="../css/04-01 外部样式.css"/> </head> <body> <!--一 1、内联样式：标签内部的style属性，只对当前标签起作用 这里虽然在上边设置了样式，但是这里对他个性化设置，按照代码执行顺序，使用个性设置 --> <p style="color: red; font-size:30px ;"> 锦瑟无端五十弦，一弦一柱思华年。</p> <p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。 </p> <p>沧海月明珠有泪，蓝田日暖玉生烟。</p> <p>此情可待成追忆？只是当时已惘然。</p> </body> </html>
二、块元素(块标签)
就是可以独占一行的标签，不管它内容多少，宽度多窄，它都独占一行。
1、div元素：这个标签没有任何语义，就是个纯粹的块元素，它不会为它里边的元素设置任何默认的样式，主要用来对网页进行布局的。可以表示一块区域。
2、p元素：
3、h1-h6元素
4、hr 和 br 元素
三、内联元素(内联标签，行内标签)
所谓内联元素，指的是只占自身大小的元素，不会独占一行。
1、span元素：没有任何语义，专门用来选择一段文字，为它设置样式。英文：范围的意思
2、a元素、img元素、iframe元素：
区别：块元素用来做页面的布局，内联元素主要用来选中文本为它设置样式。一般只使用块元素去包含内联元素，不会用内联去包含块元素。
但是a元素可以包含任何元素除了a元素，即a元素不能包含a元素。
p元素不能包含其他任何的块元素，尽管它是个块元素。
四、常用的选择器
1、元素选择器：通过元素选择器选中页面中所有的指定元素 语法：元素名{ ....}
2、id选择器：通过元素的id值选择到唯一的一个元素。语法：#id号{.....}
3、类选择器：通过元素的class值选择一组元素，可以同时为一个元素设置多个class值，中间用空格隔开。语法： .class值{......}
4、分组选择器(并集选择器)：通过分组选择器同时选择多种选择器对应的元素。语法：选择器1，选择器2....{.....} 中间逗号隔开
5、通配选择器：选择页面中的所有元素。语法：*{.....}
6、复合选择器(交集选择器)：选中同时满足多个选择器的元素。 语法：选择器1选择器2..{....} 中间无空格。id选择器不建议是复合选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用的选择器</title> <style type="text/css"> /*四 1、元素选择器 */ p{ color: goldenrod; } h3{ color: red; } /*四2、id选择器*/ #p3{ color: green; } /*四3、类选择器 class * class属性和ids属性类似，可以同时给多个同一种元素设置样式 class值可以相同，id值不能相同。 * */ .p1{ color: blue; } .p2{ font-size:30px ; } /*四4、分组选择器(并集选择器)*/ .p1,h3{ background: darkgrey; } /*四5、通配选择器*/ *{ font-size: 35px; } /*四6、复合选择器*/ span.p4{ background:gold ; } </style> </head> <body> <h3>锦瑟</h3> <p class="p1">锦瑟无端五十弦，一弦一柱思华年。</p> <p class="p1 p2">庄生晓梦迷蝴蝶，望帝春心托杜鹃。 </p> <p id="p3">沧海月明珠有泪，蓝田日暖玉生烟。</p> <p class="p4">此情可待成追忆？只是当时已惘然。</p> <span class="p4"> 《锦瑟》是唐代诗人李商隐的代表作之一。诗题“锦瑟”，但并非咏物， 不过是按古诗的惯例以篇首二字为题，实是借瑟以隐题的一首无题诗。 </span> </body> </html>
五、元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接(如：父亲元素)或间接(如：爷爷元素往上)包含后代的元素。
后代元素：直接(如：子元素)或间接(如：孙子辈元素往下)被祖先元素包含的元素。
兄弟元素：拥有相同父元素的元素叫(亲)兄弟元素。
7（上接 四1-6）、后代元素选择器：选中我们指定元素的指定后代元素。语法：祖先元素 后代元素 {.....}。中间是空格
8、子元素选择器：选中父元素的指定子元素。 语法：父元素 > 子元素{....} 。中间是空格，大于号，空格。IE6及以下的浏览器不兼容这种选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素之间的关系</title> <style type="text/css"> /*后代元素选择器*/ div span{ /*包括子元素span和后代元素span。例子中2个div如果没有id号，2个div都会选中*/ color: red; } #d2 span{ /*给祖先元素加id*/ color: green; } div > span{ /*没有指定id的情况*/ background-color: yellow; } #d2 > span { /*指定id的情况*/ background-color: blue; } </style> </head> <body> <div id="d1"> <p> <span > 我是第1个div中p标签中的span标签，是div的孙子，p的儿子 </span> </p> <span> 我是第1个div中的span标签，是div的儿子</span> </div> <div id="d2"> <span> 我是第2个div元素中的span元素，是div的儿子 </span> </div> <span> 我是body中的span元素，与div平辈 </span> </body> </html>
9、伪类选择器：
专门用来表示元素的一种特殊的状态。比如，访问过的超链接、普通的超链接、获取焦点的文本框当。我们需要为这些处于特殊状态的元素设置样式时
就可以使用伪类。
定义链接的访问状态： a：link 正常链接（没访问过的链接）；
a：visited 访问过的链接； 浏览器是根据历史记录看网站是否访问过，由于涉及用户隐私，所以此设置只能设置字体的颜色。
a：hover 鼠标滑过的链接； 它和active不仅能设置超链接也可以设置其他标签，如p标签。（但IE6不支持，其他可以）
a：active 正在点击的链接：
其他状态：标签名：focus ，获取焦点，指当鼠标在文本框中时。失去焦点，指鼠标在文本框之外。格式：标签名 冒号 focus{.....} (IE6不支持)
标签名：：selection，选中的元素 。中间2个冒号。但是在火狐中需要这样写， 标签：：-moz-selection{.....}否则用不了。如果要兼容，要写2个。
10、伪元素选择器
标签名：first-letter{......} 给标签中第一个字符设置样式
标签名：first-line{......} 给标签中的第一行(是网页显示时的第1行，网页变大变小，第1行的内容也会改变)设置样式
标签名： before，指定元素之前 <p>你好呀</p> 指的是开始标签右边的尖括号“>” 和 “你”之间的位置。一般before需要结合content这个样式一起使用，通过
content可以向before或after的位置添加一些内容。
标签名：after，指定元素后之后。结束标签右边的">"之后的位置。他们都不能选中。
【代码示例】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <!-- 9、伪类选择器：就是表示一种特殊的状态 --> <style type="text/css"> a:link{ /*正常链接； */ color: yellowgreen; } a:visited{/*访问过的链接；*/ color: red; } a:hover{/*鼠标滑过的链接；*/ color: blue; } a:active{/*正在点击的链接,鼠标别松手*/ color: black; } input:focus{/*当文本框获取焦点时，改变文本框的颜色为黄色*/ background: yellow; } p::selection{/*为p标签中鼠标选中的文字设置样式*/ color: blue; } p:first-letter{/*10、伪元素选择器*/ color: blue; font-size:25px ; } p:before{ content: "悯农"; } P:after{ content: "沙雕"; color: orange; } </style> </head> <body> <a href="http://www.baidu.com">访问过的链接</a> <br /> <a href="http://www.iqiyi.com/">没访问过的链接</a> <br /> 用户名：<input type="text" name="" id="" value="" /> <p>锄禾日当午，汗滴禾下土。</p> </body> </html>
11、子元素的伪类选择器（child是在所有子元素中排，大排行,如所有子女一起排（大姐、二 哥、三姐）；type是在当前类型中排，小排行，如男的排男的(大儿子、
二儿子)，女的排女的（大女儿、二女儿））
first-child：可以选中第一子元素；
last-child：可以选中最后一个子元素；
nth-child(m)：可以选中任意位置的子元素；n就是第n个的意思，m是自定义选中的行。
first-of-type ：选中指定类型的第一个
last-of-type：选中指定类型的最后一个
nth-of-type：选中指定类型的第n个
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>子元素的伪类选择器</title> <style type="text/css"> p:first-child{/*first-child：选中第一个子元素，为第一个p标签设置样式 这句话的意思，既要符合p标签又要是父元素第一个子元素(p是body的子元素) 如果把p标签去掉，则就是默认的是* 选中一个子元素即可 如果要指定子元素需要： body > p:first-child{ ..... }表示选中body的第一个p标签子元素 * */ color: blue; } div > p:last-child{/*表示给div中最后一个子元素设置样式*/ color: yellow; } body >p:nth-child(3){/*自定义位置，意思是把3换成1根first-child相同 括号中可以设置为 even：表示选中偶数行 odd:表示选中奇数行 表格中隔行变色可以用 * */ background: yellowgreen; } div >p:nth-child(2){ background: green; } </style> </head> <body> <!--如果这行加个p之外的标签，则上述设置不会生效，因为不是p标签。下一行也不会生效因为不是不是第一个子元素--> <p>一别都门三改火，天涯踏尽红尘。</p> <!--这行即使p标签又是body的第一个子元素--> <p>依然一笑作春温。无波真古井，有节是秋筠。</p> <p>惆怅孤帆连夜发，送行淡月微云。</p> <p>尊前不用翠眉颦。人生如逆旅，我亦是行人。</p> <div> <p> 苏轼，北宋词人</p><!--这行也会生效，因为他2项符合条件都符合 p是div的子元素--> <p>这首词是公元1091年（宋哲宗元祐六年）苏轼知杭州时</p> <p>为送别自越州（今浙江绍兴）北徙途经杭州的老友钱穆父而作</p> </div> <span> </span> </body> </html>
12、兄弟元素选择器
后一个兄弟选择器：可以选中一个元素后边紧挨着的一个兄弟元素。语法：前一个元素(哥哥)+紧挨的后一个元素(弟弟){.......}，中间是空格加号空格
所有兄弟元素选择器：可以选中一个元素后边的所有兄弟。语法：前一个元素 ~ 后边元素{.....}，中间是空格波浪号空格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>兄弟元素选择器</title> <style type="text/css"> /*后一个兄弟元素*/ span + p{ color: blue; } /*所有兄弟选择器*/ div ~ p{ color: cyan; } </style> </head> <body> <span>白居易的诗词</span> <p> 绿蚁新醅酒，红泥小火炉。</p> <!--span+p 这行会生效--> <p> 晚来天欲雪，能饮一杯无？</p> <span>苏轼的诗词 </span> <p>寒食后，酒醒却咨嗟。</p><!--span+p 这行也会生效--> <p>休对故人思故国，且将新火试新茶。诗酒趁年华。</p> <div id=""> 李清照的诗词改编</div> <p> 一朝花开傍柳, 寻香误觅亭侯。</p><!--这2行都会生效--> <p> 纵饮朝霞半日晖, 风雨着不透。</p> </body> </html>
13、否定伪类选择器
可以从已经选中的元素中剔除某些元素。语法： 标签：not(选择器){........}，中间只有冒号，没有空格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>否定伪类选择器</title> <style type="text/css"> /*否定伪类选择器*/ p:not(.p5){ color: blue; } </style> </head> <body> <p>一朝花开傍柳, 寻香误觅亭侯。</p> <p>纵饮朝霞半日晖, 风雨着不透。</p> <p class="p5">一任宫长骁瘦, 台高冰泪难流。</p> <p>锦书送罢蓦回首, 无余岁可偷。</p> </body> </html>
六、样式的继承（儿子可以继承父亲的遗产，在css中祖先元素的样式也可以被后代元素继承）
利用继承可以把一些基本样式设置给祖先元素或父元素，这样所有的后代元素会自动继承这些样式，但是并不是所有样式都会被子元素继承。比如所有背景相关的样式，
如背景颜色。实际中p标签的默认背景颜色是透明的，如果在父标签中设置个颜色，比如黄色，则颜色可以透过来，网页也会显现出黄色，但是原理是颜色透过来，而不是被继承
过来的。所有背景相关的样式都不能被继承，切记！ 边框相关的样式、定位相关的样式都不会被继承。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>样式的继承</title> <style type="text/css"> </style> </head> <body> <p style="font-size: 25px;"> <!--所有p元素中的都会生效,包括span.这就是继承--> 我是p标签 <br /> <span>我是p标签的儿子span标签</span> </p> <span>我是与p标签平辈的span</span> </body> </html>
七、选择器的优先级
当使用不同的选择器选中同一个元素时，并且相同的样式时（如都设置背景颜色），这时样式之间产生冲突，由选择器的优先级决定，高的优先显示。
优先级规则：内联样式 优先级：1000；
id选择器 优先级：100；
类和伪类选择器 优先级：10；
元素选择器 优先级：1
通配选择器 优先级：0
继承的样式 优先级： 没有优先级
【注意】1、样式越具体，优先级越高。
2、 当选择器中有多个优先级时，需要将多个优先级的权重加起来比较 ，然后设置样式。选择器的累加计算不会超过它的最大数量级。
3、选择器的优先级的权重一样时，则使用靠后的样式。
4、并集选择器的是单独计算的。
5、可以在样式的最后加个！important 表示优先级最高，比内联样式都高。在开发中尽量避免使用important。
【引申】a的伪类选择器，优先级的是一样的。所以写的顺序就是下边的顺序，比较好。L-V-H-A
a：link；未访问过的链接状态。link和visited没有顺序要求。
a：visited；访问过的链接状态。但是把link和visited写在hover和active的下边，hover和active等于无效代码
a：hover；鼠标滑过的链接状态。不能写在active下边，否则设置无效。他们优先级一样，执行下边的，写在下边，hover等于无效代码。
a：active；鼠标点击的链接状态。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器的优先级</title> <style type="text/css"> .p3{/*类选择器 10*/ color: red; } p{/*元素选择器 1 */ color: blue; } #d3{/*id选择器 100*/ color:greenyellow; /*color:greenyellow !important 优先级比内联样式都高*/ } /*a伪类选择器*/ a:link{ color: yellowgreen; } a:visited{ color: blue; } a:hover{ color: orange; } a:active{ color: green; } </style> </head> <body> <p>一朝花开傍柳, 寻香误觅亭侯。</p> <p>纵饮朝霞半日晖, 风雨着不透。</p> <!--style="color: grey; 是内联样式 优先级1000--> <p class="p3" id="d3" style="color: grey;">一任宫长骁瘦, 台高冰泪难流。</p> <p >锦书送罢蓦回首, 无余岁可偷。</p> <p>昨夜雨疏风骤 浓睡不消残酒</p> <p>试问卷帘人 却道海棠依旧</p> <p>知否 知否 应是绿肥红瘦</p> <a href="http://www.baidu.com">访问过的链接:百度</a> <br /> <a href="http://www.iqiyi.com/">没访问过的链接：爱奇艺</a> <br /> </body> </html>
扫一扫
2216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
