font字体相关样式

font-size  设置字体大小

    <style>
        p {
            font-size: 18px;
        }
    </style>

注意点：一定要带单位，而单位是px

font-family 设置字体

    <style>
        p {
            font-family: '微软雅黑'，'黑体';
        }
    </style>

注意：值可以跟多个，如果是中文或者是有特殊符号的需要被引号包裹起来，而浏览器选择的顺序是从左至右依次寻找，如果找到了，那么浏览器就用改字体，如果一直没有找到就会用默认的字体

font-weight 设置粗细

    <style>
        p {
            font-weight: param;
        }
    </style>

param（值）：

- 设置 100 - 900 之间的数值，400代表是默认，700代表是加粗；必须设置的100-900的整数值 例如不能写 101；不能带单位
- bold  加粗|normal 默认

font-style 设置倾斜

    <style>
        p {
            font-style: italic|normal;
        }
    </style>

italic：设置倾斜

normal：默认的

font 简写方式

    <style>
        p {
            font：是否倾斜 是否加粗 文字大小 字体;
        }
    </style>

注意：

- 前两个可以省略，后两个必须要写的
- 一定要严格按照这个顺序去写

文本装饰相关的样式

color 文字颜色

    <style>
        p {
            color: 设置方式;
        }
    </style>

设置方式：

- 英文单词，例如  red  yellow  green  
- 16进制  一定要注意 以  # 号开头
- rgb(255,255,255);
  - rgba(255,255,255, 0~1); 最后的a代表是透明度的意思，0~1的取值  0代表是完全透明，1代表是完全不透明

text-align 设置内容对齐方式

    <style>
        p {
            text-align: left|center|right
        }
    </style>

left：左对齐

center：居中显示

right：右对齐

text-dicoration 设置文本装饰

    <style>
        p {
           text-dicoration: none|underline;
        }
    </style>

none：去除下划线；我们一般用于去除a标签默认的下划线

underline：设置下划线

text-indent 设置首行缩进

    <style>
        p {
           text-indent: 2em;
        }
    </style>

1em就等于一个汉字的距离

line-height 设置行高

    <style>
        p {
           line-height: 17px;
        }
    </style>

复合选择器

后代选择器

    <style>
               h1 p {
           color: red;
        }
    </style>

注意：多个选择器之间用空格隔开

特点：选择从所有的子孙后代，会把h1标签里面包含的所有的p标签

并集选择器

    <style>
               h1，
               p {
           color: red;
        }
    </style>

注意：多个选择器中间用逗号隔开

特点：集体声明，用于有相同样式的多个元素，减少冗余代码；只要是h1标签和p标签内容都是红色

链接伪类选择器

    <style>
               a:link{
            
               }
               a:visited{
            
               }
               a:hover{
            
               }
               a:active{
            
               }
    </style>

a:link  --  为访问链接时 触发的样式   ★

a:visited -- 链接访问过后触发的样式    ★

a:hover -- 鼠标移入到链接身上时，触发的样式      ★★★

a:active -- 鼠标长按在链接上时，触发的样式  ★

注意：

- 一般我们只会用 hover
- 如果全写，一定要注意 顺序   lvha
- a标签在浏览器中是有默认的样式的，如果我们向修改a的一些样式，需要通过选择器把a标签选择出来，然后修改

子元素选择器  子代选择器 ★★

    <style>
               h1>p {
           color: red;
        }
    </style>

注意：选择器中间用 > 号连接

特点：只能选择出 亲儿子； 选出 h1标签里面 下一级是p标签的，颜色变为红色

交集选择器 ★

    <style>
               h1.p {
           color: red;
        }
    </style>

注意：选择器之间没有任何的符号

特点： 并且的意思，选择出来的元素，必须是h1标签，并且类名叫做 p的

显示模式

为什么有显示模式？

因为html里面有很多的标签，而且每一个标签都会有不同的一些效果，所以对这些标签进行了一个分类

块级元素  --- block

- 独自占一行
- 默认的宽度是父容器的宽度
- 可以去设置宽高
- 可以包含任何内容或者元素
  - 文字类型的块级元素(p、h标签、dt) 不能去包含块级元素
- 常见的块级元素有哪些
  - div、p、h类标签、ul、li、ol

