网页设计.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元素。
大致分为基本的四种：标记选择器、类选择器、id选择器、通配符选择器。
标记选择器：
- 几乎所有的HTML标签都可以作为标记选择器
- 标记选择器最大的优点在于可以快速为同页面中的同类型标签标记统一样式，同样缺点就是不能设计差异化样式。
类选择器：
- 类选择器使用“.”进行标识，后面紧跟类名。
- 在该语法中，HTML元素的class属性值即为类名。
- 类选择器的最大优势在于可以为元素对象定义单独或相同的样式。
id选择器：
说明：
1.同一个id可以应用于多个标记，浏览器不会报错，但是这种方法不被允许
2.id选择器不支持像类选择器那样定义多个值，类似<p id=" bold font22">段落4：同时设置字号为22px、颜色、加粗效果</p>写法是错误的。
通配符选择器：
1.4 CSS扩展选择器
标签指定选择器：
指定特定标签的样式
包含选择器：
说明：
p.title{} :在p标签中类选择器属性值为title时，则整行均执行p.title{}css样式。
p .title{} :在p标签中含有类选择器属性值为title的局部标签内执行p .title{}css样式。群组选择器：
对于大量标签使用同一种CSS样式
属性选择器：
^ 表示以某某为开头的
$ 表示以某某为结尾的
表示含有某种通配符的
关系选择器
div > a 表示应用于div标签下一级的第一个a标签
p + span 表示应用于与p标签 同级后的第一个span标签
p ~ span 表示应用于与p标签 同级后的所有span标签
链接伪类选择器
主要应用于展示超链接的不同状态
基础结构伪类选择器
：root 表示应用于当前文档下所有标签的样式
body:not(h2){} 表示应用于body标签下除h2标签的所有标签
li:empty 表示应用于li标签下的空标签
target结构化伪类选择器
对于跳转至目标时，对目标进行标记
