Test 22

• css 层叠样式表
  1. 添加的语法：

选择器{

样式-->样式名：样式值；

属性名：属性值；

....

}

1. 1. 如何添加css
      1. 行内样式表：在元素行内的内部为元素添加样式
         • 优先级最高，但是如果想要为多个元素添加相同样式的时候麻烦，不便于后期维护
      2. 内部样式表：在html的内部为html中的元素添加样式
         • 在head中添加一对标签style标签，在标签对中添加样式
      3. 外部样式表：在html的外部为html中元素添加样式
      4. 样式表的优先级：行内的优先级最高，谁离元素最近谁的优先级最高
   2. 选择器：在css中，选择器是一种模式，用于选择需要添加样式的元素。
      1. 基础选择器
      2. 组合选择器
      3. 伪类选择器
      4. 微元素选择器
   3. 基础选择器
      1. Id选择器;# id属性唯一的，不可重复

根据元素的id属性选择1个元素

1. 1. 1. 类选择器：.class 属性值可以重复的，可以在值列表中添加多个属性值

根据于元素的class属性值选择1个或一组元素

1. 1. 1. 元素选择器：标签名

根据元素标签名选中一个或一组元素

1. 1. 1. 通配符：*
         • *{

    Padding：0；

Margin：0；

}   去除浏览器默认样式

1. 1. 1. 优先级：id>类>元素>通配符
   2. 组合选择器：
      1. 后代选择器
         • 父级选择器   子级选择器
         • 选中所有的子元素包括孙子元素
      2. 子元素选择器：用于选择指定标签元素的所有第一代子元素，以大于号分隔
      3. 相邻兄弟选择器：可选择紧接在另一个元素后的元素，且二者有相同父元素。以加号分隔
      4. 普通兄弟选择器：选择紧接在另一个元素后的所有元素，且二者有相同的父元素，以波浪线分隔
   3. 群组选择器：

选择器1，选择器2...{

样式；

}

1. 1. 伪类选择器:
      1. a：link a标签未访问
      2. a: visited a标签以访问
      3. ：hover 当鼠标悬停在元素上时候，作用的样式
      4. ：active 当鼠标按下时候显示作用的样式
      5. ： first—child 当元素作为父级的第一个子元素时候被选中
      6. ： last—child 当元素作为父级的最后一个元素时候被选中
      7. ： nth—child（num）当元素作为父级的第n个元素的时候被选中
   2. 注意：css中样式存在继承
      1. 字体样式，颜色样式，背景样式等等都会默认继承
      2. 边框，内外边距等样式不会继承

1. 1. 背景样式
      1. 文本样式：
         • Text—align：center；块元素|行内块元素中内容在元素中的水平对齐方式
         • Text—indent  字体所占宽度
         • width: 1000px;
         • height: 1500px;
         • background-color: pink ; /*背景颜色*/
         • background-image: url("img/img1.jpg"); /*背景图片*/
         • background-repeat: no-repeat ; /*不平铺*/
         • background-position: center bottom; /*背景图片位置*/
         • background-position: 200px bottom;
         •  /*复合属性 : 同时设置多个背景相关的样式 顺序,个数可以任意改变*/
         • background: orchid url("img/boy.jpg") no-repeat center;
         • Font-family：””  设置字体样式
         • Fant-weight：  加粗
      2. 标签：
         • 行内元素：宽度由内容撑起，可以与其他元素同行展示，不能设置宽高，可以包含行内或普通文本，不能设置上下内外边距
         • 块元素：独占一行，可以设置宽高，可以包含行内、块、文本，可以设置元素的内外边距
         • Display：
           1. None 元素消失
           2. Block 块元素
           3. Inline 行内元素
           4. Inlinne-block  行内块，行内元素与块元素的特点都存在

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！