HTML入门介绍(下)

CSS选择器

选择器

作用：通过选择器找到对应的标签设置样式；

1.类选择器

第一段文字

对应的使用

.high{
color:red;
}

2.id选择器

第一段文字

对应的使用

#high{
color:red;
}

3.复合选择器

第一段文字
第一个div标签
第二个div标签

对应的使用

div.high{
color:red;
}

4.后代选择器

外面的P标签


div里面的P标签

对应的使用

div.p{
color:red;
} 

5.属性选择器

外面的P标签
fist
fist

对应的使用

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属性