行内元素   --- inline

- 一行显示多个
- 默认的宽高是内容的宽高
- 无法设置宽高
- 里面可以包含行内元素和文本内容
- 常见的行内元素有哪些
  - span、a标签、文本格式化标签

行内块元素    ---inline-block

- 一行显示多个
- 默认的宽高是内容的宽高
- 可以设置宽高
- 常见的行内块元素
  - img图片标签、input表单

display   --- 设置元素的显示模式

元素是可以相互去转换显示模式的，就是通过了 display

设置成块级元素

  display: block;

设置成行内元素

  display: inline;

设置成行内块元素

  display: inline-block;

设置成隐藏元素

  display: none;

怎么让单行文本垂直居中

只需要设置 行高等于高度就行了

    <style>
       p{
           height:30px;
           line-height: 30px;
       }
    </style>

关系

- 行高大于高度的话，那么文本偏下
- 行高小于高度的话，那么文本偏上

背景相关的属性

背景颜色 background-color

    <style>
       p{
           background-color:values;
       }
    </style>

values

- 写英文单词   red
- 写16进制  以#号开头
- rgb(255,255,255);

背景图片 background-image

    <style>
       p{
           background-image: url(图片的地址);
       }
    </style>

内容是压在背景上面

背景平铺  background-repeat

    <style>
       p{
           background-repeat: values;
       }
    </style>

values:

- no-repeat  不平铺
- repeat    平铺
- repeat-x    水平方向平铺
- repeat-y    垂直方向平铺

背景定位  background-position

    <style>
       p{
           background-position: values;
       }
    </style>

values:

- 写方位名词
  - 水平方向：left 左对齐  center 居中 right 右对齐
  - 垂直方向：top 顶对齐  center 居中  bottom 底部对齐
  - 注意：是没有顺序的，如果我们只写一个方位名词，另外一个就是默认居中
- 精准单位
  - 第一个值 是X轴的偏移量 水平方向
  - 第二个值 是Y轴的偏移量 垂直方向

背景附着(固定) backgroud-attachment

    <style>
       p{
           background-attachment:scroll|fixed;
       }
    </style>

scroll  背景图片会跟着我们的滚动条来进行滚动

fixed   背景图片不会跟着我们的滚动条来进行滚动

背景的简写

    <style>
       p{
           background: 颜色 图片地址 是否平铺 是否固定 背景定位;
       }
    </style>

注意：没有严格的顺序的，每一个都可以被省略掉

CSS的三大特性

1.层叠性

      样式冲突的情况下，采取就近原则，下面的属性会覆盖掉上面的属性

      样式不冲突的情况下，那么就是属性的叠加

2.继承性

     子元素可以去继承父元素的部分样式

     text-开头的属性

     font-开头的属性

     line-开头的属性

     color

3.优先级

CSS优先级的算法公式

  选择器                                权重        
  通配符选择器或者是继承的属性                     0, 0, 0, 0
  标签选择器                              0, 0, 0, 1
  类选择器、伪类                            0, 0, 1, 0
  id选择器                              0, 1, 0, 0
  style 行内样式                         1, 0, 0, 0
  !important 重要的  这个是要跟在属性后面的        无穷大      

CSS的权重是可以被叠加的----复合选择器里面

    #id .cls:hover{//权重是 0，1，2，0
        
    }

不能进位

分析优先级的一些问题的时候：

找到目标元素，看这个目标元素是否被选择器选中，如果选中了，那么比对优先级，如果没有选中，那么就可能使用了继承的样式

盒子模型

组成

- 内容
- 边框
- 内边距
- 外边距

边框 border

组成

- border-width  边框的粗细  可以省略 默认是3px
- border-style    边框的样式  不能省略
  - solid 实线
  - dashed  虚线
  - dotted   点线
- border-color  边框的颜色   可以省略 默认是黑色

    <style>
       p{
           border:1px solid red;
       }
    </style>

还可以单独去进行设置

设置左边框： border-left: 1px solid  red;

设置右边框： border-right: 1px solid pink;

设置上边框： border-top: 1px solid green;

设置下边框： border-bottom: 1px solid purple;

浮动

浮动是用来干嘛的？

