一、关系型选择器
（2）子代选择器
可以选中某个元素的直接的子元素，与后代选择器不同的，选择的范围更小
父元素>子元素（样式声名）
层级关系区别：祖先元素>父元素>子元素 使用>进行连接的
（3）兄弟选择器
同一层的关系选择器，可以选中该元素后面的兄弟元素
某元素选择器~该元素后面的所有兄弟（样式声名）
注意兄弟选择器选到的是该元素后面的兄弟，选不到之前的兄弟
（4）相邻选择器
同一层关系选择器，可以选中参照后面的紧挨着的某个选择器
元素选择器 +该元素后面的唯一的相邻兄弟（样式声名）
二、伪类选择器
伪类选择器的作用是匹配某个元素，是不同状态下的
选择器：伪类（样式声名）

a:link {样式声明}` 没有被打开之前，或者没被打开过  特有样式

a:visited {样式声明}   访问过后   特有样式

div:hover {样式声明}  鼠标悬停

p:active {样式声明}   点击激活

input:focus {} 属性表示   input 标签获取焦点

input:cheaked {}        input 单选、复选框
三、伪元素选择器

 CSS 伪元素用于设置元素的“指定部分”的样式

；；before 表示元素最前边的部分，紧随着标签的部分

after 表示元素的最后边的部分，紧随着标签的部分

before{content:""}:after{content:""} content 必须写

 两个冒号 (`::`) 而不是一个冒号 (`:`)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素。大多数浏览器都支持这两种表示方式。

四、css 优先级

（1）优先级的原则

 顺序读取的优先级：是相同类型选择器采用顺序读取后来的优先

 选择器的优先级：不同类型选择器，按照权重原则采用(id 选择器 100,类选择器 10,元素选择器 1)

 继承的优先级：制定样式的优先级大于继承样式的优先级

 多个选择器一起使用的时候：根据权重值累加比较值后采用优先级

 最高优先级：!important，直接获取最高优先级，内联样式不能加!important
（2）优先级的比重大小

    CSS 引入方式分:`内联样式 > 内部样式 > 外部样式`（但要注意外部样式引用要在内部样式下面，才会低于内部样式的优先级）
五、尺寸和单位
定义高度和宽度可以使用的长度单位px,pt,em,rem,%等

    一般情况在pc端页面开发使用px和pt

    移动端开发%，em,rem,vw,vh 等响应式单位

    最大宽度最小宽度，最大高度和最大宽度（在响应式部分进行讲解）

    max-width 最大宽度，max-height 最大高度

    min-width 最小宽度， min-height 最小高度

    不允许出现负值，最小不满足时出现横向或竖向拖动条
五、颜色

   1.英文颜色

   常用 red,green,blue,yellow,orange,pink,purple,gold

    transparent 透明色

   2.十六进制颜色

   #rrggbb#必须写

   1、2 位代表红色范围

   3、4 位代表绿色范围

   5、6 位代表蓝色范围

   十六进制颜色范围是 0-9，a-f

   如果三组都是相同的值，可以简写

  企业标注图一般都使用十六进制颜色

   3.rgb 颜色

    rgb()`函数，三个参数，用逗号分隔

    r 代表红色色值，g 代表绿色色值，b 代表蓝色色值

    取值范围 0~255 之间的 256 个数

    rgba()`a 代表透明度，取值 0~1 之间的数字，0 代表完全透明
六、边框

1.边框的属性

  border-width`边框宽度

  border-style`边框样式，solid 实线，dashed 虚线，dotted 点点

  border-color`边框颜色

2.边框的方向

  border-bottom`下边框

  border-top`上边框

  border-left`左边框

  border-right`右边框

3.边框都简写方式

 border:30px solid green; 三个位置分别可以写边框宽度、边框样式边框颜色，没有严格要求书值都写顺序。

七、元素的分类

1.元素的显示属性

   display 元素以方式显示

   display: block; 以块级元素方式显示

   display: inline; 以内联元素方式显示

   display: inline-block; 属于行内元素，但以块级显示，独占一行，可以设置宽高

   display: none; 让元素不显示

   display: table; 以 table 表格方式显示

<style>
         *{
            margin:0;
            padding:0;
        }
        .d1{
            width: 800px;
            background-color: rgb(252, 3, 3);
        }
        .d1 li{
            list-style: none;
        }
        .d1>ul{
            display: none;
        }
        .d1:hover >ul{
            display: block;
        }
        .d1:hover{
            background-color: hotpink;
        } 

<ol class="d1" align="center">
        <h1>新闻中心</h1>
        <ul>
            <li>新闻热点</li>
            <li>焦点动态</li>
            <li>时事热点</li>
        </ul>
    </ol>

2.内联元素

   内联元素也可以叫行内元素

   设置宽度、高度无效（行内块级显示元素除外）

   和其他内联元素横向从左向右排列

   设置上下内外边距无效

   常见的行内元素 span a 

3.inline-block

    它是行内元素的一种

   不自占一行横向从左向右排列

   可以设置宽度、高度以及内外边距

   常见的行内块级显示元素  img button input 

   幽灵空白节点
   
   在HTML5中文档声名，内联元素所有的解析和渲染表现的就如每一行盒子的前面增加了一个“空白节点”，宛如一个幽灵，不占据任何宽度，也看不见摸不到，但是的确缺存在。

     方法1：把 img 标签变成块级元素 `display: block;`

    方法2：找他爹，父级元素`font-size: 0;`去掉空白节点  

