企业官网建设流程全解析

CSS

为网页添加样式

术语解释

h1{color:red;background-color:lightblue;text-align:center}

css规则=选择器+声明块；

选择器

确定样式的范围即选择元素；

1. 元素选择器：直接书写要选中的元素+{}；（所有同名元素）

2. ID选择器：选择对应ID的元素；（给同名元素加id属性）#+

3. 类选择器：如：class属性（类）：.+class里面的类名+{}（如.red{color:red}）

4. 通配符选择器

*，表示所有元素都被选中

5. 属性选择器
   [href]{}表示选中具有这个属性的元素
   [href=hujehi]表示选中属性值为hujehi的元素
   [href~=value]表示该属性里里面的元素以空格分离，且至少有一个满足
   [href|=value]表示以value为前缀
   [href^=value]表示属性值以value开头
   [href$=vallue]表示属性值以value结尾
   [href*=value]表示属性值包含value元素
6. 伪类选择器
   选择某些元素的某种状态
   a:hover{
   color：red；
   }
   表示选中鼠标悬停时的元素

   hover:鼠标悬停状态 3
   active：激活状态鼠标按下的状态 4
   link:超链接未访问的状态 1
   visited:超链接访问过的状态 2
   love hate

7. 伪元素选择器
   如：span::before{}

   before
   after
   content:“《”；

更多的伪类选择器

1. first-child
   选中第一个子元素
   如：a:first-child:表示选中a元素，且a元素必须是第一个子元素
   a:first-of-type:表示选中子元素中第一个a元素
2. last-child
   选中最后一个子元素，同上
3. nth-child
   选中指定的那个子元素
   odd：等同于2n-1；
   even：等同于2n；
4. nth-of-type
   选中指定的子元素里面第几个子元素

更多的伪元素选择器

1. first-letter
   选中第一个文字或者字母
2. first-line
   选中元素中第一行上的文字
3. selection
   选中被用户框选中的样式

选择器的组合

1. 并且 p.red表示必须带有p元素，且有red
2. 后代元素——空格 .red li{}表示class为red的li元素被选中
3. 子元素——>
4. 相邻兄弟元素—— +
5. 兄弟元素—— ~后面出现的所有兄弟元素

选择器的并列

多个选择器用逗号分隔
语法糖

声明块

出现在{}中

其中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。

css代码书写位置

1. 内部样式表

书写在style元素中，一般该元素在head元素中，便于浏览器阅读。

2. 内联样式表

写在元素里面的style属性中

3. 外部样式表[推荐]

将样式书写到独立的css文件中。在head里面使用一个新的元素：link（只用来链接外部文件），加href属性“路径（相对路径和绝对路径）”

推荐原因：

1. 可以解决页面样式重复的问题

2. 有利于浏览器缓存，提高反应速度

3. 有利于代码分离，更容易阅读和维护

层叠

声明冲突：同一个样式多次应到到同一个元素

层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

比较重要性

重要性从高到低：

作者样式：开发者书写的样式；
1）作者样式中的important样式（！important）
2）作者样式中的普通样式
3）浏览器的默认样式

比较特殊性

看选择器：选择器选择的元素越窄越特殊

具体规则：通过选择器，计算出一个四位数

1. 千位：内联样式记作1，否则记0
2. 百位：将选择器中所有id选择器的数量
3. 十位：类选择器，伪类选择器，属性选择器的数量
4. 个位：元素选择器，伪元素选择器的数量

比较源次序

代码书写靠后的胜出

目的

覆盖浏览器本来的样式

常见的重置样式表：normalize.css,reset.css,meyer.css

爱恨法则

继承

子元素会继承父元素的某些属性
通常会继承文字有关的

属性值的计算过程

一个元素一个元素依次渲染，顺序按照页面文档的树型结构

渲染每个元素的前提条件是：该元素的所有属性都有值

一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程叫做属性值的计算过程

1. 确定声明值
   参考样式表中没有冲突的声明，作为css的属性值
2. 层叠冲突
   对样式表有冲突的声明使用层叠规则，确定css的属性
3. 使用继承
   对依然没有值的属性，若可以继承，则继承父元素的属性值（强制继承用inherit）
4. 使用默认值
   对依然没有值的属性，使用默认值initial默认

特殊的俩个css属性值

inherit强制继承
inital强制默认值

盒模型

box盒子
每个元素都会在页面中生成一个矩形区域（盒子）

盒子类型：

1. 行盒，display等于inline的元素
2. 块盒，display等于block的元素

行盒在页面中不换行，块盒独占一行

display默认值为inline即行盒

浏览器默认样式表设置的块盒：容器元素，h1~h6，p；
常见的行盒：span，a，img，video，audio；

盒子的组成部分

无论行盒还是块盒

1. 内容：content
   width，height：盒子内容的宽高
2. 填充：padding
   盒子边框到盒子内容的距离
   padding-left，padding-right，padding-top,padding-bottom
   padding:简写属性：上右下左
3. 边框：border
   边框=边框样式+边框宽度+边框颜色
   border-style
   border-width
   border-color（默认为字体颜色）
   均为简写属性也叫速写属性
   border（w，s，c）
   边框区＋填充区+内容区=边框盒“border-box”
4. 外边距：margin
   边框到其他盒子的距离

盒模型的应用

改变宽高范围

默认情况下，width和height设置的内容的宽高；
衡量设计稿尺寸的时候，往往使用的是边框盒，但是width，height设置的是内容盒

box-sizing：content-box默认值
border-box：宽高则成为边框的宽高

改变背景覆盖范围

默认情况：背景覆盖边框盒
blackground-clip：

溢出处理

overflow，控制内容溢出边框盒的处理方式：默认可见，hiden隐藏scroll滚动（x，y），auto自动

断词规则

work-break：默认normal：CJK字符（文字间截断），非CJK字符（单词位置截断）
break-all：表示所有文字都在文字处截断
keep-all：表示在单词之间截断

空白处理

white-space:nowrap不换行
+overflow：hidden
+text-overflow：ellipsis（······）

white-space：pre：块级元素

行盒的盒模型

显著特点：

盒子沿着内容延伸
行盒不能设置宽高：若改变要用字体大小间接调整

内边距：水平方向有效，垂直方向只影响背景

行块盒

display：inline-block的盒子

1. 不独占一行
2. 但盒模型中所有都有效；
   喜欢做分页
   . pager a{
   border:1px solid #ele2e3;
   text-decoration:none;
   color:#38f;
   width:34px;
   height:34px;
   display:inline-block;
   text-align:center;
   line-height:34px;
   }
   .paper a:hover{
   border-color:1px solid #38f;
   background-color:red;
   background:initial;
   }

空白折叠发生在行盒内部或者行盒之间

可替换元素和非可替换元素

大部分元素页面上显示的结果，取决于元素内容，称为非可替换元素

少部分元素，页面上现实的结果取决于元素属性，称为可替换元素

可替换元素：img，video，audio

绝大部分可替换元素均为行盒

可替换元素类似于行块盒，所有属性均有效

图片中：
object-fit：contain：不打破原有比例
fill：默认取值，不保持比例
cover：保持原有比例且充满
宽度高度若设置一个另一个按比例增加