企业官网建设流程全解析

1.Typora使用方法

2.CSS分类

行内样式表在写的时候一定要写到开始标签里面

<p写在这></p>

3.CSS选择器

p是选择器，color是属性，属性与属性值采用键值对的方式，一定要记得标点符号

属性名：属性值；

选择器分类：

3.1基础选择器

3.1.1类型选择器

<!-- 若给同一个选择器先年后加了不同的样式，后写的样式覆盖先写的样式 -->

div {color:red;font-size: 20px; }

div {color:blue;font-size: 20px;}

则最终样式为蓝色（后来者居上/就近原则）

HTML省略微<!-- -->

CSS省略为/* */

CSS书写规范

3.1.2类选择器（想选取1个或者多个元素时使用）

类选择器的权重（优先级）高于 类型选择器

3.1.3 id选择器（只可以选择1个，具有唯一性）

id喜欢用下划线连接英文单词

id选择器比类选择器优先级更高

id选择器和类选择器的区别：

3.1.4通配符选择器

1.<div class="header"><div>

2.width: 1000px;

3.hight: 40px;

注意：1.根据Emmet语法，也可以写.header+回车，自动生成上方代码<div class="header"><div> 。

w1000 h40也可以达到上方2.3.代码的效果

2.画盒子（将屏幕分成一条一条的），需要宽高背景颜色，width不用写，默认是和浏览器一样宽，height高要写；

如果更改width宽度，盒子默认向左对齐。

3.color 颜色 width宽 height高 font-size字体大小 background-color背景颜色

4.让块级元素在浏览器中水平居中对齐：margin: 0 auto;

5.通配选择器只需要在style里面写就可以了

3.2关系选择器（由两个选择器进行组合）

3.2.1 后代选择器(选择.box里面的p元素)

不止两层，三层也可以，最少两层即可

下面两个都可以做到对特定盒子下的a做修好（最终结果：关于我们联系我们隐私政策 字体呈现为粉色）

div下的所有a标签

div a {

color: pink;

}

类名叫footer的元素下的所有a标签

.footer a {

color: pink;

}

<div class="footer">

<a href="#">关于我们</a>

<a href="#">联系我们</a>

<a href="#">隐私政策</a>

</div>

3.2.2 子代选择器

3.2.3兄弟选择器

（1） 邻接兄弟选择器

（2）通用兄弟选择器

注意：1.这两个优先级应该是一样的

2.在Emmett语法里面，在body中输入 ul>li 最后会得到

<ul><li><li><ul>

3.总结（后代选择器是重点）

图片本身默认是行内元素，默认左对齐。

如果图片宽度小于 610px，可以使用CSS技术让它等比例放大到610px:

.content img {
display: block;让图片变成块级元素，独占一行，方便布局。
width: 100%;图片宽度等于父容器内容区宽度，也就是 610px。
height: auto;高度自动计算，保持等比，不变形。
}

4.CSS文本样式（字体样式 ，文本布局）

CSS 文本样式用于控制网页中文字的外观，包括字体、颜色、对齐、间距等，主要分为两大类

1. 字体样式使用哪种字体， 字体大小，字体粗体、 斜体，等等

2.文本布局文本对齐、行高、 字间距、首行缩进等

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

先有标签再去修改文字样式

4.1 字体样式

字体族：哪一种字体

字体风格：字体是否倾斜

字体装饰：给字体设置上划线，下划线，删除线

4.1.1 字体颜色color

注意：raba(155,0,0,0.3)为文字透明，前三个仍为rgb，最后一个为文字透明程度，取值0-1。

0是完全透明，1是完全不透明。.6代表0.6,0可以省略。

4.1.2字体族 font-family

字体族一般都是加到body标签里面的

衬线体：宋体和仿宋（有尖尖，不一样宽）

无衬线体：黑体和微软雅黑（每个角角都一样宽）

4.1.3字体大小 font-size

可简写为fz10得到：font-size: 10px;

4.1.4字体风格 font-style

<i> =不同性质的文字，默认斜体；<em> =强调，浏览器默认样式是斜体，不加倾斜同样可以表示强调。

4.1.5 字体粗体 font-weight

如果页面中只有一个地方需要加粗，那么使用html中的strong标签进行加粗即可；

如果有大批量的模块需要加粗，可以使用css 中的加粗 进行一次性加粗；

