本文共 1318 字，大约阅读时间需要 4 分钟。

网页设计.css样式

一、CSS核心基础

1.1 CSS样式规则

• CSS样式中的选择器严格区分大小写，属性和值不区分大小写，一般全部小写。
• 如果属性的值有多个单词组成且中间包含有空格，则必须为这个属性的值加上引号（英）
• 如：p{font-family:"Times New Roman"}
• 为了提高代码的可读性，书写CSS时可以适当地加入一些注释
• /*这是CSS注释样式*/
• 在CSS中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以用空格键、Tab、回车键等进行代码排版，如：
• P{text-decoration: underline; font-family: "微软黑雅"；}
• P{
  text-decoration: underline; /*定义文字修饰*/
  font-family: "微软黑雅"； /*定义字体类型*/
  }
• 属性的值和单位之间不能有空格！

1.2 引入CSS样式表

使用CSS修饰网页元素时，首先需要引入CSS样式表，常用的引入方式有三种：行内式、内嵌式、链入式。

行内式：

1.3 CSS基础选择器

CSS基础选择器就是将CSS样式应用于特定的HTML元素。

标记选择器：

• 几乎所有的HTML标签都可以作为标记选择器
• 标记选择器最大的优点在于可以快速为同页面中的同类型标签标记统一样式，同样缺点就是不能设计差异化样式。
  
  

类选择器：

• 类选择器使用“.”进行标识，后面紧跟类名。
• 在该语法中，HTML元素的class属性值即为类名。
• 类选择器的最大优势在于可以为元素对象定义单独或相同的样式。
  

id选择器：

1.4 CSS扩展选择器

标签指定选择器：

群组选择器：

表示含有某种通配符的

关系选择器

div > a 表示应用于div标签下一级的第一个a标签

p + span 表示应用于与p标签 同级后的第一个span标签

p ~ span 表示应用于与p标签 同级后的所有span标签

链接伪类选择器

主要应用于展示超链接的不同状态

基础结构伪类选择器

：root 表示应用于当前文档下所有标签的样式

body:not(h2){} 表示应用于body标签下除h2标签的所有标签