CSS 二刷

CSS 二刷

一、基础认识

1.1 常见属性

• color：文字颜色；

• font-size:字体大小；

• background-color：背景颜色；

• width：宽度；【数字+px ；数字+% 】

• height：高度；

• list-style: none 去除li的小圆点

1.2 CSS引入方式

内嵌式：写在style标签中；（作用范围：当前网页；使用场景：小案例）

外联式：写在一个单独的.CSS文件中【需要通过link标签在网页中引入】（作用范围：多个页面；使用场景：项目中）；

行内式：写在style属性中（作用范围：当前标签；使用场景：配合js使用）。

二、基础选择器

2.1 标签选择器

结构：标签名{css属性名：属性值; }

注意点：选择的是一类标签，而不是单独某一个。

2.2 类选择器

结构：.类名{css属性名: 属性值; }

注意：

所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头；

一个标签可以同时有多个类名，类名之间以空格隔开；

类名可以重复，一个类选择器可以同时选中多个标签。

2.3 id选择器

结构：#id属性值 {css属性名: 属性值; }

注意：

所有标签上都有id属性；

id属性值在一个页面中是唯一的，不可重复的；

一个标签上只能有一个id属性值；

一个id选择器只能选中一个标签。

2.4 通配符选择器

结构： * {css属性名: 属性值; }

作用：找到页面中所有的标签，设置样式。【可能会用于去除标签默认的margin和padding】

三、 字体和文本样式

3.1 字体样式

1.字体大小：font-size 取值：数字+ px；

（谷歌默认为16px）

2.字体粗细：font-weight;

【关键字：normal（正常）；bold（加粗）】

【纯数字：100~900的整百数：400（正常）；700（加粗）】

3.字体样式：font-style;

【取值：normal（正常、默认值）；italic（倾斜）】

4.字体类型：font-family;

5.字体类型：font属性连写

【取值：font:style weight size family; 】

【省略要求：只能省略前俩个，如果省略了相当于设置了默认值。顺序要求：swsf （稍微舒服）】

【注意点：如果需要同时设置单独和连写形式，则把单独的样式写在连写的下面或 里面】

3.2 文本样式

1.文本缩进：text-indent;

【取值：（1）数字 + px（2）数字 +em (推荐：1em = 当前标签的font-size的大 小)】

2.文本水平对齐方式：text-align;

【取值：left（左对齐） center right】

3.文本修饰：text-decoration.

【取值：underline（下划线） none（无装饰线） line-through（删除线） overline（上划线）】

【注意点：开发中会使用text-decoration : none ; 清除a标签默认的下划线】

水平居中

• text-align:center;能让水平居中的元素有：

  （1）文本

  （2）span标签、a标签

  （3）input标签、img标签

  如果需要让以上元素水平居中，text-align:center需要给以上元素的父元素设置

  【注意点：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置】

• margin: 0 auto;实现div、p、h（大盒子）水平居中

  【注意点：

  （1）如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可；

  （2）margin: 0 auto;一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认 占满父元素的宽度】

3.3 line-height行高

• 作用：控制行间距（给一行上下增加间距）

• 属性名：line-height

• 取值：（1）数字 + px（2）倍数（当前标签font-size的倍数）

• 应用：（1）让单行文本垂直居中可以设置line-height : 文字父元素高度 ；（2）网页精准布局时，会设置**line-weight : 1 可以取消**上下间距

• 行高与font连写的注意点：（1）如果同时设置了行高和font连写，注意覆盖问题；（2）font : style weight size/line-height family ；

  四、选择器进阶

  4.1 复合选择器

  4.1.1 后代选择器：空格

  1.作用：根据HTML标签的嵌套关系，选择父元素**后代中**满足条件的元素

  2.选择器语法： 选择器1 选择器2{css}

  3.结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

  4.注意点：

  （1）后代包括：儿子、孙子、重孙子…

  （2）后代选择器中，选择器与选择器之前通过**空格**隔开

  4.1.2 子代选择器： >

  1.作用：根据HTML标签的嵌套关系，选择父元素**子代中**满足条件的元素

  2.选择器语法： 选择器1 > 选择器2{css}

  3.结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

  4.注意点：

  （1）子代只包括：儿子

  （2）子代选择器中，选择器与选择器之前通过**>**隔开

  4.2 并集选择器： ,

  1.作用：同时选择多组标签，设置相同的样式

  2.选择器语法：选择器1 , 选择器2 {css}

  3.结果：找到选择器1 和选择器2 选中的标签，设置样式

  4.注意点：

  （1）并集选择器中的每组选择器之间通过** , **分隔

  （2）并集选择器中的每组选择器可以是基础选择器或者复合选择器

  （3）并集选择器中的每组选择器通常一行写一个，提高代码的可读性

  4.3 交集选择器：紧挨着

  1.作用：选中页面中同时满足多个选择器的标签

  2.选择器语法：选择器1选择器2 {css}

  3.（既又原则）找到页面中 既 能被选择器1选中， 又 能被选择器2选中的标签，设置样式

  4.注意点：

  （1）交集选择器中的选择器之间是紧挨着的，没有东西分隔

  （2）交集选择器中如果有标签选择器，标签选择器必须写在最前面

  4.4 Emmet语法

  4.5 hover伪类选择器

  1.作用：选中鼠标悬停在元素上的**状态**，设置样式

  2.选择器语法：选择器:hover{css}

  3.注意点：伪类选择器选中的元素的某种状态

  五、背景相关属性

  5.1 背景颜色

  1.属性名： background-color (bgc)

  2.属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制…

  3.注意点：

  （1）背景颜色默认值是**透明**：rgba(0,0,0,0)、transparent

  （2）背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

