10.21css重叠样式表-css基础01

html标签全局属性:所有html标签都可以用的属性

< div data-index="div1"

contenteditable hidden

accesskey="x" id="password"

tabindex="1" class="a1 b1 c1 s-c-a_ 3">

        test1

</div>

1. title 元素的附加说明，鼠标悬浮在元素上面，会出现提示内容

2.data-* 给元素设置自定义数据，主要给 js 用的。（给div元素自定义一个index的数据，数据值是div1）

3.contenteditable把元素变为可编辑状态，允许用户修改元素的内容。

4. hidden隐藏html元素

    

5. tabindex  可以修改元素按 tab 键自动获取焦点的顺序( 值是数字，可以有负数 )，默认所有元素 的 tableindex=0 ， tableindex 一样的时候是顺序获取。

6. accesskey 指定网页元素获取焦点的快捷键(键盘的单个字符串 ) ， alt + 按键。

    

7. id 元素的唯一标识 ( 一个网页里面 id 的属性值是唯一的), 主要用于 js 查询元素，锚点， for 关联元素。

8. class 类 ( 设置元素的类别 )

    可以重名 , 可以把不同的元素分类 , 相同的 class代表属于同一类

    可以有多个 class 属性值，多个值用空格分开

    id 和 class 的命名规则 :

         以字母开头 ( 小写字母 ), 可以包含数字， 字 母， -，_ 的组合。

         命名要有一定的语义 , 方便通过属性值了解 html 元素描述的内容。

9. style 写 css 样式的。属性值就是层叠样式表语法。

    

---

css介绍

css是Cascading Style Sheet的缩写，中文"层叠 样式表"，是一种标准的样式表语言，主要用于描 述网页的表现形式(样式: 如网页的颜色，字体大 小，元素位置等等)

1994年，哈坤-利提出的css，1996年css1.0发 布，1998年发布css2.0，2004年发布css2.1版本，1999年开始准备的css3.0 并模块化，以后逐 步完善各模块，到2010年完善了大部分模块。

浏览器调试样式的方式：

---

css语法

网页布局

• table 是早期的网页布局方案，由于 table 结构比较复杂，特别是复杂网页，浏览器渲染需要耗费 较多资源和时间。现在不能table 做网页布局，一 般用于数据展示。
• 为了提高网页渲染速度， css2.1 的时代流行的是 div + css布局。
• h5 语义化的标签 +css3 布局，现在 w3c 提倡的规范布局。

css 样式语法“ 样式名 : 样式值 ;”, 很多的样式就可以控制元素复杂的显示效果

---

引入css样式的方式

1. 内嵌样式 ( 行内样式 ) ： 直接将 css 样式语言作为 style属性值，写在 html 标签里 面。

   <div style="background-color:rgb(113, 80, 80);color:red;">div1</div>

        缺点: 1. 需要在每个 style 属性里面写样式，不方便维护和编写。

                  2. 样式不能复用, 冗余的样式代码太多，造 成html 体积增大。

        优点: 由于样式和 html 在一起，网页构建的时候 直接能读取样式，渲染网页速度较快。

2. 内嵌样式 : 将样式信息嵌入 <style> 标签里面。 style标签是属于 head 标签的子元素。

<style>

        .style1{background-color:rgb(113, 80, 80); color:blue;}

</style>

         .  代表 class ，这是选择 class="style1" 的标签，给它对应的样式。

3. 外部样式(主流推荐 ): 把 css 样式写在单独的 . css样式文件里面，通过 link 标签引入外面的 css样式文件。

        优点: 可以减少冗余的样式，可以多个文件引入 样式，维护和编写方便，主流的样式编写方案。

        缺点: 需要额外加载 css 样式文件，相对比直接在 html的样式渲染要慢一些 ( 渲染速度差距一般是ms级别，所以可以不用考虑这一点。 )

        link   标签可以将当前网页和外部文件资源关联在一起，通常放在head标签里面。常见用于引入css样式文件。

                rel 必填属性，当前文件和外部资源直接的关系，如果stylesheet加载一个样式表

                href 必填，外部文件的地址，可以是本地路径或 者网络地址。

                type 加载外部文件的类型，可以省略。

4. @import 导入外部样式 , 与 link 标签比较类似。

      

     /* @import url("./css01.css"); */

    @import"./css01.css";

  @import 导入外部样式 , 与 link 标签比较类似。

        可以加url 或者省略 url ，导入的外部样式后面必须加   ;   

         必须在第一行导入,可以导入多个样式文件。

        link 标签引入的样式，在html加载的同时可以加载css样式

        @import 引入样式，会等当前文件加载完成再去导入文件，如果css文件比较大，可能会出现网页加载完成没有样式。

---

