CSS基础（一）
一、CSS介绍：
互联网前端分三层：
HTML：超文本标记语言。从语义的角度描述页面结构；
CSS：层叠样式表。从审美的角度负责页面的样式；
JS：JavaScript。从交互的角度描述页面行为；
HTML的缺陷：
- 不能适应多种设备
- 要求浏览器必须智能化足够大
- 数据与显示没有分开
- 功能不够强大
CSS优点：
- 使数据和显示分开
- 降低网络流量
- 使整个网站视觉效果一致
- 使开发效率提高（耦合性降低，html和css能够分开写）
引入方式：
1. 行内样式：
<!--行内样式--> <div> <p style="color: red;">这是 一个行内样式</p> </div>
2. 内接样式：
<style type="text/css"> <!--内接样式css代码--> span{ color: yellow; } </style>
3. 外接样式-链接式：
<!--外接样式-链接式--> <link rel="stylesheet" href="./index.css">
4. 外接样式-导入式：
<style type="text/css"> @import url('./index.css'); </style>
二、CSS基本选择器
1. 标签选择器
标签选择器选中的是所有的标签元素，如：div、ul、p等，不管标签藏得有多深都能选中，并且是所有，而非某一个，所以说是“共性”不是特性。
body{ color:gray; font-size: 12px; } /*标签选择器*/ p{ color: red; font-size: 20px; } span{ color: yellow; }
2. id选择器
同一个页面中id不能重复，并且任何的标签都可以设置id；
id命名规范为：要以字母开头，可以有数字，下划线区分大小写。
/*id选择器*/ #box{ background:green; } #s1{ color: red; } #s2{ font-size: 30px; }
3. 类选择器
即class：同id相似，但是相同的类名不是唯一的，可以重复多次出现，属于归类的概念。同一个标签可以携带多个类名，之间用空格分割；
类的使用能够决定css水平的高低，“公共类”也是一个重要的概念。
.lv{ color: green; } .big{ font-size: 40px; } .line{ text-decoration: underline; }
<body> <!-- 公共类 共有的属性 --> <div> <p class="lv big">段落1</p> <p class="lv line">段落2</p> <p class="line big">段落3</p> </div> </body>
总结：
- 不要试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
- 每个类要尽可能的小。有公共概念，能够不让更多的标签使用
- id和class的选择：
尽可能的用class。除非一些特殊情况可以使用id，因为id一般是用在js上的。通常js通过id来获取到标签。
三、高级选择器
1. 后代选择器
使用空格表示后代选择器。父元素的后代包括：儿子、孙子等
.container p{ color: red; } .container .item p{ color: yellow; }
2. 子代选择器
使用 > 表示子代选择器。例如：div>p，仅仅表示的是当前div元素选中的子代（不包括孙代）元素p
.container>p{ color: yellowgreen; }
3. 并集选择器：
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签，一些共性的元素可以使用并集选择器
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin: 0; padding: 0 } /*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/
4. 交集选择器：
使用 . 表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器。语法：div.active
/*比如有一个<h4 class='active'></h4>这样的标签*/ h4{ width: 100px; font-size: 14px; } .active{ color: red; text-decoration: underline; } /* 交集选择器 */ h4.active{ background: #00BFFF; }
5. 属性选择器：
根据标签中的属性选中当前的标签
/*根据属性查找*/ [for]{ color: red; } /*找到for属性的等于username的元素 字体颜色设为红色*/ [for='username']{ color: yellow; } /*以....开头 ^*/ [for^='user']{ color: #008000; } /*以....结尾 $*/ [for$='vvip']{ color: red; } /*包含某元素的标签*/ [for*="vip"]{ color: #00BFFF; } /**/ /*指定单词的属性*/ label[for~='user1']{ color: red; } input[type='text']{ background: red; }
6. 伪类选择器：
CSS为一些特殊效果准备了特定的工具，我们称之为“伪类”。伪类选择器一般会用在超链接a标签中。使用a标签的伪类选择器我们需要遵循 ——
“爱恨准则”：
a:link，定义正常链接的样式；
a:visited，定义已访问过链接的样式；
a:hover，定义鼠标悬浮在链接上时的样式；
a:active，定义鼠标点击链接时的样式。
/*没有被访问的a标签的样式*/ .box ul li.item1 a:link{ color: #666; } /*访问过后的a标签的样式*/ .box ul li.item2 a:visited{ color: yellow; } /*鼠标悬停时a标签的样式*/ .box ul li.item3 a:hover{ color: green; } /*鼠标摁住的时候a标签的样式*/ .box ul li.item4 a:active{ color: yellowgreen; }
7. nth-child()：
为css3中的选择器
/*选中第一个元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*选中最后一个元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*选中当前指定的元素 数值从1开始*/ div ul li:nth-child(3){ font-size: 30px; color: purple; } /*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/ div ul li:nth-child(n){ font-size: 40px; color: red; } /*偶数*/ div ul li:nth-child(2n){ font-size: 50px; color: gold; } /*奇数*/ div ul li:nth-child(2n-1){ font-size: 50px; color: yellow; } /*隔几换色 隔行换色 隔4换色 就是5n+1,隔3换色就是4n+1 * div ul li:nth-child(5n+1){ font-size: 50px; color: red; }
8. 伪元素选择器：
存在于代码中，但是不存在与内存中
/*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/ p:before{ content:'alex'; } /*在....之后添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ p:after{ content:'&'; color: red; font-size: 40px; } /*清除浮动*/ .clearfix:after{ content: '.'; clear: both; display: block; visibility: hidden; height: 0; }
