CSS初识_盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距代码

CSS

层叠样式表

作用：给页面中的HTML标签设置样式

写在哪里：

css写在style标签中，style标签一般写在head标签里面。title标签下面

怎么写：

 

px 像素单位

color：改变字体颜色

font-size：改变字体大小

background-color：背景颜色

height设置高度:

width:设置宽度

CSS引入方式

 

外联式：

 

 

 

类选择器：

 

 

一个标签需要加多个类名时，只需要在一个class里面添加即可：

 

id选择器

 

 通配符选择器

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

作用：找到页面中所有的标签，设置样式

注意点：

1．开发中使用极少，只会在极特殊情况下才会用到

2．在基础班小页面中可能会用于去除标签默认的margin和padding(后续讲解)

字体和文本样式：

字体大小

属性名：font-size

取值：数字+px

注意点：

谷歌浏览器默认文字大小是16px

单位需要设置，否则无效

字体粗细：

 

字体样式（是否倾斜）

 

字体系列font-family

 

常见字体系列（了解）

 

样式的层叠问题

 

字体font相关属性的连写

 

文本缩进：

 

文本水平对齐方式

 

水平居中方法总结text-align:center

 

比如img标签的居中，就不是设置img，而是设置body

文本修饰

属性名：text-decoration

取值：

 

underline 下划线

line-through 删除线

overline 上划线

none 无装饰线

行高

 

 

拓展 颜色常见取值（了解）

 

拓展

标签水平居中方法总结margin:0 auto

 

 

后代选择器：空格

 

子代选择器： >

 

并集选择器

 

交集选择器

 

hover伪类选择器

 

emmet语法

 

ul有3个li，li文字分别为1，2，3：

ul>li{$}*3

背景颜色

 

背景图片

 

背景平铺

 

背景位置

 

背景相关属性的连写形式

 

（拓展）img标签和背景图片的区别

 

块级元素

 

行内元素

 

行内块元素

 

元素显示模式转换

 

拓展1：HTML嵌套规范注意点

 

连续快捷键：

alt+shift+点击想要增加的地方，再拖拽

 

CSS盒子模型

3.1 优先级：

特性：不同选择器，优先级不同，优先级高的可以覆盖优先级低的

优先级公式：

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

 

3.2 权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加计算公式：（每一级之间不存在进位）

 

盒子

 

 

2.1内容的宽度和高度

作用：利用width 和height属性默认设置是盒子内容区域的大小

属性：width / height

常见取值：数字+px

 

3.1边框（border）-连写形式

属性名：border

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

如: border : 10px solid red;

快捷键：bd+tab

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

场景：只给盒子的某个方向单独设置边框

属性名：border-方位名词（left、right、top、bottom）

属性值：连写的取值

3.3边框（border）-单个属性

作用：给设置边框粗细、边框样式、边框颜色效果

单个属性：

 

4.5 CSS3盒子模型（自动内减）

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成?

·给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大?

解决方法①：手动内减

操作:自己计算多余大小，手动在内容中减去

缺点:项目中计算量太大，很麻烦

解决方法②：自动内减

操作:给盒子设置属性box-sizing : border-box;即可

优点:浏览器会自动计算多余大小，自动在内容中减去

版心居中：margin: 0 auto;

5.7外边距折叠现象-①合并现象

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

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

解决方法：避免就好

只给其中一个盒子设置margin即可

5.8外边距折叠现象-②塌陷现象

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

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

解决方法：

1. 给父元素设置border-top 或者padding-top(分隔父子元素的margin-top)

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

3. 转换成行内块元素

4. 设置浮动

结构伪类选择器

1.作用与优势:

1.作用:根据元素在HTML中的结构关系查找元素

2.优势:减少对于HTML中类的依赖，有利于保持代码整洁

3.场景:常用于查找某父级选择器中的子元素

1. 选择器

（第三个最重要）

 

伪元素

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

区别:

1.元素:HTML设置的标签

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

种类：

 

注意点：

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

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

