类选择器

.className {
  color : red;
}

<div class = "className"> aaa </div>

1 ，类选择器 表示的是 选择定义了class （假设类选择器为 . first {}）为first的标签，括号里面的样式都是选中的这些标签的样式，class可以设置多个，因此可以选择多个标签。

注意点：
1 <div class = "font20 meet">xxx</div> 一个标签的class可以设置为多个，不同的className之间用 空格分开，这时，可以使用多个.class 选择器 选择这个标签，需要注意的是，比如两个标签

<style>
        .first {}
        .second{}
</style>
<div class = "fisrt second">xxx</div>

如果两个选择器中有相同的属性设置，后者会覆盖前者，覆盖的原则是CSS的定义顺序，和HTML的定义顺序无关。

2 类名选择器 --> #idName {}

<style type="text/css">
        #test {
            color: red;
        }
    </style>
    <div id="test">1234</div>

类选择器 使用 # 来表示，在HTML元素中定义id值，#id值 则表示选中id为这个值得标签。
类选择器和id选择器的区别就在于： 类相当于名字，id相当于身份证号，是唯一标识，html元素可以定义多个相同的class值，而id不能重复。因此id只能选择一个标签，class可以选择多个标签。

还有标签选择器 h1 {} 和通配符选择 *{} 这些使用的比较少；

CSS的字体样式

字体连写的方式

<style type="text/css">
        h1 {
            color: red;
            font: initial 400 40px "微软雅黑";
          /* font ： font-style font-weight font-size font-family; (后面两个不能省略) */
        }
    </style>
    <h1>连接</h1>

注意：这个是设置字体的，给div设置这个连写就没有用。

font- style 字体样式

italic : 倾斜；
normal ： 正常;

font-weight 字体粗细

normal == 400 ; 正常
bold == 700; 加粗  注意： 400 和700是没有单位的

font-size 字体大小

 16px;  必须要带单位
em:代表一个字大小，1.5em 则为一点五倍的默认字体大小

font-family 字体

"微软雅黑"
"黑体"
一般不用记，写多个字体 会先匹配前面的字体，如果前面的字体没找到，再依次往后面找字体。

color : 颜色----不写了 就是 rgb 16进制

line-height ： 行高 相对应的有单元格间距 -（少用）cellspacing

line-height: 60px; 可以给p标签设置行高
/* 如果行高等于盒子的高度，可以让字体 垂直居中展示 */

text-indent: 首行缩进 默认写法 text-indent : 2em; 首行缩进两格

text-decoration: 文字下划线，上划线，删除线设置

none: 正常
underline: 下划线；
line-through:删除线；

复杂选择器

1 后代选择器

.nav p {} : 这个的意思是 class为nav的标签下的p标签，不管p标签是否是第一层元素还是内部嵌套的标签，都会被选中。

2 子代选择器

.nav > p {} ；这个叫做子代选择器，这个和上面的区别是，这个选择的是class为nav的标签下面的亲儿子，也就是第一层子标签中的p标签 
<div class = "nav">
      <p> --->这个p标签，直接儿子才会选中；

3 交集选择器 div.read {} 这个就是 class为read的div标签的意思，即两个条件都要满足

4并集选择器： .nav, .read {} :对多个选中的标签使用相同的样式表，也就是说不管是class为nav 或者ckass为read都会应用这个样式。

伪类选择器 ---a标签 也就是链接的不同状态

注意 ： 类选择器是一个点，伪类就是两个点，也就是顿号

其中 伪类有四种状态
lv ha  
link visited hover active
link: 链接
visited： 链接已经点击
hover： 鼠标悬停到链接上
active： 鼠标点击但没有松开
这个顺序不能变
一般使用中，只设置a的默认样式，再使用 a:link 设置一下悬停的样式即可。

显示模式 display

display ： inline : 行内元素
                block ： 块级元素
              inline-block: 行内块元素

块级元素特点 占一行或多行，可以设置宽高
行业元素特点 相邻在一行，没有宽高，只有水平的padding 和margin 长度为内容的长度，行内元素一般嵌套行内元素，a标签除外
行内块特点 相邻元素在一行，可以设置宽高，内边距和外边距 两个行内块之间有间隙

block内 的inline 可以看做 文本，使用 text-align 可以使block内的inline水平居中。