div {
    width: 300px;
    background-color: red;
    /* 去掉幽灵 */
    font-size: 0;
}
img {
    /* 就是和父元素一样宽 */
    width: 100%;
    display: block;
}

4.块级元素

   每个元素都自占一行，后面的元素也只能另起一行

   元素的宽、高以及内、外边距都可以设定

   块级元素宽度不设定，为父级元素宽度

   如果高度不设置为内容高度，如果没有内容，高度为 0

   常见的块级元素 div,p,h1,ul,li,table 

八、显示和隐藏

1.display:none（消失）
使元素消失，脱离文档流

  display：block; 使元素出现，并且让元素显示为块级元素

2. visibility: hidden

   visibility: hidden；元素隐藏，占据页面空间

   visibility: visible;  元素显示

3. opacity: 0;

    opacity 属性代表元素的透明度，取值范围是 0-1 之间的数字,0 代表完全透明,1 代表不透明

    缺点：元素内的一切都会随着透明度改变

十、文本格式化

 1. 字体的书写
    （1）字体大小
            字体大小可以为不同的单位，但是常用单位px，
            不允许出现负的像素值，尽量不要出现小数。
            Font-size:30px  字体大小的属性

            x 像素   pt 磅   em 父级元素的倍数  rem 根标签的倍数   vw 视窗尺寸

            用户的浏览器默认渲染的文字大小是“16px”

  （2）字体系列

    Font-family 属性设置所需要的字体
    一个单词可以直接使用，多个单词需要用引号引起来，中文尽量用双引号引起来
    字体顺序从前往后一次执行
    很多字体商用是收费的

 （3）字体字重

    字体字重就是字体粗细，但根据浏览器的渲染不同展现的粗细也不同，移动端建议不要太粗

    font-weight 字体的字重，字的粗细

   1 和 1000 之间的数字类型值，必须要是 100 的倍数。

   常用关键词：normal（400 默认）、bold（700）
   （4）字体样式
     font-style 字体样式属性
     font-style: normal;  默认正常
     font-style: italic;  倾斜

  （5）字体的简写方式

     font:italic 400 40px “楷体”;
     顺序：字体样式 字重 字号 字体系列，不可改变顺序
     最简方式  font：40px ”楷体“; `字号和字体系列，不能再减少

  （6）字体颜色
      Color:red  颜色色值
      取值：英文   十六进制     rgba()

    2.   文本属性

     （1）文本的水平对齐方式

   text-align 针对块级元素中的内联元素，它需要写在父级（块级元素）中

   left 默认,左对齐    center 居中对齐   right  右对齐

      (2) 文本的行高

      line-height`属性可以设置文本的行间距,可使用长度单位 px，或使用无单位的倍数如 1，1.5，2

     文本的行高包括文字上下间距+文本高度，文本居中显示的时候上下行间距相等

     (3) 文本的线条修饰

         在使用 a 标签的时候有一个默认下划线,有时不需要,在 css reset 中将 a 标签的默认下划线去掉

    text-decoration: none; 无线条

    text-decoration: underline; 下划线

    text-decoration: overline; 上划线

    text-decoration: line-through; 删除线

     （4）首行缩进

      text-indent  指定块容器中第一行文本发生缩进

     text-indent:2em  两倍的字体大小,相当于空两格

     (5)文本的换行

     文本换行的原因

       正常文字的换行(亚洲文字和非亚洲文字)元素本身具有个属性叫 white-space:normal ,当定义的宽度之后自动换行。

       对于连续的英文字符和阿拉伯数字不能换行,这是因为 div 中，英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行

      换行属性

      white-space: nowrap;`不换行

      word-wrap:break-word;`强制换行

（6）文本溢出

        Text-overflow:ellipsis

div{
            background-color: rgb(201, 245, 8);
            width: 360px;
            /*超出部分隐藏*/
            overflow: hidden;
            /*当文本溢出时显示的标记*/
            text-overflow: ellipsis;
            /*强制不换行*/
            white-space: nowrap;
        } 

（7）文字阴影

    文字阴影和盒子阴影类似,都需要具有关键的内容,没有内阴影
    Text-shadow  为文字添加阴影。
    可以添加多个阴影，阴影值之间用逗号隔开。
    第一个值和第二个值代表： x 轴上的偏移量 和 y 轴上的偏移量,使用长度单位
    第三个值代表：模糊半径的大小（羽化程度）。
    第四个值代表：颜色值。
 十一、盒子阴影

Box-shadow:x 轴偏移量 y轴偏移量 羽化 扩展 颜色 内阴影

   第一个值和第二个值代表： x 轴上的偏移量 和 y 轴上的偏移量（正负值）。

   第三个值代表：模糊半径的大小（羽化）不允许负值。

   第四个值代表：扩展半径的大小，向四周扩散相等的大小,正值放大，负值缩小。

   第五个值代表：颜色值。

   第六个值代表：阴影向内 inset：默认阴影向外扩散。

div{
            align-items: center;
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background-color :black;
            box-shadow: inset 20px 6px 30px 0px #fff, 20px -3px 20px 8px #fff; 
        }