标准流

标准流:又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了 应该以何种方式排列元素

常见标准流排版规则:

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

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

浮动的特点

1.浮动元素会脱离标准流(简称:脱标），在标准流中不占位置

· 相当于从地面飘到了空中

1. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
2. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
3. 浮动元素有特殊的显示效果

· 一行可以显示多个

· 可以设置宽高

注意点：

· 浮动的元素不能通过text-align:center或者margin:0 auto

CSS书写顺序：浏览器执行效率更高

1. 浮动 / display
2. 盒子模型：margin border padding 宽度高度背景色
3. 文字样式

清除浮动的方法

①直接设置父元素高度

特点：

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块

②额外标签法

操作：

1.在父元素内容的最后添加一个块级元素+

2.给添加的块级元素设置clear:both

特点：

会在页面中添加额外的标签，会让页面的HTML结构变得复杂

③单伪元素清除法

操作:

用伪元素替代了额外标签

1：基本写法

 

2：补充写法

 

特点：

优点: 项目中使用，直接给标签加类即可清除浮动

④双伪元素清除法

操作：

 

特点：

优点：项目中使用，直接给标签加类即可清除浮动

⑤给父元素设置overf:hidden

操作:

1. 直接给父元素设置overflow : hidden

特点:

优点:方便

定位

1. 1. 网页常见布局方式
2. 标准流

1. 块级元素独占一行→垂直布局
2. 行内元素/行内块元素一行显示多个→水平布局

1. 浮动

1.可以让原本垂直布局的块级元素变成水平布局

1. 定位

1. 可以让元素自由的摆放在网页的任意位置
2. 一般用于盒子之间的层叠情况
   1. 定位的常见应用场景

1. 可以解决盒子与盒子之间的层叠问题

• 定位之后的元素层级最高，可以层叠在其他盒子上面

1. 可以让盒子始终固定在屏幕中的某个位置

定位常见应用场景：购物网站搜索框

2.2使用定位的步骤

1. 设置定位方式

属性名：position

常见属性值：

 

1. 设置偏移值

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

选取的原则一般是就近原则(离哪边近用哪个)

优先级：left>right top>bottom

 

4.1相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动

代码：position : relative;

特点：

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

2.相对于自己原来位置进行移动

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

应用场景：

1.配合绝对定位组CP(子绝父相)

2.用于小范围的移动

5.1 绝对定位（父级相对定位；子级绝对定位 -- 子绝父相）

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

代码：position : absolute;

特点：

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

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

3．在页面中不占位置已经脱标

应用场景：

1.配合绝对定位组CP(子绝父相)

绝对定位的盒子不能使用左右margin auto居中

7.1 固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动

代码：position :fixed;

特点：

1. 需要配合方位属性实现移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置→已经脱标

应用场景：

1. 让盒子固定在屏幕中的某个位置

8.1 元素层级问题

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

• 标准流<浮动<定位

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

• 相对、绝对、固定默认层级相同

• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

默认情况下，定位的盒子，后来者居上

z-index:整数；取值越大，显示顺序越靠上,z-index的默认值是0

注意：z-index必须配合定位才生效

1.1认识基线（了解)

基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)

 

1. 1. 垂直对齐方式

属性名: vertical-align

属性值:

1. 1. 光标类型

场景:设置鼠标光标在元素上时显示的样式

属性名: cursor

常见属性值:

1. 1. 边框圆角

场景:让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名: border-radius

常见取值:数字+px、百分比

原理：

 

赋值规则:从左上角开始赋值，然后顺时针赋值，没有赋值的看对角!

1. 1. 边框圆角的常见应用

画一个正圆:

1.盒子必须是正方形

2.设置边框圆角为盒子宽高的一半→border-radius:50%

胶囊按钮:

1.盒子要求是长方形

2.设置→border-radius:盒子高度的一半

4.1溢出部分显示效果

溢出部分:指的是盒子内容部分所超出盒子范围的区域

