企业官网建设流程全解析

一、CSS简介

1.全称

层叠样式表（Cascading Style Sheets）

2.作用

是一种标记语言，用于给HTML结构设置样式

二、CSS行内样式

1.行内样式

写在标签的style属性中,又称内联样式
e.g.

<h1style="color:red;font-size:60px;">...</h1>

2.内部样式

• 写在HTML页面内部，将所有的CSS代码提取出来，单独放在style标签中
• 写法

<style>h1{color:gray;font-size:22px;}</style>

3.外部样式

• 写在单独的CSS文件中，在HTML文件中引用

• CSS文件中：

h1{color:gray;font-size:22px;}

• HTML文件中：

<link rel="stylesheet" href="./XXX.css"

• link标签要写在head标签中

三、样式表的优先级

1.优先级规则

行内样式>内部样式=外部样式

2.同级样式

同级样式表现形式与顺序有关，后面会覆盖前面的，即后来者居上

四、CSS的语法规范

1.CSS语法的组成

（1）选择器

找到要添加样式的元素

（2）声明块

设置具体的样式，声名块是由一个或多个声明组成的，生命的格式为属性名：属性值

2.注意事项

• 最后一个声明后的分号理论上能省略，但最好还是写上
• 选择器与声名块之间，属性名与属性值之间，均有一个空格，理论上可以省略，但最好还是写上

3.注释

• 写法

/* 我是注释 */

• 快捷键
  ctrl+/

五、CSS代码风格

1.展开风格

开发时推荐，便于维护和调试

2.紧凑风格

删去空格及回车，项目上线时推荐，可减小文件体积

六、HTML元素间的关系

1.父元素

直接包裹某个元素的元素，就是该元素的父元素

2.子元素

被父元素直接包含的元素

3.祖先元素

父元素的父元素…，一直往外找，都是祖先元素
注：父元素也是祖先元素，但一般称为父元素

4.后代元素

子元素的子元素…,一直往里找，都是后代
注：子元素也是后代元素，但一般称为子元素

5.兄弟元素

具有相同父元素的元素，互为兄弟元素

七、CSS基本选择器

1.通配选择器

（1）作用

可以选中所有的HTML 元素

（2）语法

*{属性名:属性值;}

（3）应用场景

清除样式

2.元素选择器

（1）作用

为页面中某种元素统一设置样式

（2）语法

标签名{属性名:属性值；}

3.类选择器

（1）作用

根据元素的class值，来选中某些元素

（2）语法

.类名{属性名:属性值;}

(3)注意点

• 元素的class属性不带.，但class选择器要带
• class的值的标准
  • 不使用纯数字
  • 不使用中文
  • 尽量使用英文与数字的组合
  • 若用多个单词组成，使用-做连接
  • 一个元素不能写多个class属性
  • 一个元素的class属性可以有多个值，要用空格隔开

4.ID选择器

（1）作用

根据元素的id属性值，精准的选中某个元素

（2）语法

#id值{属性名:属性值;}

(3)注意点

• id的值的标准
  • 不包含空格
  • 区分大小写
  • 尽量由字母、数字、下划线、短杠组成
  • 最好以字母开头，不要以数字开头
  • 一个元素不能写多个id属性
  • 一个元素可以同时拥有id和class属性

5.交集选择器

（1）作用

选中同时符合多个条件的的元素

（2）语法

选择器1选择器2选择器3...选择器n{属性名:属性值;}

(3)注意点

• 有标签名，标签名必须写在前面
• id选择器理论上可以作为交集的条件，但是实际上几乎不用，因为没有意义
• 交集选择器中不可能出现两个元素选择器
• 最常用的交集选择器：元素选择器配合类名选择器

6.并集选择器

（1）作用

选中多个选择器对应的元素，又称：分组选择器

（2）语法

选择器1, 选择器2, 选择器3, ..., 选择器n{属性名:属性值;}

(3)注意点

• 并集选择器一般竖着写
• 任何形式的选择器，都可以作为并集选择器的一部分
• 并集选择器通常用于集体声明，可以缩小样式体积