如果用了h2标签是默认加粗的，可以用取消加粗。

4.1.6字体装饰 text-decoration

链接a是有下划线的，可以通过none取消下划线。

在style里面，写td会自动生成text-decoration。

删除线除了用CSS，也可以用标签del.

4.2文本布局

4.2.1文本对齐 text-align

1.只能控制块级元素对齐，对行内元素无法控制；

2.只能控制水平对齐，垂直无法控制；

简写：tac

4.2.2 首行缩进 text-indent

快速：ti2em

4.2.3 字间距 letter-spacing

用于设置文本字符的间距

p {

letter-spacing: 30px;

}

属性值：数字

letter-spacing 会给每一个字符后面都加 30px 的间距，包括最后一个字:

[电] + 30px + [影] + 30px

text-align: center 是把包括这段尾部空白在内的整个文本宽度去居中，于是视觉上文字就整体往左偏了

解决办法：将letter-spacing改小就可以了

4.2.4 行高 line-height

行高变大，上下间距等比例变大。

对于大多数字体，上间距一般比下间距大一点，所以恰好行高与盒子高度相等时文字会略微下沉。

.box {

width: 120px;

height: 50px;

background-color: pink;

margin: 0 auto;

text-align: center;

/* 3.字间距 */

letter-spacing: 5px;

/* 行高等于盒子高度，可以让单行文本垂直居中对齐 */

line-height: 50px;

}

width: 120px 粉色盒子宽 120px
height: 50px 粉色盒子高 50px
background-color 把这个 120×50 区域填成粉色
font-size（你没写） 文字大小，默认 16px
line-height: 50px 行高，让文字在 50px 高的盒子里垂直居中

总结：

4.3 font简写

font 简写属性在一个声明中设置多个字体属性

使用场景： 1. 给整个页面设置相关字体样式

写法有严格顺序，必须写font-size和font-family。

4.4 CSS继承性

跟文字相关的大部分可以继承，其他的不可以，如高height

5.分组选择器

6.伪类选择器

6.1状态伪类选择器

6.1.1 链接伪类

链接伪类用于根据链接的不同状态（如未访问、悬停、点击等）为其添加样式，从而提升用户体验和界面交互性。

active指的是鼠标被点击的状态

6.1.2用户行为伪类

用户以某种方式和文档交互的时候应用，这些用户行为伪类，有时叫做动态伪类

使用场景：

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

2. 表单获得焦点的时候

动态伪类 作用 :

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

div {

background-color:pink;

}

div: hover {

background-color: red;

}

6.2 结构伪类选择器

根据元素的位置选择目标元素。

使用场景：1.选择第1个或者最后一个或者第n个元素（不是从0开始）

注意：公式中的n取值从0开始计算

错误辨析：

原因分析：

.data:nth-child(1)的意思是：选择 class 为data的元素，并且它必须是其父元素的第 1 个子元素。

你的<table class="data">确实是<body>的第 1 个子元素，所以这条规则命中了整个<table>，于是整个表格都变成蓝色了。它并没有去选表格里的第一行。

.datatr:nth-child(...) 中的空格表示“后代”，即选中 .data 内部的 tr，再按 nth-child 过滤。

而 .data:nth-child(...) 没有空格，选的是 .data 元素本身。

新代码解释：

border-collapse:collapse/* 让表格和单元格的相邻边框合并 */

代码效果展示：

（旧）

（新）

6.3表单伪类选择器

7.伪元素选择器

.nav 类选择器

:hover 伪类选择器

：：before 伪元素选择器

代码辨析：

<style>

p::first-letter {

color: orange;

}

p::first-line {

color: red;

}

</style>

<body>

<p>

伪元素选择器：

1.伪元素选择器是通过元素的特殊状态来选择元素的<br>

最终结果：

第一个字显示橙色，是因为::first-letter的作用层级在::first-line之上，属于浏览器对这两个伪元素的特殊层叠处理，即::first-letter本身对第一个字有更高的应用层级。

8.属性选择器

根据元素的属性特征来精准定位元素，从而实现更灵活的样式控制。

9.CSS优先级

简写妙招：

.nav>ul>li>a

即：

<div class="nav">

<ul>

<li><a href="#">首页</a><li>

<ul>

<div>

CSS三大特性总结：