5.2 背景图片

1.属性名：background-image(bgi)

2.属性值：background-image: url(‘图片的路径’);

3.注意点：

（1）背景图片中url中可以省略引号；

（2）背景图片默认是在水平和垂直方向平铺的；

（3）背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

5.3 背景平铺

1. 属性名：background-repeat(bgr)

2. 属性值：

   • repeat : （默认值）水平和垂直方向都平铺

   • no-repeat :不平铺

   • repeat-x ：沿着水平方向（x轴）平铺

   • repeat-y ：沿着水平方向（y轴）平铺

     5.4 背景位置

1.属性名：background-position (bgp)

2.属性值：background-position: 水平方向位置 垂直方向位置；

【1.水平方向：left center right ;垂直方向： top center bottom】

【2.数字 + px（坐标）】

3.注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

5.5背景相关属性的连写形式

1.属性名：**background **(bg)

2.属性值：单个属性值的合写，取值之间以空格隔开

3.书写顺序：background: color image repeat position

4.省略问题：

（1）可以按照需求省略

（2）特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background: url()

5.注意点：

如果需要设置单独的样式和连写:把单独的样式写在连写的下面或里面

5.6 img标签和背景图片的区别

方法一：直接写上img 标签即可

【img标签是一个标签，不设置宽高默认会以原尺寸显示】

方法二：div标签 + 背景图片

【需要设置div的宽度，因为背景图片只是装饰的CSS样式，不能撑开div标签】

六、 元素显示模式

6.1 块级元素

1.属性：display: block

2.显示特点：

（1）独占一行（一行只显示一个）【占满其父元素】

（2）宽度默认是父元素的宽度，高度默认由内容撑开

（3）可以设置宽高

3.代表标签：div p h系列 ul li dl dt form header nav footer…

【给a标签设置display:block可以使鼠标在那一小块都以小手的形式展现】

6.2 行内元素

1.属性：display: inline

2.显示特点：

（1）一行可以显示多个

（2）宽度和高度默认由内容撑开

（3）不可以设置宽高

3.代表标签：** a span** b u i s strong ins em del…

6.3 行内块元素

1.属性：display：** inline-block**

2.显示特点：

（1）一行可以显示多个

（2）可以设置宽高

3.代表标签：

（1）**input textarea **button select…

（2）特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

6.4 元素显示模式转换

6.5 HTML嵌套规范注意点

• 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等**（p标签不要嵌套div p h等块级元素）**

• a标签内部可以嵌套任意元素（除了a标签）

  七、CSS的三大特性

  7.1继承性

  1.特性：子元素有默认继承父元素样式的特点

  2.可以继承的常见属性：

  （1）color

  （2）font-style font-weight font-size font-family

  （3）text-indent text-align

  （4）line-height

  （5）…

  3.注意点：可以通过调试工具判断样式是否可以继承

【如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式】

• a标签的color会继承失效

• h系列标签的font-size会继承失效

• div的高度不能继承，但是宽度有类似于继承的效果

7.2 层叠性

1.特性：

（1）给同一标签设置不同的样式，会共同作用在标签上

（2）给同一标签设置相同的样式，最终写在最后的样式会生效

2.注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

7.3 优先级

1.公式：继承 < 通配符选择器 < 标签选择器 <类选择器 < id选择器 < 行内样式 < !important

2.注意点：

（1）!important写在属性值的后面，分号的前面！

（2）!important不能提升继承的优先级，只要是继承优先级最低！

（3）实际开发中不建议使用!important。

7.3.1 复合选择器权重叠加计算

权重计算题解题步骤：

1. 先判断选择器是否能直接选中标签，如果不能直接选中----->是继承，优先级最低----->直接pass