7.后代选择器

（1）作用

选中指定元素中，符合要求的后代元素

（2）语法

选择器1 选择器2 选择器3 ... 选择器n{属性名:属性值;}

（3）注意点

• 先写祖先，再写后代
• 选择器之间，用空格隔开
• 选择器可以选择任意学过的一种
• 结构一定要符合HTML嵌套要求

8.子代选择器

（1）作用

选中指定元素中，符合要求的子元素
子代选择器又称：子元素选择器、子选择器

（2）语法

选择器1>选择器2>选择器3>...选择器n{属性名:属性值;}

（3）注意点

• 选择器之间，用>隔开
• 选择器可以是任一类型

9.兄弟选择器

（1）相邻兄弟选择器

1）作用

选中指定的元素后，符合条件的相邻兄弟元素

2）语法

选择器1+选择器2{属性名:属性值;}

（2）通用兄弟选择器

1）作用

选中指定元素后，符合条件的所有兄弟元素

2）语法

选择器1~选择器2{属性名:属性值;}

（3）注意点

• 两种兄弟选择器，选择的都是下面的兄弟

10.属性选择器

（1）作用

选中属性值符合一定要求的元素

（2）语法

1）选中具有某个属性的元素

[属性名]{属性名:属性值;}

2）选中包含某个属性，且属性值等于指定值的元素

[属性名="指定值"]{属性名:属性值;}

3）选中包含某个属性，且属性值以指定值为开头的元素

[属性名^="指定值"]{属性名:属性值;}

4）选中包含某个属性，且属性值以指定值为结尾的元素

[属性名$="指定值"]{属性名:属性值;}

5）选中包含某个属性，且属性值包含指定值的元素

[属性名*="指定值"]{属性名:属性值;}

11.伪类选择器

（1）作用

选中特殊状态的元素

（2）分类

1）动态伪类

• :link超链接未被访问的状态

属性名:link{属性名:属性值;}

• :visited超链接被访问过的状态

属性名:visited{属性名:属性值;}

• :hover鼠标悬停在元素上的状态

属性名:hover{属性名:属性值;}

• :active元素激活的状态

属性名:active{属性名:属性值;}

以上四种动态伪类遵循LVHA的顺序，即link、visited、honer、active的顺序

• focus获取焦点的元素，适用于表单元素

属性名:focus{属性名:属性值;}

2）结构伪类

• :first-child所有子元素的兄弟元素的第一个，如果该子元素不是兄弟元素中的第一个，则无法选中

元素名>子元素名:first-child{属性名:属性值;}

• :last-child所有子元素的兄弟元素的最后一个，如果该子元素不是兄弟元素中的最后一个，则无法选中

元素名>子元素名:last-child{属性名:属性值;}

• :nth-child(n)所有子元素的兄弟元素的第n个，如果该子元素不是兄弟元素中的第n个，则无法选中

元素名>子元素名:nth-child(n){属性名:属性值;}

• :nth-last-child(n)所有子元素的兄弟元素的倒数第n个，如果该子元素不是兄弟元素中的倒数第n个，则无法选中

元素名>子元素名:nth-last-child(n){属性名:属性值;}

• :first-of-type所有子元素同类型的兄弟元素的第一个

元素名>子元素名:first-of-type{属性名:属性值;}

• :last-of-type所有子元素同类型的兄弟元素的最后一个

元素名>子元素名:last-of-type{属性名:属性值;}

• :nth-of-type(n)所有子元素同类型的兄弟元素的第n个

元素名>子元素名:nth-of-type(n){属性名:属性值;}

• :nth-last-of-type(n)所有子元素同类型元素的倒数第n个

元素名>子元素名:nth-last-of-type(n){属性名:属性值;}

以上带有nth的选择器括号中的数字有以下规则：
1.取值从0开始，到∞结束
2.0或不写为什么都不选中
3.形式为num*n+num
4.偶数为2n或even
5.奇数为2n+1或odd
6.-n+3选中的时前三个

