2019.10.11CSS

CSS（层叠样式表）

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

外部样式表：<link rel="stylesheet" type="text/css" href="">

内部样式表：<style type="text/css"></style>

内联样式表：<p style="color: red">内联样式表</p>

通用属性：id,name,class,title,lang,dir

注意：

1.name和id的属性值必须是英文字母开头，其余部分可以包含数字、下划线、点等符号；

2.width和height的属性值在style中必须注明单位px，在其他地方可以不加单位；

css语法：

①一个元素中多个属性用分号隔开，多个元素之间用逗号隔开；

②元素中属性的值一般不加引号，但是当值是若干个单词，就要给值加引号；

③注释：/*```*/   （快捷键是ctr+?）；

④优先级：内联样式>内部样式>外部样式；但是!important是强制优先的作用；

选择器:

【CSS中常用选择器】
        
        ① 标签选择器
          写法： HTML标签名{}
         作用：选中页面中所有与选择器同名的HTML标签。
        
        li{
            /*color: red;*/
        }
        
        ②类选择器（class选择器）
         * 写法：  .class名{}
         * 调用： 在需要应用这套样式的标签上，使用class="class名"调用选择器。 * 优先级： class选择器>标签选择器 */ .ji{ /*color: blue;*/ }  ③ID选择器： * 写法： #ID名{} * 调用： 在需要应用这套样式的标签上，使用id="ID名"调用选择器。 * 优先级： ID选择器>class选择器 */ #two{ /*color: yellow;*/ } /* 【class选择器和ID选择的区别】 * 1. 写法不同：class选择器用.声明，ID选择器用#声明； * 2. 优先级不同：ID选择器>class选择器 * 3. 调用次数不同： class选择器可以调用多次； ID选择器只能调用一次(同一页面，不能出现同名ID)。 */  ④通用选择器 * 写法： *{} * 作用： 作用于页面中所有的HTML标签； * 优先级： 最低！低于标签选择器。 */ *{ /*background-color: yellow;*/ /*color: pink;*/ } ⑤并集选择器 * 写法： 选择器1,选择器2,……选择器n{} 多个选择器之间逗号分隔。 * 生效规则： 多个选择器取并集，只要标签满足其中任何一个选择器，样式即可生效 * * (其实相当于多个选择器拆开写) */ li,.ji{ /*color: red;*/ }

  【特殊选择器：伪类选择器】
          1、 写法： 伪类选择器，在选择器的后面，用:分隔，并紧接伪类状态；
             eg:  a:hover{}
          
          2、超链接的伪类状态：
            :link - 未访问状态           :visited - 已访问状态
            :hover - 鼠标指上状态     :active - 激活选定状态(鼠标点下未松开)
         
           注意： 当超链接多种伪类状态共存时，必须按照link-visited-hover-active 的顺序排列，否则会导致某些状态不能生效。
         
         3、 input的常用伪类状态： :hover :focus - 获得焦点的状态 :active 注意： 当input多种状态共存时，必须按照上述顺序