CSS选择器
选择器
作用：通过选择器找到对应的标签设置样式；
1.类选择器
<p class="high">第一段文字</p>
对应的使用
.high{
color:red;
}
2.id选择器
<p id="high">第一段文字</p>
对应的使用
#high{
color:red;
}
3.复合选择器
<p class="high">第一段文字</p>
<div class="first">第一个div标签</div>
<div>第二个div标签</div>
对应的使用
div.high{
color:red;
}
4.后代选择器
<p class="high">外面的P标签
</p>
<div class="first">
<p >div里面的P标签</p>
</div>
对应的使用
div.p{
color:red;
}
5.属性选择器
<p class="high">外面的P标签</p>
<div name="rose">fist</div>
<div name="jack">fist</div>
<div class="first"></div>
对应的使用
div[name]{
color:red;
}
标签的显示类型
- 块级标签
- 能独占一行的标签
- 能随时设置宽度和高度（比如 div，p, h1, ul,li）
- 行内标签（内联标签）
- 多个行内标签能同时显示在一行
- 宽度和高度取决于内容的尺寸（比如 span, a, label）
- 行内-块级标签（内联—块级标签）
- 多个行内-块级标签可以显示在同一行
- 能随时设置宽度和高度（比如 input, button）
改变标签的显示类型
display属性可以改变标签的显示类型：
- display：block （设置标签类型为块级）
- display：inline （设置标签类型为行内）
- display：inline-block （设置标签类型为行内-块级）
CSS一些常用属性
- overflow：设置为auto时，当文字超出显示长度的范围时，会自动将其隐藏掉
- background：可以为body设置背景图片
- line—height:内容高度设置，可以设置内容的垂直居中
- border:20PX,solid,green 设置边框的样式（边框宽度为20，采用实线，颜色为绿色）
- border-radiu：设置边框圆角
盒子模型
网页上的每一个标签都是第一个盒子，每个盒子都有四个属性
- 内容（content）：网页中通常是指文字和图片
- height，width
- 填充（padding）：内边距
- padding，padding-top，padding-right。。。
- 边框（border）：盒子本身
- border：20px,solid,green
- 边界（margin）：
- margin，margin-top，margin-right。。。
标签的水平垂直居中
- 水平居中
- 行内标签，行内块级标签的居中：text-alig:center
- 块级标签的居中：margin：0px,auto
- 垂直居中
- 三种标签的垂直居中都使用 line-height属性
