css
一、css的引入方式
1、行内样式：
<div>
<p style="color:green">我是张无忌</p>
</div>
2、内接样式:在head标签中，用style标签声明
<style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style>
3、外接样式:在head标签中，用link链接另外的一个css文件（解耦）
链接式：(主要用链接式)
<link rel="stylesheet" href="./testcss.css">
导入式：
<style type="text/css"> @import url("./testcss.css"); </style>
二、css基础选择器
1、标签选择器：所有，找出共性的内容 不管藏了多深都能选中
标签选择器可以选中所有的标签元素，比如div、ul、li、p等等，不管标签藏多深，都能选中，选中的时所有，而不是一个，所以说共性而不是特性。
body{
color: gray;
font-size: 12px;
}
/*标签选择器*/
p{
color: red;
font-size: 20px;
}
span{
color: blue;
}
2、id选择器：选择唯一的标签，因为id是唯一的
#选中id
同一个页面中id不能重复。任何的标签都可以设置id。id命名规范，可以有数字、下划线、大小写严格区分，aa和AA时不一样的两个属性值。
#box{
background-color: green;
}
#s1{
color: #df5000;
}
#s2{
font-size: 30px;
}
3、类选择器：选中所有，找到有共性
所谓类就是class。class与id非常相似，任何的标签都可以加类，但是类是可以重复的，属于归类的概念。同一个标签中可以携带多个类，用空格隔开。
.lv{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
<!--公共类 共有的属性--> <div> <p class="lv big">段落1</p> <p class="lv line">段落2</p> <p class="line big">段落3</p> </div>
总结：
不要试图用一个类将我们的网页写完，这个标签要携带多个类，共同设置样式。
每个类要尽可能的小，有公共的概念，能够让更多的标签使用。
一般尽可能的用class，一些特殊情况可以使用id（id一般用在js，js是通过id来获取标签的。）
三、高级选择器
1、后代选择器：
使用空格表示后代选择器。父元素的后代（包括儿子、孙子、重孙子）
.container p{
color: red;
}
.item .container p{
color: #df5000;
}
2、子代选择器：
使用>表示子代选择器。比如div>p，仅仅表示的是当前div元素选中的子代（不包含孙子...）元素p。
.container>p{
color: yellowgreen;
}
3、并集（组合）选择器：
多个选择器之间使用逗号隔开，表示选中的页面中的多个标签。一些共性的元素，可以说使用并集选择器。
h3,a,div{
color: #df5000;
text-decoration: none;
}
比如像百度首页使用并集选择器
margin: 0;
padding: 0
}
4、交集选择器：表示两者选中之后元素共有的特性
使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
例如有一个<h4 class="active"></h4>
h4{
width: 100px;
font-size: 16px;
}
.active{
color: #df5000;
text-decoration: underline;
}
/*交集选择器*/
h4.active{
background: #b0b0b0;
}
四、属性选择器
属性选择器就是根据标签中的属性选中当前的标签。
/*根据属性查找*/
[for]{
color: red;
}
/*找到for属性的等于username的元素，字体颜色设为红色*/
[for="username"]{
color: red;
}
/*以.......开头*/
[for^='user']{
color: #ffecec;
}
/*以......结尾*/
[for$='vvip']{
color: red;
}
/*包含某元素的标签 */
[for*="vip"]{
color: #b0b0b0;
}
/*指定单词的属性*/
label[for～="userll"]{
color: red;
}
input[type="text"]{
background: black;
}
五、伪类选择器
伪类选择器一般会用在超链接啊标签中，使用a标签的伪类选择器，一定要遵循“暗恨准则”LoVe HAte
暗恨准则（LoVe HAte）
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: yellowgreen;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{
color: lawngreen;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{
color: #795da3;
}
css3的选择器nth-child()
/*选中第一个元素*/
div ul li:first-child{
fone-size:20px;
color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size: 30px;
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: 40px;
color: green;
}
/*奇数*/
div ul li:nth-child(2n-1){
font-size: 50px;
color: red;
}
/*隔几行换色 隔行换色 隔4换色 就是5n+1 隔3换色就是4n+1*/
div ul li:nth-child(5n+1){
font-size: 60px;
color: red;
}
六、伪元素选择器
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px;
}
/*在...什么之前添加内容 使用此伪元素选择器一定结合content属性*/
p:before{
content: "周芷若，我喜欢你";
}
/*在...什么之后添加内容*/
p:after{
content: "我是赵敏，我喜欢张无忌";
color: red;
font-size: 40px;
}
七、css的继承性和层叠性
1、css有两大特性：继承性和层叠性
（1）继承性：
面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。
继承 ：给父级设置一些属性，子级继承了父级的该属性，这就是css中的继承。
有这些属性可以继承：color、font-*、text-*、line-*。主要是文本级的标签元素。
一些盒子元素属性不能继承，定位的元素（浮动，绝对定位，固定定位）不能继承
（2）层叠性：
权重大的标签覆盖了权重小的标签
权重：谁的权重大，浏览器就会显示谁的属性。
数权重：id的数量、class的数量、标签的数量，顺序不能乱
/*1 0 0 显示红色*/ #box1{ color: red; } /*0 1 0*/ .container{ color: yellow; } /*0 0 1*/ p{ color: green; } </style> </head> <body> <div > <p id="box1" class="container">我是张无忌</p> </div> </body>
浙公网安备 33010602011771号