css选择器:css选择html元素的特定语法。

  css的标准语法结构

  选择器 : 由 html 的元素的 id,class属性或元素名称以及一些特殊符号构成，用来指定html元素的样式。        【属性 : 样式的名称，值 : 样式具体显示的效果 】

  类选择器 :  .  选择class属性的标签  .style1{}

elements 选择器 ( 元素选择或者叫标签选择 ) ，可以直接选择指定的标签给样式。

  /* 选择网页的所有 p 元素 */

  p{

     color: green;

  }

伪类选择器: 选择器后面有:开头，伪类选择器是特定的选择，不同的伪类选择器有不同的功能。

  /* 未访问的链接 ( 没点击过的链接 ) */

  a:link{

    color: green;

  }

/* 用户已访问过的链接 ( 已点击过的 ) */

a:visited{

  color: bisque;

}

/* 鼠标移入元素 */

a:hover{

  color: brown;

}

/* 鼠标点击的时刻 */

a:active{

  color: black;

}

/* 获取焦点的伪类选择器 */

input:focus{

  color: red;

}

/* 选择网页中第一个子元素是 div 的元素 ( 第一个元素并且是div 元素 ) */

div:first-child{

  color: aquamarine;

}

/* 选择网页中最后一个子元素是 div 的元素 ( 最后一个元素，并且是div 元素 ) */

div:last-child{

  color: blueviolet;

}

后代选择器: ，可以在选择后期添加选择器，选择对应的后端元素。后代选择器以空格区分。后代选择器可以是任意选择器。

/* 选择 box1 元素下面的所有 p 元素 */

.box1 p{

  color: blue;

}

/* 选择 box1 元素下面的所有 p 元素下面的所有span元素 */

.box1 p span{

  color: red;

}

/* 选择 box1 下面的 .p1(p1 类选择器 ) */

.box1 .p1{

  color: brown;

}

/* 选择 .box1 下面的元素中第一个元素是 p 的元素 */

.box1 p:last-child{

  color: cadetblue;

}

后端选择器是有使用范围限制的,后代选择器的限制范围看空格前面的选择器

        .colora 选择器的使用范围是.box3 */

        box3 .colora{

                color: blueviolet;

        }

colora 只能在box3选择的元素上使用 */

        .box3.colora{

                color: blueviolet;

        }

id选择器: #是表示id选择,选择id属性。(这里是 选择id属性值为div1的元素),尽量少用甚至不用

  #div1{

        color: red;

  }

分组选择器,可以把样式相同的选择器编为一 组，用逗号区分,任意选择器都可以分组

div1,p1和span选择器的样式相同

  .diva,.p1,span{

        color: green;

  }

属性选择器,可以选择指定属性的元素(和属性值没有关系)

选择网页中带有title属性的元素

  [title]{

        border:1px solid red;

  }

/* 可以给属性选择器添加其他选择器限制范围 */

/* 选择含有title属性的p元素 */

  p[title]{

        background-color: blue;

  }

/* 可以选择具体属性值的元素 */

/* 选择name属性值为uid的元素 */

  [name="uid"]{

        border: 1px solid green;

  }

/* 根据部分属性值选择 */

/* 选择class属性值中包含有div1的元素 */

  [class~="div1"]{

        background-color: aquamarine;

  }

/* ^属性值以某个字符开头的元素 */

/* 选择以class属性值以p字符的元素 */

  [class^="p"]{

        background-color: brown;

  }

/* 选择class属性值以3结尾的元素 */

  [class$="3"]{

        background-color: black;

  }

/* 选择class属性包含3的元素 */

  [class*="v"]{

        background-color:blueviolet;

  }

> 子元素选择(父元素下面的第一层元素就是子元素)

/* 选择box元素下面的div子元素 */

  .box > div{

        border: 1px solid red;

  }

+ 兄弟选择器(相邻元素选择器),紧挨着某个元素后面的第一个元素

/* 选择li1元素后面的第一个li元素(如果后面的第一个元素不是li元素则不符合) */

  .li1 + li{

        color: red;

  }

伪元素选择器:可以向某些选择器设置特殊效果,主 要是选择特定的元素

css2.1版本的伪元素和伪类都是冒号，不好区分。为了区分这两种选择器，css3规定伪元素用::

::first-line 和 ::first-letter 只能作用于块级元素

1. ::first-line 选择元素中文本的第一行

  box::first-line{

        color: blue;

  }

2. ::first-letter 设置首字母样式

  .box::first-letter{

        font-size: 22px;

  }

3. ::before 在指定元素包裹的内容前面插入元素

  box::before{

        /* content 属性必须要设置，其内容就是元素显示的内容 */

        content:"*"; color: red;

  }

4. ::after 在指定元素包裹的内容的后面插入元素

  .box::after{

        content: "-----"; color: blueviolet;

  }

* 通配符选择器(选择所有元素)

---