2. 通过权重计算公式，判断谁权重最高

   【若均为继承（子承父业）而来，则分析其父的权重】

八、 盒子模型

8.1 内容区域 （content）

1.属性： width/heigth

2.常见取值： 数字 + px

8.2 内边距区域 (padding)

8.2.1 取值

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

8.2.2 单方向设置

属性名：padding - 方位名词

属性值：数字 + px

8.3 边框区域 (border)

8.3.1

单个属性：

作用	属性名	属性值
边框粗细	border-width	数字 + px
边框样式	border-style	实线solid、虚线dashed、点线dotted
边框颜色	border-color	颜色取值

连写以空格隔开；

8.3.2 边框（border）-单方向设置

属性名：border - 方位名词

属性值：连写的取值

8.4 外边距区域 （margin）

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

8.4.2 单方向设置

属性名：margin - 方位名词

属性值：数字 + px

8.4.3 外边距正常现象

场景：水平布局的盒子，左右的margin正常，互不影响

结果：两者距离为左右margin的和

8.4.4 外边距折叠现象

1.合并现象

1.场景：垂直布局的块级元素，上下margin会合并

2.结果：两者距离为margin的最大值

3.解决方法：只给其中一个盒子设置margin即可

2. 塌陷现象

   1.场景：互相嵌套的**块级元素**，子元素的margin-top会作用在父元素上

   2.结果：导致父元素一起往下移动

   3.解决方法：

   （1）给父元素设置border-top或者padding-top（分隔父子元素的margin-top）

   （2）给父元素设置overflow: hidden

   （3）转换成行内块元素

   （4）设置浮动

8.5 调边

（1）手动内减

（2）自动内减： box-sizing: border-box;

8.6 行内元素的margin和padding无效情况

1.场景：给行内元素设置margin和padding时

2.结果：

（1）水平方向的margin和padding布局中有效！

（2）垂直方向的margin和padding布局中无效！

8.7 不会撑开大盒子的特殊情况

1.块级元素：

（1）如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度

（2）此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

八、 伪类和伪元素

8.1 结构伪类选择器（既又原则）

n的注意点：

1. n为：0、1、2、3、4…

2. 常见公式：

先找第一个 li 再找 li 里的第一个a 标签【 li:first-child a { }】

（拓展补充）nth-of-type

8.2伪元素

伪元素：一般页面中的非主体内容可以使用伪元素

区别：

1.元素： HTML设置的标签

2.伪元素：由 CSS模拟出的标签效果

种类：

伪元素	作用
: :before	在父元素内容的最前添加一个伪元素
: :after	在父元素内容的最后添加一个伪元素

注意点：

1.必须设置content属性才能生效

2.伪元素默认是行内元素

8.3 标准流

常见标准流排版规则：

1.块元素：从上往下，垂直布局，独占一行；

2.行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行

8.4 浮动

8.4.1 浮动的作用

图文环绕

网页布局：

场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右 

8.4.2 浮动的代码

属性名： float

属性值：left (左浮动) right（右浮动）

8.4.3 浮动的特点

1.浮动元素会脱离标准流，在标准流不占位置。（相当于从地面飘到了空中）

2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素会受到上面元素边界的影响

5.浮动元素有特殊的显示效果

（1）<mark>**一行可以显示多个**</mark>

（2）<mark>**可以设置宽高**</mark>

注意点：

浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素**本身**水平居中（而不包括文本内容）

8.4.4 清除浮动【把父元素变成BFC盒子】

1.原因：子元素浮动后脱标，不占位置------（影响：）子元素不能撑开标准流的块级父元素-------（目的：）需要父元素有高度，从而不影响其他网页元素的布局

2.清除浮动的方法：

1.直接设置父元素高度：

缺点：有些布局中不能固定父元素高度。如：新闻列表

2.额外标签法：

操作：在*父元素 内容的最后添加一个块级元素*；给添加的块级元素设置clear:both

缺点：让网页HTML结构复杂化

3.单伪元素清除法【用伪元素替代额外标签】

4.双伪元素清除法：【after清除浮动，before解决盒子塌陷】

5.给父元素设置overflow : hidden

操作：直接给父元素设置overflow : hidden

优点：方便

【补充】BFC盒子：（清除浮动；解决margin的塌陷）

【学习浮动后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题】

【一行显示多个，推荐优先使用浮动完成效果】

九、CSS定位

9.1定位的基本介绍

1.定位之后的元素层级最高，可实现层叠

2.可以让盒子始终固定在某个位置

9.2定位的基本使用

设置定位方式：

1.属性名：position

2.常见属性值：

设置偏移值：

1.偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

