企业官网建设流程全解析

文章目录

• 一、CSS简介
• 1. CSS介绍
• 2. CSS三大特性
• 3. CSS位置分类
• 1. 内联样式表（行内样式表）
• 2. 内部样式表
• 3. 外部样式表
• 二、CSS选择器
• 1. 基础选择器
• （1）类型选择器
• （2）类选择器
• （3）id选择器
• （4）类选择器和id选择器的区别
• （5）通配符选择器
• 2. 关系选择器
• （1）后代选择器
• （2）子代选择器
• （3）邻接兄弟选择器
• （4）通用兄弟选择器
• 3. 分组选择器
• 4. 伪类选择器
• （1）状态伪类
• 1. 链接伪类
• 2. 用户行为伪类
• （2）结构伪类
• （3）表单伪类
• 5. 伪元素选择器
• 1.选择特定部分
• 2. 插入内容
• 6. 属性选择器
• 三、CSS文本样式
• 1. 字体样式
• （1）字体颜色 color
• （2）字体族 font-family
• （3）字体大小 font-size
• （4）字体风格font-style
• （5）字体粗体 font-weight
• （6）字体装饰 text-decoration
• 2. 文本布局
• （1）文本对齐 text-align
• （2）首行缩进 text-indent
• （3）文本字符间距 letter-spacing
• （4）行高 line-height
• （5）font简写
• 总结

一、CSS简介

1. CSS介绍

• CSS的核心是控制视觉表现。

HTML是结构，用于展示内容；

CSS是样式，用于设置网页的样式及布局。

2. CSS三大特性

• 继承性：子元素继承父元素样式，主要是继承跟文字相关的样式；
• 层叠性：后面样式会覆盖前面样式，主要解决样式冲突问题，但是要看选择器权重来确定优先级；
• 优先级：优先级由选择器的权重决定，权重高的规则覆盖权重低的规则。

3. CSS位置分类

1. 内联样式表（行内样式表）

<p style="color:red; font-size:14px;">文字内容</p>

2. 内部样式表

3. 外部样式表

<link rel="stylesheet" href="./css/index.css">

二、CSS选择器

CSS选择器是CSS规则的第一部分。它是选择HTML元素的方式。

CSS属性：采用键值对形式。属性名：属性值。

CSS选择器：选择标签；

CSS属性：修改样式。

1. 基础选择器

基础选择器指的是由单个选择器组成，常见的有:

（1）类型选择器

p { color: gold; }

CSS 层叠性：

CSS 规则可以同时作用于一个元素，浏览器通过特定规则决定最终生效的样式。层叠性解决了样式冲突问题。

原则：后定义的样式覆盖先前的样式。（就近原则）

（2）类选择器

类选择器选择某一个元素或者多个元素。

1. 类名自定义，不能是中文、纯数字

2. 多个英文单词组成尽量使用 - 链接

3. 命名有要意义，尽量见名知义

4. class属性可以有多类名中间用空格隔开

（3）id选择器

选择HTML中具有特定的id属性的唯一元素

（4）类选择器和id选择器的区别

a. 类选择器

1. 语法：以 . 开头，后跟类名（如 .nav）
2. 作用：选择 class 属性的一个或多个元素
3. 特点：可以使用多次
4. 类似：身份证的名字，可以使用多次
5. 场景：后期修改样式基本都是类选择器

b. id选择器

1. 语法：以#开头，后跟id名（如 #header）
2. 作用：选择 特定 id 属性的唯一元素
3. 特点：同一页面中，id 值必须唯一（不能重复）
4. 类似：身份证的编号，唯一，只能用一次
5. 场景：后期主要是配合JavaScript 添加交互效果

（5）通配符选择器

* { margin: 0; /* 去除外边距 */ padding: 0; /* 去除内边距 */ box-sizing: border-box; /* 统一盒模型 */ }

2. 关系选择器

（1）后代选择器

选择某个元素的后代元素（不限层级，包括子元素、孙元素等）

说明：

