CSS复习

CSS基础元素，属性总结复习

详情：1.https://blog.csdn.net/weixin_52192654/article/details/109545921

           2.https://blog.csdn.net/weixin_52192654/article/details/114445113

           3.https://blog.csdn.net/weixin_52192654/article/details/109617608

1.什么是CSS?

CSS-Cascading Style Sheet [层叠样式表]

是用于(增强)控制网页[html]样式并允许将样式信息与网页内容分离的一种标记性语言.

2.css选择器

1. 元素选择器---根据html元素的名称选中被控制的html标记。元素名称{  };
2. id选择器--根据给html标记设置的id属性来选中被控制的html标记  格式 #id名称{  }   // 例：#p1{font-size: 20px;color: orange;}
3. 类【class】选择器---根据给html标记设置的class属性来选中被控制的html标记。格式 .类名{ } 例：.p1{font-size: 20px;color: orange; background-color: aqua;}
4. 包含选择器--选择所有被父元素包含的子元素。格式：父元素名称   子元素名称 { }  例：div h1{ background-color: black;color: white;}
5.  属性选择器--根据html标记的属性来选中被控制的元素 

              格式：1.元素 [属性名称] { sRules }：选择具有某个属性的元素  例： p[id]{background-color: black;}

                          2.元素 [属性名称 = value【属性值】 ] { sRules }：选择具有某个属性且属性值等于 value 的元素

                                 例：h3[id="h1"][class="6"]{background-color: green;}

         属性选择器可以选择多个属性一起控制，多个属性需要用[ ]来隔开；

      6. 子元素选择器---选择所有作为E1子对象的 E2 。

           格式  父元素>子元素  例：div ol>li p{color: blue;}

       7.选择器分组----将同样的样式应用于多个选择器选中的元素上。不同的选择器之间使用“，”分割。

         格式： 选择器,选择器{  }   例：ul li[id="l1"], .olp{color: red;}

3.常用的伪类

       1.:link---设置 a 标记在未被访问前的样式。

             格式:a: link {css样式属性}

       2.:hover----设置对象在其鼠标悬停时的样式。

            格式:Selector: hover{css样式属性}

        3.:active---设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。应用于任何对象

             格式:Selector:active{css样式属性}

例子：

      a:link{

            font-size: 30px;

            color: blue;

       }

        a:hover{

                font-size: 80px;

                color: red;

         }

         a:active{font-size: 80px;

                    color: black;

          }

4.CSS中常用的属性设置

   1.关于字体的常用css属性设置

1. color--设置字体颜色[颜色单词/颜色码【#0000ff】]

2. font-family---设置字体名称[黑体.....]

3. font-size --设置字体大小【数字px】

4. font-style--设置字体倾斜【normal | italic | oblique 】

5. font-weight--设置字体粗细【整百的数字【100~900】】

6. text-decoration--设置字体的修饰线【none || underline下划线 || overline上划线 || line-through贯穿线 】

7. text-shadow--文本的文字是否有阴影及模糊效果

8. text-transform--文本的大小写转换【none | capitalize | uppercase | lowercase 】

9. line-height--行高【数字px】

10. letter-spacing--文字之间的间隔 normal | length 【数字px】

11. word-spacing--单词之间插入的空隔normal | length 【数字px】

  2.关于文本属性的常用设置

1. text-indent :文本的缩进 length 【数字px】
2. vertical-align：垂直对齐方式top  middle bottom
3. text-align :水平对齐方式left | right | center

  3.关于背景的设置

     整个网页的背景设置

1. 整个网页的背景颜色【在body元素中设置bgcolor】
2. 整个网页的背景图片【在body元素中设置background】

     Html元素的背景设置

1.  Html元素的背景颜色【background-color】
2.  Html元素的背景图片【background-image:url("imgs/banner1.png");】

  4.关于html元素的尺寸设置

1. width : 设置元素的宽度 auto | length 
2. height : 设置元素的高度auto | length 

  5.关于边框设置

1. border-color : 边框颜色
2. border-style ：边框样式
3. border-width：边框粗细

     上面这三个属性可以分为4组

1. border-top-color，border-top-style，border-top-width
2. border-right-color，border-right-style，border-right-width
3. border-bottom-color，border-bottom-style，border-bottom-width，
4. border-left-color，border-left-style，border-left-width，

         我们可以通过border属性设置4边的边框  ：border:粗细  样式  颜色。

  6.关于列表的设置

1. 有序列表 <ol><li></li></ol>
2. 无序列表 <ul><li></li></ul>
3. 自定义列表<dl><dt><dd></dd></dt></dl>

     列表的设置就是改变一下列表的前面的标识。

         list-style-image : 设置标识图标none | url ( url )

     例：   ul{

             list-style-image:url("imgs/home.PNG");

         }

    7.关于表格的设置

1. border-collapse :设置表格单元格之间的边框合并[ separate | collapse相邻边被合并] 
2. border-spacing :表格边框独立时，行和单元格的边在横向和纵向上的间距。 【数字px】
3. empty-cells :当单元格中没有内容时,单元格的边框是否显示 show | hide 

    8.关于补丁的设置

       补丁--子元素和父元素之间的距离

1. 如果设置的是父元素---内补丁【padding】
2. 如果设置的是子元素---外补丁【margin】

      padding:12px 15px  28px  35px

                    四个参数值，将按上－右－下－左的顺序作用于四边。

      padding:12px

                    提供一个，将用于全部的四边

      padding:12px 15px

                    两个，第一个用于上－下，第二个用于左－右

     padding:12px 15px  28px

                   提供三个，第一个用于上，第二个用于左－右，第三个用于下

   9.关于布局的属性设置

             float：html元素是否及如何浮动【none没有 | left{左浮动} | right{右浮动} 】

             块级元素:其元素的前后会自动折行

             行内元素:按照由左向右一次排列，除非使用<br>元素强制换行。

   10.设置html元素的隐藏和显示

        1.display:html元素是否及如何显示

                       1.block：显示

                       2.none:隐藏

        2.visibility:是否显示html元素

                         1.visible：显示

                         2.hidden:隐藏

       3.display与visibility的区别?

                        1.Display隐藏元素之后，元素的物理空间也会消失，

                        2.Visibility:隐藏元素之后，元素的物理空间不会消失，会留出空白。

   11.关于定位的属性设置

1. position：设置HTML元素的定位方式
2. static：默认值。无特殊定位，html元素遵循HTML定位规则
3. absolute:绝对定位。脱离HTML默认的定位规则，使用left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。
4. relative：相对定位。不脱离HTML默认的定位规则，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

         left【左距】，right【右距】 ， top【上距】 ， bottom【下距】

        必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。

        HTML默认的定位规则，html元素在HTML文件中按照从左上角向右下角一次排列，遇见块级元素折行。

     z-index：设置对象的层叠顺序

                  较大 number 值的对象会覆盖在较小 number 值的对象之上

                  注意:z-index属性是的有效性与position属性有关。

               例子：

                         #div{

                              z-index:2;

}