场景:控制内容溢出部分的显示效果，如:显示、隐藏、滚动条......

属性名: overflow

常见属性值:

 

（拓展）元素整体透明度

场景:让某元素整体（包括内容)一起变透明

属性名: opacity

属性值:0~1之间的数字

. 1:表示完全不透明

. 0:表示完全透明

注意点:

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

1. 1. 精灵图的介绍

场景:项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点:减少服务器发送次数，减轻服务器的压力，提高页面加载速度

 

例如:需要在网页中展示8张小图片

8张小图片分别发送→发送8

次合成一张精灵图发送→发送1次

 

1. 1. 小结

精灵图的优点是什么？

减少服务器发送次数，减轻服务器的压力，提高页面加载速度

1.3精灵图的使用步骤

1. 创建一个盒子,设置盒子的尺寸和小图尺寸相同
2. 将精灵图设置为盒子的背景图片
3. 修改背景图位置

通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y

1. 1. 背景图片大小

作用:设置背景图片的大小，

语法: background-size: 宽度 高度;

取值:

 

 

 

 

1. 1. background连写拓展

完整连写:

background: color image repeat position/size;

注意点:

. background-size和background连写同时设置时，需要注意覆盖问题

解决:

1. 要么单独的样式写连写的下面
2. 要么单独的样式写在连写的里面

1. 1. 盒子阴影

作用:给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名: box-shadow

取值:

 

5.1 过渡

作用:让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

属性名: transition

常见取值:

 

注意点：

1. 过渡需要:默认状态和hover状态样式不同，才能有过渡效果

2. transition属性给需要过渡的元素本身加

3. transition属性设置在不同状态中，效果不同的

①给默认状态设置，鼠标移入移出都有过渡效果

②给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

2.1 DOCTYPE文档说明

<!DOCTYPE html>文档类型声明，告诉浏览器该网页的HTML版本

2.2网页语言

<html lang="en"> 标识网页使用的语言

 

作用:搜索引擎归类＋浏览器翻译

常见语言: zh-CN简体中文/en英文

2.3字符编码(了解)

<meta charset="UTF-8"> 标识网页使用的字符编码

作用:保存和打开的字符编码需要统一设置，否则可能会出现乱码

常见字符编码:

1. UTF-8:万国码，国际化的字符编码，收录了全球语言的文字
2. GB2312: 6000+汉字
3. GBK: 20000+汉字

注意点:开发中统一使用UTF-8字符编码即可

1. 1. SEO简介（重要）

SEO (Search Engine Optimization):搜索引擎优化

作用:让网站在搜索引擎上的排名靠前

提升SEO的常见方法:

1.竞价排名

2．将网页制作成html后缀

3.标签语义化(在合适的地方使用合适的标签)

4...….

1. 1. SEO三大标签

1.title:网页标题标签

2. description:网页描述标签

3. keywords: 网页关键词标签

4.1 ico图标设置

场景:显示在标签页标题左侧的小图标，习惯使用.ico格式的图标

 

常见代码：

 

• 项目结构搭建

目标:能够使用专业方式完成项目结构搭建和基础公共样式

学习路径:

1. 文件和目录准备
2. 基础公共样式
3. index页面骨架

1.1文件和目录准备

1．新建项目文件夹xtx-pc-client,在VScode中打开

.在实际开发中，项目文件夹不建议使用中文

·所有项目相关文件都保存在xtx-pc-client目录中

2复制 favicon.ico 到xtx-pc-client目录

.一般习惯将ico图标放在项目根目录

3.复制images和uploads目录到xtx-pc-client目录中

. images:存放网站固定使用的图片素材，如: logo、样式修饰图片...等

. uploads:存放网站非固定使用的图片素材，如:商品图片、宣传图片...等

4.新建index.html在根目录

5.新建css文件夹保存网站的样式，并新建以下CSS文件:

. base.css:基础公共样式

.common.css:该网站中多个网页相同模块的重复样式，如:头部、底部

. index.css:首页样式

1.3完成后的目录及文件结构