• :only-child选中的是没有兄弟元素的元素

元素名:only-child{属性名:属性值;}

• :only-of-type选中的是没有同类型兄弟元素的元素

元素名:only-of-type{属性名:属性值;}

• :root选中的是根元素，即html

:root{属性名:属性值;}

• :empty选中的是没有内容的元素

元素:empty{属性名:属性值;}

3）否定伪类

:not(选择器)排除满足括号中条件的元素

4）UI伪类

• :checked被选中的复选框或单选按钮
• :enable可用的表单元素，省略不写（没有disabled属性）
• :disabled不可用的表单元素（有disabled属性）

5）目标伪类

• :target选中锚点指向的元素

6）语言伪类

• lang()根据指定的语言选择元素（本质是看lang属性的值）

12.伪元素选择器

*（1）VC快捷生成一段可翻译的文字

Lorem:后面跟什么数字，该段文字就有几个单词，若没有加数字，则单词数随机生成

（2）作用

选中元素中的一些特殊的位置

（3）常用为元素

• ::first-letter：选中元素中的第一个文字
• ::first-line：选中元素中的第一行文字
• ::selection：选中被鼠标选中的内容
• ::placeholder：选中输入框的提示文字
• ::before：在元素最开始的位置，创建一个子元素添加内容（必须用content属性指定内容）
• ::after：在元素最后的位置，创建一个子元素，添加内容（必须用content属性指定内容，常用于清除浮动）

.clearfix::after{content:"";display:block;clear:both;}

• ::marker:选择列表项li前面的项目符号或序号

li::marker{color:blue;/* 颜色 */font-size:24px;/* 大小 */content:"★ ";/* 更换符号 */}

八、选择器优先级

1.简单描述

!important>行内样式>ID选择器>类选择器>元素选择器>通配选择器

2.比较权重

（1）计算方式

每个选择器，都可以计算出一组权重，格式为(a,b,c)

• a：ID选择器的个数
• b：类、伪类、属性选择器的个数
• c：元素、伪元素选择器的个数
  并集选择器的每一个部分是分开计算的

(2)比较规则

按照从左到右的顺序，依次比较大小，当前位胜出后，后面不再比较

九、CSS三大特性

1.层叠性

（1）概念

如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）
即：权重一致，看顺序，后来者居上

2.继承性

（1）概念

元素会自动拥有其父元素，或其祖先元素上所设置的某些样式

（2）规则

优先继承离的近的，就近原则；能继承的属性，都是和盒子模型无关的，不影响布局的

（3）常见可继承属性

字体属性、文本属性（除了vertical-align）、文字颜色 等

（4）常见不可继承属性

边框、背景、内边距、外边距、宽高、溢出方式 等

3.优先级

（1）单个比较

!important>行内样式>ID选择器>类选择器>元素选择器>通配选择器>继承的样式

（2）计算权重

十、颜色

1.方法一：颜色名称

h2{color:gray;}

2.方法二：rgb或rgba

(1)编写方式

使用红、绿、蓝三种光的三原色进行组合，取值范围为0~255

• r表示红色
• g表示绿色
• b表示蓝色
• a表示透明度（取值范围为0~1）
  前三种数据的取值要么都是数字，要么都是百分比

(2)示例

h2{color:rgb(255,0,0,0.5);}

3.方法三：HEX与HEXA

(1)格式

用十六进制表示#rrggbbaa，每种颜色最多两位，每一位的取值范围为0~f
若每种颜色两位重复，则可以只写一次重复值，此时透明度也必须写成一位的形式

（2）示例

h2{color:#ff0000;color:#ff0000ff;color:#f00;color:#f00f;}

(3)特殊情况

IE浏览器不支持HEXA, 但支持HEX

4.方法四：HSL或HELA

（1）概念

hsl是通过色相、饱和度、亮度表示一个颜色的，格式为：hsl（色相，饱和度，亮度）,hlsa其实就是在hsl的基础上，添加了透明度

• 色相：取值范围是0~360度
• 饱和度、亮度：取值范围0%~100%