用来布局的，能够让多个盒子水平排列，为什么不用行内块呢？ 因为多个行内块的元素中间有间隙，而这个间隙很难去去除

语法

    div {
        float: left | right
    }

left: 左浮动

right: 右浮动  

特点

- 浮：设置了浮动的元素漂浮在标准流的上面
- 漏：漂浮起来了，脱标了，不占据标准流的位置，那么后面的标准流的兄弟元素就占据了它之前在标准流的位置
- 特：设置了浮动的元素 改变了元素的特性，类似于 行内块；如果说浮动元素的宽度大于了父元素的宽度，会自动换行

清除浮动

为什么要清除浮动？

在我们很多时候，父盒子不方便去设置高度，然后我们子元素浮动了，导致了父元素的高度为0，从而影响了整个的页面布局

清除浮动的本质

解决浮动的子元素造成父元素高度为0的问题

清除浮动的必然条件

1.父盒子没有设置高度

2.子元素浮动了

清除浮动的方法

额外标签法

会在浮动的最后一个子元素的后面添加一个新的空标签，然后给这个标签设置 clear：both的属性

    <div>
       <div>我是设置了浮动的元素</div>
       <div style="clear: both"></div>
    </div>

给父亲设置 overflow的属性

    .parent {
        overflow: hidden;
    }

利用单伪元素

    .clearfix:after {
        content: '';
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }

注意：声明的  .clearfix  这是一个类选择器，仅仅声明没有调用时不会起作用的，我们需要把这个类名设置给浮动元素的 父亲

利用双伪元素

    .clearfix:before,
    .clearfix:after {
         content: '';
         display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }

注意：声明的  .clearfix  这是一个类选择器，仅仅声明没有调用时不会起作用的，我们需要把这个类名设置给浮动元素的 父亲

浮动元素与父元素的关系

我们一般在布局的时候，会给浮动的元素都会套一个父盒子，这个父盒子就是为了占位的

浮动元素默认不会压住父元素的边框和内边距

浮动元素与兄弟元素的关系

浮动元素只会影响后面的兄弟元素，不会影响前面的

font字体相关样式

font-size  设置字体大小

    <style>
        p {
            font-size: 18px;
        }
    </style>

注意点：一定要带单位，而单位是px

font-family 设置字体

    <style>
        p {
            font-family: '微软雅黑'，'黑体';
        }
    </style>

注意：值可以跟多个，如果是中文或者是有特殊符号的需要被引号包裹起来，而浏览器选择的顺序是从左至右依次寻找，如果找到了，那么浏览器就用改字体，如果一直没有找到就会用默认的字体

font-weight 设置粗细

    <style>
        p {
            font-weight: param;
        }
    </style>

param（值）：

- 设置 100 - 900 之间的数值，400代表是默认，700代表是加粗；必须设置的100-900的整数值 例如不能写 101；不能带单位
- bold  加粗|normal 默认

font-style 设置倾斜

    <style>
        p {
            font-style: italic|normal;
        }
    </style>

italic：设置倾斜

normal：默认的

font 简写方式

    <style>
        p {
            font：是否倾斜 是否加粗 文字大小 字体;
        }
    </style>

注意：

- 前两个可以省略，后两个必须要写的
- 一定要严格按照这个顺序去写

文本装饰相关的样式

color 文字颜色

    <style>
        p {
            color: 设置方式;
        }
    </style>

设置方式：

- 英文单词，例如  red  yellow  green  
- 16进制  一定要注意 以  # 号开头
- rgb(255,255,255);
  - rgba(255,255,255, 0~1); 最后的a代表是透明度的意思，0~1的取值  0代表是完全透明，1代表是完全不透明

text-align 设置内容对齐方式

    <style>
        p {
            text-align: left|center|right
        }
    </style>

left：左对齐

center：居中显示

right：右对齐

text-dicoration 设置文本装饰

    <style>
        p {
           text-dicoration: none|underline;
        }
    </style>

none：去除下划线；我们一般用于去除a标签默认的下划线

underline：设置下划线

text-indent 设置首行缩进

    <style>
        p {
           text-indent: 2em;
        }
    </style>

1em就等于一个汉字的距离