2.选取原则为**就近原则**

9.3静态定位【标准流】【static】

不能移动

9.4相对定位【relative】(自恋型)

1.相对于自己之前的位置进行移动

2.需要配合方位属性实现移动

3.在页面中占位置----->没有脱标

4.应用场景：子绝父相；小范围的移动

9.5绝对定位【absolute】(拼爹型)

1.相对于非静态定位的父元素进行定位移动

2.需要配合方位属性实现移动

3.默认相对于浏览器可视区域进行移动

4.已经脱标【脱标后的元素宽高默认由内容撑开】

5.应用场景：子绝父相

注意：

9.6子绝父相

margin-left: -数字+px;[相对子元素向左移动]

若为-50%；【相对于父元素向左移动】

9.7固定定位【fixed】

1.相对于浏览器进行定位移动

2.需要配合方位属性实现移动

3.已经脱标，不占位置

4.应用场景：让盒子固定在某一位置

9.8元素的层级关系

不同布局方式元素的层级方式：

标准流<浮动<定位

不同定位之间的层级关系：

1.相对、绝对、固定默认层级相同

2.此时HTML中写在下面的元素层级最高，会覆盖上面的元素

更改定位元素的层级：

【属性名：z-index;属性值：数字 数字越大，层级越高】

十、装饰

10.1 垂直对齐方式

1.属性名：vertical-align

2.属性值：

属性值	效果
baseline	默认、基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

【设置 浮动 或 块级元素 也可解决 垂直对齐】

【l**ine-height 使 img 垂直居中**，且需配合 vertical-align:middle 且该标签适合设置行内元素或行内块元素】

10.2 光标类型

10.3 边框圆角

10.4 overflow溢出部分显示效果

10.5 元素本身隐藏

常见属性：

1.visibility: hidden;

2.display: none;

区别：

1.visibility: hidden 隐藏元素本身，并且在网页中 占位置

2.display: none 隐藏元素本身，并且在网页中 不占位置

注意点：

1.开发中经常会通过 display属性完成元素的显示隐藏切换

2.display:none;（隐藏） display:block; （显示）

10.6 拓展补充

10.6.1 元素整体透明度

场景：让某元素整体（包括内容）一起变透明【rgba( , , , )只能让背景变透明】

属性名： opacity

属性值： 0~1之间的数字【1：表示完全不透明；0：表示完全透明】

注意点：

opacity 会让元素整体透明，包括里面的内容，如：文字、子元素…

10.6.2 边框合并

10.6.3

十一、选择器拓展

11.1 链接伪类选择器

场景：常用于选中超链接的不同状态

选择器语法	功能
a:link { }	选中a链接 未访问过 的状态
a:visited { }	选中a链接 访问之后 的状态
a:hover { }	选中 鼠标悬停 的状态
a:active { }	选中 鼠标按下 的状态

注意点：同时实现时，顺序为LVHA

11.2 焦点伪类选择器

11.3 属性选择器

十二、字体图标 iconfont

**字体图标**展示的是图标，本质属于字体

十三、 项目样式补充

13.1 精灵图

使用步骤：

13.2 背景图片大小

13.3 文字阴影

13.4 盒子阴影

13.5 过渡

十四、项目前置认知

14.1 SEO三大标签

14.2 有语义的布局标签

14.3 ico图标设置

14.4 版心的介绍

14.5 CSS书写顺序

十五、 项目结构的搭建【小兔鲜儿案例】

15.1 文件和目录准备

15.2 基础公共样式

base.css

/*去除常见标签默认的 margin 和padding*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
    margin: 0;
    padding: 0;
}

/*设置网页统一的字体大小、行高、字体系列相关属性*/
body{
    font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
    color: #333;
}


/*去除列表默认样式*/
ul,
ol {
    list-style: none;
}

/*去除默认的倾斜效果*/
em,
i {
    font-size: normal;
}

/*去除a标签默认下划线，并设置默认文字颜色*/
a {
    text-decoration: none;
    color: #333;
}

/*设置img的垂直对齐方式为居中对齐，去除img默认下的间隙*/
img {
    vertical-align: middle;
}

/*去除input默认样式*/
input {
    border: none;
    outline: none;
    color: #333;
}

/*左浮动*/
.fl {
    float: left;
}
/*右浮动*/
.fr {
    float: right;
}

/*双伪元素消除法*/
.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}在这里插入代码片

15.3 index页面骨架设置

15.4 Header 部分开发

15.5 Footer 部分开发

15.6 网站入口 xtx-entry 部分开发

15.7 新鲜好物面板 xtx-new-goods 部分开发

15.8 生鲜商品面板 xtx-fresh-goods 部分开发