CSS级联样式表 1.0

一只聪明漂亮的小可爱
123 阅读7分钟

CSS

级联样式表，（Cascading Style Sheet）一个页面可使用不同的样式进行设置

css最后一条声明的；可省略，但基于W3C标准考虑，将；写完整

样式的引用方式

  1. 行内样式【听说即可，基本不用】

  2. 内部样式（内联样式）

    • 将样式写在head中的style标签内

      • 优点：可同时为多个标签设置多个样式，一般小型项目和练习时可使用内联样式，方便书写和CSS复用
      • 缺点：样式表只对一个网页有作用，不能跨页面复用，HTML文件里写CSS也会导致文件不易于维

    • CSS基本语法

      • 选择器+声明块（{}）

      • 选择器：通过选择器选择页面特定的元素

      • 声明块：通过声明块为元素设置样式，由一个个声明构成

      • 声明是一个名值结构

      • 一个样式名对应一个样式值，名和值之间用：链接；结尾，最后一个；可加可省

  3. 外部样式（外联样式）

    • 将CSS单独存为.css文件，然后用link标签引入它

    • rel：关系 stylesheep 关系表 href=”路径和文件名“

    • 优点：

      • 保证了结构和样式的分离，样式的充分复用，多个HTML网页，可以共用一个CSS样式表文件
      • 将样式编写到外部的CSS文件，可利用浏览器的缓存机制，从而加快网页的加载速度，提升用户体验，开发最佳的使用方式

    • 导入式（外联样式的一种）【知道存在即可】

样式表优先级

行内样式>内部样式>外部样式，服从就近原则

元素命名

  • 命名是建立样式与标签（元素）的桥梁

id命名

  • 标签可以有id属性，是这个标签的唯一标识，同一个页面上不能有取相同的id的标签（类似于人的身份证号码）
  • 语法： id="属性值"，通过#+id对应的属性值可以选择到对应的元素
  • CSS选择器可使用井号“#”前缀选择指定的id的标签
  • id命名主要用于大结构框架和js元素的控制上
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      #pare1{
        color: wheat;
      }
      #pare2{
        color: blueviolet;
      }
    </style>
</head>
<body>
    <p id="pare1">心之所愿，无所不成</p>
    <p id="pare2">只要专业选的好，年年期末赛高考</p>
</body>

class类命名

  • 标签可以有class属性，多个标签可以为相同类名，同一个标签可以同时属于多个类，类名用空格隔开（类似于人的名字，可重复）
  • 语法： class="class名字"，通过“.class名字” 可以选中对应的标签
  • 主要用于元素样式的设置
<head>
    <meta charset="UTF-8">
    <title>Document</title> 
    <style>
      .p2{
        color: brown;
      }
      .p1{
        color: tomato;
        font-style: italic;
      }
    </style>    
</head>
<body>
    <p class="p1">心之所愿，无所不成</p>
    <p class="p2 p1">只要专业选的好，年年期末赛高考</p>
</body>

原子（工具）类

  • 在网页项目设置之前前，可将所有常用字号、文字颜色、行高、外边框、内边距等都设置为单独的类
  • HTML标签就可以“则类选择”它的类名了，这样可以非常快速的添加一些常见样式

元素命名规范

  1. 必须以字母开头命名，命名选择器不允许单个字母，这样可以保证所有的浏览器下都可以兼容
  2. 不允许命名带有广告等英文的单词，如：ad，adv，adver，advertising，以防止该模块被浏览器当作垃圾广告过滤掉，任何文件的命名均如此
  3. 全小写，禁止驼峰命名如：className，多个单词建议统一使用“-”连字符，例如：top-bar
  4. 见名知意

选择器

常用选择器

  1. 标签（元素tag）选择器
    • 作用：根据标签选中指定的页面上所有该种类元素，无论这个标签所处位置的深浅
    • 语法：标签名{}
    • 例子：p{} h1{} span{}
    • 优点：可同时选中所有同类型标签
    • 缺点：指向不明确，“覆盖面”非常大，不能对单个标签进行设置，容易造成样式污染，因此通常用于标签样式 的初始化
  2. id选择器
    • 作用：根据一个标签的id属性去选中一个标签
    • 语法：#+id属性值{}
    • 优点：可对单个标签进行设置
    • 缺点：不能拥有多个id名
  3. class类选择器
    • 作用：根据一个标签的class属性去选中一组标签
    • 语法： .class{}
    • 优点：可同时选中多个标签，也可选择单个标签
  4. 通配符选择器

    • 作用：选中页面所有的标签

    • 语法：*{ }

    • 缺点：覆盖面太广，选中所有，性能浪费，不建议使用，通常用来样式初始化（一般在学习时使用）

    • *{
	margin:0;
	padding:0;
}

复合选择器

选择器名称示例示例的意义
交集选择器li,spec选择既是li的标签，也属于spec类的标签
并集选择器ul,ol选择所有ul和ol标签

  1. 交集选择器

    • 用法：同时选中多个满足条件的元素
    • 语法：选择器1.选择器2.……选择器n{ }
    • 注意：交集选择器如果有元素选择器，必须使用元素选择器开头

  2. 并集选择器（分组选择器）

    • 作用：同时选中多个标签
    • 语法：选择器1，选择器2，……选择器n{ }

  3. 元素关系选择器

    • 应该当前元素根据与其他元素的关系选择元素的选择器
    • 主要为了减少类名
名称举例意义
子选择器div>pdiv的子标签p
后代选择器.box .spec选择类名为box的标签内部的类名为spec的标签
相邻兄弟选择器img+p图片后面紧跟着的段落将被选中
通用兄弟选择器p~spanp元素之后的所有同层级span元素

元素关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素（一个元素的父元素也是它的祖先元素）

后代元素：直接或间接被祖先元素包含的元素（子元素也是后代元素）

兄弟元素：拥有相同的父元素的元素

  1. 子元素选择器

    • 作用：选中指定元素的子元素
    • 语法：父元素>子元素{ }

  2. 后代选择器（最常用）

    • 作用：选中指定元素的所有后代元素
    • 语法：祖先+空格+后代{ }

  3. 相邻兄弟选择器

    • 作用：选中指定元素下一个兄弟
    • 语法：前一个+下一个 用+链接

  4. 通用兄弟选择器

    • 作用：选中后面所有的兄弟（自己除外）
    • 语法：兄~弟{ }
    • 找到符合条件的元素后面的所有兄弟

属性选择器

属性选择器功能描述
E[attr]选择匹配具有属性attr的E元素
E[attr=val]选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)
E[attr^=val]选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说,字符串val与属性值中的任意位置相匹配

结构伪类选择器

选择器功能描述
E:first-child作为父元素的第一个子元素的元素E（不区分类型）
E:last-child作为父元素的最后一个子元素的元素E（不区分类型）
E F:nth-child(n)选择父级元素E的第n个子元素F，(n可以是1、2、3)，关键字为even、odd，（不区分类型）
E:first-of-type选择父元素内具有指定类型的第一个E元素
E:last-of-type选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)选择父元素E内具有指定类型的第n个F元素
avatar
文章
阅读
粉丝