line-height 设置行高

    <style>
        p {
           line-height: 17px;
        }
    </style>

复合选择器

后代选择器

    <style>
               h1 p {
           color: red;
        }
    </style>

注意：多个选择器之间用空格隔开

特点：选择从所有的子孙后代，会把h1标签里面包含的所有的p标签

并集选择器

    <style>
               h1，
               p {
           color: red;
        }
    </style>

注意：多个选择器中间用逗号隔开

特点：集体声明，用于有相同样式的多个元素，减少冗余代码；只要是h1标签和p标签内容都是红色

链接伪类选择器

    <style>
               a:link{
            
               }
               a:visited{
            
               }
               a:hover{
            
               }
               a:active{
            
               }
    </style>

a:link  --  为访问链接时 触发的样式   ★

a:visited -- 链接访问过后触发的样式    ★

a:hover -- 鼠标移入到链接身上时，触发的样式      ★★★

a:active -- 鼠标长按在链接上时，触发的样式  ★

注意：

- 一般我们只会用 hover
- 如果全写，一定要注意 顺序   lvha
- a标签在浏览器中是有默认的样式的，如果我们向修改a的一些样式，需要通过选择器把a标签选择出来，然后修改

子元素选择器  子代选择器 ★★

    <style>
               h1>p {
           color: red;
        }
    </style>

注意：选择器中间用 > 号连接

特点：只能选择出 亲儿子； 选出 h1标签里面 下一级是p标签的，颜色变为红色

交集选择器 ★

    <style>
               h1.p {
           color: red;
        }
    </style>

注意：选择器之间没有任何的符号

特点： 并且的意思，选择出来的元素，必须是h1标签，并且类名叫做 p的

显示模式

为什么有显示模式？

因为html里面有很多的标签，而且每一个标签都会有不同的一些效果，所以对这些标签进行了一个分类

块级元素  --- block

- 独自占一行
- 默认的宽度是父容器的宽度
- 可以去设置宽高
- 可以包含任何内容或者元素
  - 文字类型的块级元素(p、h标签、dt) 不能去包含块级元素
- 常见的块级元素有哪些
  - div、p、h类标签、ul、li、ol

行内元素   --- inline

- 一行显示多个
- 默认的宽高是内容的宽高
- 无法设置宽高
- 里面可以包含行内元素和文本内容
- 常见的行内元素有哪些
  - span、a标签、文本格式化标签

行内块元素    ---inline-block

- 一行显示多个
- 默认的宽高是内容的宽高
- 可以设置宽高
- 常见的行内块元素
  - img图片标签、input表单

display   --- 设置元素的显示模式

元素是可以相互去转换显示模式的，就是通过了 display

设置成块级元素

  display: block;

设置成行内元素

  display: inline;

设置成行内块元素

  display: inline-block;

设置成隐藏元素

  display: none;

怎么让单行文本垂直居中

只需要设置 行高等于高度就行了

    <style>
       p{
           height:30px;
           line-height: 30px;
       }
    </style>

关系

- 行高大于高度的话，那么文本偏下
- 行高小于高度的话，那么文本偏上

背景相关的属性

背景颜色 background-color

    <style>
       p{
           background-color:values;
       }
    </style>

values

- 写英文单词   red
- 写16进制  以#号开头
- rgb(255,255,255);

背景图片 background-image

    <style>
       p{
           background-image: url(图片的地址);
       }
    </style>

内容是压在背景上面

背景平铺  background-repeat

    <style>
       p{
           background-repeat: values;
       }
    </style>

values:

- no-repeat  不平铺
- repeat    平铺
- repeat-x    水平方向平铺
- repeat-y    垂直方向平铺

背景定位  background-position

    <style>
       p{
           background-position: values;
       }
    </style>

values:

- 写方位名词
  - 水平方向：left 左对齐  center 居中 right 右对齐
  - 垂直方向：top 顶对齐  center 居中  bottom 底部对齐
  - 注意：是没有顺序的，如果我们只写一个方位名词，另外一个就是默认居中
- 精准单位
  - 第一个值 是X轴的偏移量 水平方向
  - 第二个值 是Y轴的偏移量 垂直方向