选择div标签里面的p元素，中间空格隔开。

父级div作用是限定，子元素p修改样式。

父级和子集都可以是任意选择器。

（2）子代选择器

选择某个元素的直接子元素

（3）邻接兄弟选择器

紧邻的的下一个同级元素

h2+p { color: pink; }

选择紧跟着h2后面的第一个p元素

（4）通用兄弟选择器

选择之后的所有同级元素

h2~p { color: pink; }

选择紧跟着h2后面的所有p元素

3. 分组选择器

div， span { color: red; }

使用场景：

1. 多个元素具备相同样式。

4. 伪类选择器

（1）状态伪类

根据用户交互或状态变化选择。比如：鼠标经过链接、表单获得焦点等。

1. 链接伪类

/* 链接伪类 */ /* 未访问链接 */ a:link { color: #000; text-decoration: none; } /* 已访问链接 */ a:visited { color: orange; text-decoration: none; } /* 鼠标悬停链接 */ a:hover { color: red; text-decoration: underline; } /* 被点击的状态 */ a:active { color: blue; text-decoration: none; }

使用场景：

1. 设置链接不同状态的样式。

2. 用户行为伪类

• :hover 鼠标经过元素
• :focus 获得焦点的元素（表单）

/* :hover 鼠标经过伪类 */ .box { width: 100px; height: 100px; background-color: pink; text-align: center; line-height: 100px; } .box:hover { background-color: red; color: #fff; } .search { width: 100px; height: 20px; /* transition: .5s; */ } /* :focus 获得焦点伪类 */ .search:focus { background-color: red; width: 200px; }

使用场景：

1. 鼠标经过元素的时候，修改样式。

2. 表单获得焦点的时候

（2）结构伪类

n 的取值可以是

1. 数字。 从1开始
2. 关键字。 odd 奇数 even 偶数
3. 公式：

• nth-child(3n) 3的倍数，第3.6.9...个元素
• nth-child(n+2) 第2个以及以后的元素
• nth-child(-n+3) 前面3个元素
• 注意公式的n取值从0开始计算

/* 选择第一个小li */ .ul1 li:first-child { color: red; }

使用场景：

1. 选择第1个或者最后一个或者第n个元素。

（3）表单伪类

针对表单元素的状态。

• :disabled 表单禁用
• :checked 选中状态，单选复选按钮

/* 表单禁用伪类选择器 */ button:disabled { /* background: #ccc; */ /* 透明度，让整个按钮透明 0~1 */ opacity: .4; } /* 表单被选中伪类选择器 */ input:checked+label { color: #ff6900; }

使用场景：

1. 表单按钮禁用的时候，调整颜色。

2. 复选框选中修改样式

5. 伪元素选择器

1.选择特定部分

/* 选择首行 */ p::first-line { color: #ff6900; } /* 选择首字母 */ p::first-letter { color: red; font-size: 28px; } textarea { color: pink; font-size: 14px; } textarea::placeholder { color: red; font-size: 12px; }

2. 插入内容

• ::before 元素内插入伪元素，作为第一个元素
• ::after 元素内插入伪元素，作为最后一个元素

/* before和after伪元素 */ div::before { content: '开始'; color: red; } div::after { content: '结束'; color: red; }

注意：

• before和after 是插入的伪元素，特性类似内联元素。
• content属性是必须，不能省略，没有内容空引号即可。
• 后期非常常用。

6. 属性选择器

a { color: #000; text-decoration: none; } /* 属性选择器 */ /* 1. 选择包含属性 */ a[class] { color: red; } /* 2. 选择属性等于值 完全匹配 */ a[class="font"] { color: red; } /* 3. 选择属性值以xx开头 */ a[class^="font"] { color: red; } /* 4. 选择属性值以xx结尾 */ a[class$=t14] { color: red; } /* 5. 选择属性值包含xx */ a[class*="font"] { color: red; } input[type="text"], input[type="password"] { /* 去掉轮廓线 */ outline: none; }

使用场景：

1. 表单样式控制。

2. 图标字体控制.

3. 国际化语言适配等等

三、CSS文本样式

注意： 文字是无法直接通过CSS来更改样式的，必须要用适合的标签来包裹它们，本质是修改标签样式，里面文字跟随样式变化

1. 字体样式

（1）字体颜色 color

• 最常见的颜色指定方式：使用关键字、十六进制值和 rgb() 值。
• 学习可以用关键字，开发用十六进制，特殊情况用rgb

1. 关键字：这些颜色通常不会在生产环境的网 站中使用，主要学习使用。 比如：red、green、blue、pink等。

   .pink { color: pink; }

2. 十六进制：这个是开发最常用的。实际开发中，我们从设计稿直接复制即可。 比如：红色 #FF0000 或者 #F00。

   .color16 { /* color: #f00; */ color: #2CB5A5; }

3. rgb格式：rgb() 函数接受三个参数，分别表示颜色的 红、绿和蓝。也是设计稿复制的比如：红色 rgb(255,0,0) ，另有：rgba(255,0,0, 0.3) 文字透明， 最后一个数值取值 0~1 （0完全透明 1 完全不透明）

   .rgb { color: rgb(255, 0, 0); } /* 半透明 0是完全透明 1是完全不透明 */ .rgba { color: rgba(255, 0, 0, .5); background-color: green; }

（2）字体族 font-family

给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体

.font { font-family：Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif； }

属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体。

（3）字体大小 font-size

CSS 像素（CSS Pixel） 是 CSS 中用于定义长度、尺寸的单位（简写为 px）

/* 3. 字体大小 */ .font12 { font-size: 12px; } .font14 { font-size: 14px; } .fong16 { font-size: 16px; }

不同浏览器默认字体大小不一样，谷歌默认16px，建议给body标签统一指定大小，做到浏览器统一

（4）字体风格font-style

/* 4. 字体样式倾斜 */ .italic { font-style: italic; } .normal { font-style: normal; }

（5）字体粗体 font-weight

• normal：正常粗细
• bold：加粗

• 400：正常粗细
• 700：加粗

/* 5. 字体粗细 */ .nobold { /* font-weight: normal; */ font-weight: 400; } .bold { /* font-weight: 700; */ font-weight: bold; }

使用场景：

1. 很多标题是不要加粗的，此时可以用CSS取消加粗。

2. 部分大批量文字可以利用CSS加粗。

（6）字体装饰 text-decoration

• none：取消文本装饰
• underline：下划线
• overline: 上划线
• line-through：穿过文本的线

/* 6. 字体装饰 */ a { text-decoration: none; } .underline { text-decoration: underline; } .overline { text-decoration: overline; } .line-through { text-decoration: line-through; }

使用场景：

1. 最常见设置链接下划线，比如取消下划线等。

2. 特殊情况添加删除线。

2. 文本布局

（1）文本对齐 text-align

属性值：

• left: 文本左对齐（默认）
• right: 文本右对齐
• center：文本水平居中对齐
• justify: 自动改变字间距，两端对齐

text-align: center;

使用场景：

1. 文本/图片在盒子水平对齐。

2. 文章文字两端对齐。（腾讯体育）

（2）首行缩进 text-indent

/* 2. 文本缩进 */ /* text-indent: 20px; */ text-indent: 2em;

使用场景：

1. 段落首行缩进2个字的效果。

2. logo隐藏文字效果

（3）文本字符间距 letter-spacing

letter-spacing: 5px;

使用场景：

1. 调整字与字之间距离，用户体验更好。

（4）行高 line-height

• 数字px
• 数字不带单位（当前字体大小的倍数）

/* 行高等于盒子高度，可以让单行文本垂直居中对齐 */ line-height: 50px;

使用场景：

1. 设置多行文本之间的上下间距。

2. 让单行文本垂直居中。

（5）font简写

font: font-style font-weight font-size/line-height font-family;

总结

这篇主要介绍CSS基础知识，CSS选择器，CSS文本样式。下一篇介绍盒子模型。