第三章 css

3.1css的引入方式

行内样式

<div style='color:red'>alex</div>

内嵌式

在head标签中内部书写style
<style>
    /*css代码*/
</style>

外接式

在head标签中内部书写style
<link href='css/index.css' rel='stylesheet'>

优先级：行内样式>内嵌样式和外接式，外接式和内嵌式的优先级是一样的但是需要看代码从上到下谁在后面就显示谁的，同一属性会覆盖，不同属性不会覆盖

3.2css的选择器

3.2.1基础选择器

id选择器--唯一性

#xxx

类选择器

• 可以重复，归类

<style> .box{width:200px; height:200px; background-color:yellow; }.active{ border-radius: 200px; }  #对active单独设置，border-radius边框是小圆角
</style> 

<div class='box active'></div> 
<div class='box'></div> 
<div class='box'></div

.xxx 

 

3.2.2标签选择器

div{}
p{}
ul
ol
....

3.2.3高级选择器

• 后代选择器

div p{color: red; }

• 子代选择器

div>p{color:red; }

• 组合选择器：多个选择器组合--重置样式

div,p,body,html,ul,ol....{ padding: 0; margin: 0; }
input，textarea{border:none;outlin:0;}

• 交集选择器

div.active{ } 既作用在div也作用在active

3.2.4伪类选择器

• 对于a标签，如果想设置a标签的样式，要作用于a标签上，对于继承性来说，a标签不起作用的

• “爱恨准则”

• LoVe HAte

/*LoVe HAte*/
/*a标签没有被访问时候设置的属性*/
a:link{
    /*color: red;*/
}
/*a标签被访问过后设置的属性*/
a:visited{
    color:yellow;
}
/*a标签悬浮时设置的属性*/
a:hover{
    color: deeppink;
}
/*a标签被摁住的时候设置的属性*/
a:active{
    color: deepskyblue;
}

link、visited、active只能用在a标签上，hover可以用在任意标签上

3.2.5属性选择器

input[type='text']{
    background-color: red;
}
input[type='checkbox']{

}
input[type='submit']{

}

3.2.6伪元素选择器

p::first-letter{
    color: red;
    font-size: 20px;
    font-weight: bold;
}--设置第一个文字
p::before{
    content:'@'; @小猪佩奇
}--在p标签前面添加内容。content是添加的内容
/*解决浮动布局常用的一种方法*/
p::after{
    /*通过伪元素添加的内容为行内元素*/
    content:'$';   @小猪佩奇$
}--在p后面前面添加内容。content是添加的内容
<p>小猪佩奇</p>