背景附着(固定) backgroud-attachment

    <style>
       p{
           background-attachment:scroll|fixed;
       }
    </style>

scroll  背景图片会跟着我们的滚动条来进行滚动

fixed   背景图片不会跟着我们的滚动条来进行滚动

背景的简写

    <style>
       p{
           background: 颜色 图片地址 是否平铺 是否固定 背景定位;
       }
    </style>

注意：没有严格的顺序的，每一个都可以被省略掉

CSS的三大特性

1.层叠性

      样式冲突的情况下，采取就近原则，下面的属性会覆盖掉上面的属性

      样式不冲突的情况下，那么就是属性的叠加

2.继承性

     子元素可以去继承父元素的部分样式

     text-开头的属性

     font-开头的属性

     line-开头的属性

     color

3.优先级

CSS优先级的算法公式

  选择器                                权重        
  通配符选择器或者是继承的属性                     0, 0, 0, 0
  标签选择器                              0, 0, 0, 1
  类选择器、伪类                            0, 0, 1, 0
  id选择器                              0, 1, 0, 0
  style 行内样式                         1, 0, 0, 0
  !important 重要的  这个是要跟在属性后面的        无穷大      

CSS的权重是可以被叠加的----复合选择器里面

    #id .cls:hover{//权重是 0，1，2，0
        
    }

不能进位

分析优先级的一些问题的时候：

找到目标元素，看这个目标元素是否被选择器选中，如果选中了，那么比对优先级，如果没有选中，那么就可能使用了继承的样式

盒子模型

组成

- 内容
- 边框
- 内边距
- 外边距

边框 border

组成

- border-width  边框的粗细  可以省略 默认是3px
- border-style    边框的样式  不能省略
  - solid 实线
  - dashed  虚线
  - dotted   点线
- border-color  边框的颜色   可以省略 默认是黑色

    <style>
       p{
           border:1px solid red;
       }
    </style>

还可以单独去进行设置

设置左边框： border-left: 1px solid  red;

设置右边框： border-right: 1px solid pink;

设置上边框： border-top: 1px solid green;

设置下边框： border-bottom: 1px solid purple;

浮动

浮动是用来干嘛的？

用来布局的，能够让多个盒子水平排列，为什么不用行内块呢？ 因为多个行内块的元素中间有间隙，而这个间隙很难去去除

语法

    div {
        float: left | right
    }

left: 左浮动

right: 右浮动  

特点

- 浮：设置了浮动的元素漂浮在标准流的上面
- 漏：漂浮起来了，脱标了，不占据标准流的位置，那么后面的标准流的兄弟元素就占据了它之前在标准流的位置
- 特：设置了浮动的元素 改变了元素的特性，类似于 行内块；如果说浮动元素的宽度大于了父元素的宽度，会自动换行

清除浮动

为什么要清除浮动？

在我们很多时候，父盒子不方便去设置高度，然后我们子元素浮动了，导致了父元素的高度为0，从而影响了整个的页面布局

清除浮动的本质

解决浮动的子元素造成父元素高度为0的问题

清除浮动的必然条件

1.父盒子没有设置高度

2.子元素浮动了

清除浮动的方法

额外标签法

会在浮动的最后一个子元素的后面添加一个新的空标签，然后给这个标签设置 clear：both的属性

    <div>
       <div>我是设置了浮动的元素</div>
       <div style="clear: both"></div>
    </div>

给父亲设置 overflow的属性

    .parent {
        overflow: hidden;
    }

利用单伪元素

    .clearfix:after {
        content: '';
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }

注意：声明的  .clearfix  这是一个类选择器，仅仅声明没有调用时不会起作用的，我们需要把这个类名设置给浮动元素的 父亲

利用双伪元素

    .clearfix:before,
    .clearfix:after {
         content: '';
         display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }

注意：声明的  .clearfix  这是一个类选择器，仅仅声明没有调用时不会起作用的，我们需要把这个类名设置给浮动元素的 父亲

浮动元素与父元素的关系

我们一般在布局的时候，会给浮动的元素都会套一个父盒子，这个父盒子就是为了占位的

浮动元素默认不会压住父元素的边框和内边距

浮动元素与兄弟元素的关系

浮动元素只会影响后面的兄弟元素，不会影响前面的