企业官网建设流程全解析

1.CSS 伪类选择器

三.否定伪类：
:not（选择器）排除满足括号中条件的元素

四.UI伪类：
1.:checked被选中的复选框或单选按钮。
2.:enable可用的表单元素（没有disabled属性）
3.:disabled不可用的表单元素（有disabled属性）

五、目标伪类（了解）
:target选中锚点指向的元素。

2.伪元素选择器

作用：选中元素中的一些特殊位置
常用伪元素：
1.:irst-letter选中元素中的第一个文字
2.:first-line选中元素中的第一行文字
3.:selection选中被鼠标选中的内容
4.:placeholder选中输入框的提示文字
5.:before在元素最开始的位置，创建一个子元素（必须用content属性指定内容）
6.:after在元素最后的位置，创建一个子元素（必须用content属性指定内容）

3.选择器优先级

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突
到底应用哪个样式，此时就需要看优先级了
简单描述：
行内样式ID选择器类选择器元素选择器通配选择器

2.比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：
(1,0,0)>(0,2,2)
(1,1,0)>(1,0,3)
(1,1,3)>(1,1,2)

3.特殊规则：
1.行内样式权重大于所有选择器
2.！important的权重，大于行内样式，大于所有选择器，权重最高！

4.CSS 三大特性

1.层叠性
概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）
什么是样式冲突？
元素的同一个样式名，被设置了不同的值，这就是冲突

2.继承性
概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式
规则：优先继承离得近的
常见的可继承属性：
text-??,font-??, line-??、color

3.优先级
！important>行内样式＞ID选择器>类选择器元素选择器>*>继承的样式。
详细聊：需要计算权重
计算权重时需要注意并集选择器的每一个部分是分开算的

5.CSS 像素与颜色

表示方式一：
颜色名
编写方式：直接使用颜色对应的英文单词，编写比较简单，例如：
1.红色：red
2.绿色：green
3.蓝色：blue
4.紫色：purple
5.橙色：orange
6.灰色：gray

表示方式二：rgb或rgba
编写方式：使用红、黄、蓝这三种光的三原色进行组合。
r表示红色
g表示绿色
b表示蓝色
a表示透明度

举例：
/使用0~255之间的数字表示一种颜色/
color:rgb(255,0,0)😕红色/
color:rgb(θ,255, 0);/* 绿色*/
color:rgb(θ,0,255);/蓝色/
color:rgb(θ,0,0);/* 黑色*/
color:rgb(255,255,255);/白色/

/混合出任意一种颜色/
co1or:rgb(138,43,226）/紫罗兰色/
color:rgba(255,0,0,0.5);/半透明的红色/
/也可以使用百分比表示一种颜色（用的少）/
color:rgb(100%,0%，0%);/* 红色*/
color:rgba(100%，0%,0%,50%);/半透明的红色/

小规律：
1、若三种颜色值相同，呈现的是灰色，值越大，灰色越浅
2.rgb(0，0，0）是黑色，rgb(255,255,255)是白色
3.对于rbga来说，前三位的rgb形式要保持一致，要么都是0~255的数字，要么都是百分比

表示方式三：HEX或HEXA
HEX的原理同与rgb一样，依然是通过：红、绿、蓝色进行组合，只不过要用6个数字，分成3组来表达，
格式为：#rrggbb
每一位数字的取值范围是：0~f，即:（0，1，2，3，4，5，6，7,8，9，a，b，c，d，e，f）
所以每一种光的最小值是：00，最大值是：ff
color:#ffo00e;/红色/
color:#0offoo;/绿色/
color:#0000ff;/蓝色/
color:#000000;/* 黑色 */
color:#ffffff;/白色/
/如果每种颜色的两位都是相同的，就可以简写/
color:#ff9988;/*可简为:#f98 */
/但要注意前三位简写了，那么透明度就也要简写/
color：#ff998866;/可简为：#f986/
注意点：IE浏览器不支持HEXA，但支持HEX

表示方式四：
HSL 或HSLA
HSL是通过：色相、饱和度、亮度，来表示一个颜色的，格式为：hs1（色相，饱和度，亮度）
色相：取值范围是0~360度，具体度数对应的颜色如下图：

饱和度：取值范围是0%~100%。（向色相中对应颜色中添加灰色，0%全灰，100%没有灰）
亮度：取值范围是0%~100%。（0%亮度没了，所以就是黑色。100%亮度太强，所以就是白色了）
HSLA其实就是在HSL的基础上，添加了透明度

6.CSS 常用字符属性

1.字体大小

属性名：font-size
语法：
div {
font-size:40px;
}
注意点：
1.Chrome浏览器支持的最小文字为12px，默认的文字大小为16px，并且0px会自动消失
2.不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小
3.通常以给body设置font-size属性，这样body中的其他元素就都可以继承了

2.字体族

属性名：font-family
语法：
div {
font-family: “STCaiyun”,“Microsoft YaHei”,sans-serif
}
注意：
1.使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找
2.如果字体名包含空格，必须使用引号包裹起。
3.可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上serif（衬线字体）或sans-serif（非衬线字体）
4.windows系统中，默认的字体就是微软雅黑

3.字体风格

属性名：font-style
常用值：
1.normal：正常（默认值)
2.italic：斜体（使用字体自带的斜体效果）
3.oblique：斜体（强制倾斜产生的斜体效果）
实现斜体时，更推荐使用italic。
语法：
div {
font-style: italic;
}

4.字体粗细

属性名：font－weight
常用值：
关键词
1.lighter：细
2.normal：正常
3.bold：粗
4.bolder：很粗(多数字体不支持）
数值：
1.100~1000且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的精确程度）。
2.100~ 300等同于1ighter，400~500等同于normal，600及以上等同于bold。
语法：
div {
font-weight: bold;
div {
font-weight: 600;

5.字体复合写法

属性名：font，可以把上述字体样式合并成一个属性。
编写规则：
1.字体大小、字体族必须都写上
2.字体族必须是最后一位、字体大小必须是倒数第二位。
3.各个属性间用空格隔开。
·实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用font-size属性

6.文本颜色

属性名：color
可选值：
1.颜色名
2.rgb 或 rgba
3.HEX或HEXA
（十六进制）
4.HSL或HSLA

开发中常用的是：
rgb/rgba或HEX/HEXA（十六进制)。
举例:
div {
color:rgb(112,45,78):

7.文本间距

字母间距：
letter-spacing
单词阀距:word-spacing
（通过空格识别词）
属性值为像素（px），正值让间距增大，负值让间距缩小

8.文本修饰

属性名：
text-decoration
可选值：
1.none：无装饰线（常用）
2.underline：下划线（常用）
3.overline：上划线
4.line-through：删除线

可搭配如下值使用：
1.dotted：虚线
2.wavy：波浪线
3.也可以指定颜色
举例：
a{
text-decoration:none;
}

9.文本缩进

属性名：
text-indent
属性值：css中的长度单位，例如：px
举例:
div {
text-indent:40px;
}
后面我们会学习css中一些新的长度单位，目前我们只知道像素（px）

10.文本对齐 水平

属性名：
text-align
常用值：
1.left：左对齐（默认值)
2.right：右对齐
3.center:居中对齐
举例：
div {
text-align:center;
}

11.font-size 细说