css基础，重点 选择器 id class 子父 兄弟 结构

css基础

Css冲突：

对同一个标签设置了多个同一样式，那么我们遵循就近原则

Css层叠：

设计几种不同样式在最终显示时，会将几种效果叠加

Css继承：

文字相关的样式可以被继承
布局相关的样式不可以被继承
(块级元素会继承父亲宽度，高度不继承。行级标签不继承宽和高)

Css写法：

在head里面写在里面写
新建文件css写，在head里面用引用进来

Css背景：

background-color背景颜色
background-image 背景图片
背景图片属性：
background-repeat:repeat-x背景图片横铺
background-repeat:repeat-y背景图片竖铺
background-repeat:no-repeat背景图片不平铺
background-position（可以用百分数，长度值） 设置背景图像的起始位置
                       Top right  left buttom
background-size：contain背景尺寸   cover占满整个容器 

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动，可设定的值：
scroll	背景图片随页面的其余部分滚动。这是默认
fixed	背景图像是固定的
inherit	指定background-attachment的设置应该从父元素继承
local	背景图片随滚动元素滚动
 background-position：center；背景定位，属性值有两位

 background-clip:border-box 	位置从边框开始
 background-clip:padding-box 位置从内填充开始
background-clip:contend-box 位置从内容开始

Css文字：

对齐方式：
text-align：justify，每一行被展开为宽度相等，左，右外边距是对齐
text-align：center（居中） right（右）left（左）
文本修饰：
text-decoration:none （删除链接的下划线）line-through（文字加删除线）underline（文字下划线）
文本转换：text-transform:uppercase（字母全部大写）
lowercase（字母全部小写）
Capitalize（字母首拼大写）
文字间隔：word-spacing：可以改变字（单词）之间的标准间隔
设置字体大小：font-size:
设置文字字体：font-family
设置文字行高：line-height: 50px;

文本缩进：text-transform: 2em;

text-shadow：水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

Css文本换行：

word-wrap:break-word;允许长文本换行
word-break: keep-all;单词拆分换行
文字倾斜：font-style：italic

Css边框：

border;线宽，样式，颜色
border-style属性用来定义边框的样式
border-style 值:
none: 默认无边框
dotted: 定义一个点线框
dashed: 定义一个虚线框
solid: 定义实线边界
double: 定义两个边界。 两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界。效果取决于边界的颜色值
ridge: 定义3D脊边界。效果取决于边界的颜色值
inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
outset: 定义一个3D突出边框。 效果取决于边界的颜色值
border-width：边框线宽
border-color：线的颜色
border;线宽，样式，颜色
box-shadow：盒阴影，水平位移，竖直位移，模糊度，颜色
border-image：设置图片边框

选择器

/* 1.全局选择器，通配符选择器  * 作用是去除盒子模型的默认结构   */
        /* *{
            margin: 0;(外边距)
            padding: 0%;(内填充)
        } */
        /*2.标签选择器  */
        /* list-style：none 去无序列表的默认远点 */
        /* li{		
            list-style: none;
        }
        /* 3.类选择器  class */
        /* .lili{
            background-color: aqua;
        } */
        /* 4.id选择器   #  唯一性 独一无二  */
        /* #ss{
            background-color: blanchedalmond;
        } */
        /* 5.群组选择器    ，   */
        /* div，p{
            color: aqua;
        } */ 
        /* 6.层次选择器 */
        /* 1.后代选择器  用空格表示 */
        /* 2.子代选择器  用>表示 */
        /* 3.相邻兄弟    用+表示 下面相邻的代码 */
        /* 4.通用兄弟    用~0表示    同级*/ 
        /*  style1000>id 100>class10>标签选择器1>*0>继承*0/

          /* 7.伪类选择器 */
        /* 1.状态伪类  a  */   四个顺序不能变
            /*a：link 默认情况下的状态 */
            /*a：visited 访问过后的状态 */
            /*a：hover 鼠标悬浮时的状态 */
            /*a：active鼠标点击时的状态 */
           
         /* 2.结构伪类  */
      ul li：Nth-child（5）ul下第五个li标签的