图片格式
标签顺序
选择器与CSS属性
CSS的引入
用相对路径来找到 .css文件
选择器
标签选择器
标签名加{}即可对html中的标签进行更改，可以统一进行更改，但是缺乏差异化
类选择器
在style标签里面定义一个类 .classname，然后接上选择器，写上内容，在body内部的目标标签的属性栏中添加class属性，属性值是你定义的类名
id选择器
通配符选择器
在开发初期消除标签的默认效果，可以用这个
选择器的操作-画盒子
background系列的属性表示对背景整体的操作
比如我的学习网站插入背景图
.bjimg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 1000px;
z-index: -10;
zoom: 1;
background-color: #fff;
background-image: url(../image/timg.jfif) ;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
字体修饰
文字阴影
text-shadow
font-size
- 单位是px（像素）
font-weight
- 设置粗细
- 属性值是数字
- 400-normal 700-加粗
font-style
- 字体倾斜
- 属性值是
line-height
- 行间距，单位是像素，30px左右就OK
- 如果不加px，行间距就按照字体大小的n倍处理（n是你输入的数字）
字体族
复合属性
对齐与缩进
缩进：text-indent
对齐：text-align
这个玩意儿可以用在图片，视频居中上：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
text-align: right1;
}
</style>
</head>
<body>
<div>
<img src="../img/头像.jpg" alt="">
</div>
</body>
</html>
文本修饰线
文字颜色
rgb-常用
rgba-a是不透明度
#+十六进制 — 是一种更加精准的调色方法，是前端设计师给的具体数字
调试工具
浏览器中，右键，检查即可
CSS中标签属性前面如果由黄色叹号，就是写错了
复合选择器
后代选择器
father son {
}
会选中所有子标签，儿子、孙子、重孙子中的同名标签都会被选中
子代选择器
.class>h1
如果只想给儿子辈的标签添加属性，就在父子之间用 > 隔开
并集选择器
用逗号隔开，然后写属性即可
交集选择器
伪类选择器
- 伪类：选择器中添加的关键字，用于表示选择器所指元素的特殊状态
- CSS 伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。-
拓展
2.
注意事项
# CSS特性（三个）
继承性
- 当子级有自己的属性时，不会继承这个属性
如：< a >默认颜色是蓝色，你对父级进行颜色定义时，不会改变他的颜色
层叠性
优先级
权重计算
*=0
标签=1
类=10
id=100
行内=1000
!important最大
先看有没有!important，再看有无继承，最后比较优先级个数
Emmet写法
这是一种简写的方法
符号有*+>{}等
Emmet在CSS中的用法是：输入首字母（或者缩写），然后直接写属性值；多个属性同时书写只需要+即可
背景属性
背景的平铺方式
平铺就是复制粘贴
插播盒子的制作方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 9000px;
height: 9000px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
背景图的位置（相对于盒子）
背景缩放
背景图的固定
制作网页固定背景图
复合属性
显示模式
内容介绍
转换显示模式
能通过display把标签的显示模式改变
以下是banner（横幅练习的总结）
- 将网页划分为一个个块，这些块，作为父级，以此按照要求创建子级，对子级写CSS时用后代选择器，
- 利用好父子级的继承性，能省去一些麻烦
- 显示模式中inline-block才能使盒子与文字在同一行左右对齐，如果是block则文字只能在盒子内左右对齐
- 写CSS时，有一定的顺序会加强可读性
结构伪类选择器
解析
- 伪类，意思是所选标签特定状态下的样式，在该状态下就像你给它加了个类一样，比如 :hover
- 结构，指的是结构伪类（给特定结构下的HTML标签添加属性）；hover是用户行为伪类（给执行特定用户行为时的HTML标签添加属性）
花活扩展
省力写法，提高效率
盒子模型
组成部分
具体书写方式：
<style>
div {
background: #555;
width: 200px;
height: 200px;
display: inline-block;
padding: 10px;
margin: 20px;
border: 5px #eee;
}
</style>
具体细讲
border（边框线）
padding (内边距）
按上左下右顺时针方向对号入座，如果没有入座，就按照对面的那个边的属性来
内减模式
外边距（margin）
版心居中
在block的显示模式下，CSSstyle中margin的值是0 auto即可
清除默认样式style
默认情况下body、li、p、h1等标签都有自己的margin、padding属性，但我们不需要，所有要去除：用通配符选择器来去除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<ul>
<li>
今天开始我要自己上厕所
</li>
</ul>
<p>我要玩原神，把手机还给我</p>
<h1>原神官网</h1>
</body>
</html>
去除代码
<style>
* {
margin: 0;
padding: 0;
}
这一步是为了去除li标签前面的圆点
li {
list-style: none;
}
</style>
内容溢出
溢出的效果
外边距问题
1.合并
2.塌陷
记住，能用即可，这个东西感觉像是html自己的问题
行内元素垂直间距
盒子进阶
圆角
盒子的四个角的弧度可以分开设置
顺序：左右右左（无输入则取对角）
阴影
有顺序要求 **调一调**就知道了
实践案例
产品卡片
-
数据在设计稿中就测量好了，所以自己做网页的时候要注意，先有设计稿，再开发
-
有很多细节要注意：
- 文字：大小、字体、粗细、显示模式、行高
- 图片：位置、alt、title、跳转
- 初始化：margin、padding、box-sizing
- 盒子塌陷问题怎么解决？怎么把盒子居中？
- 代码要有顺序
- 盒子模型
- 文字图片
- 圆角阴影
新闻列表
代码差不多就这样，我没老师的图。
实战才是检验掌握的标准
了解知识不够，还要会用，会变着花样的用
- margin可以用来移动块
- border的用法
- li前面那个点点的去除
- 类style 的创建习惯（要不然容易创的太多，啥也忘了）
- 父子级的style使用
- 做一个网页哪有那么容易一个模块就做一下午，害（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding:0;
}
li {
list-style: none;
}
.new {
width: 300px;
height: 250px;
background-color: #666;
margin: 150px auto;
}
.hd {
width: 300px;
height: 40px;
background-color: #999;
border:1px solid #666;
}
.hd a {
display: block;
width: 50px;
height: 40px;
margin: -1px 0 0 -1px;
background-color: #eee;
border-right:1px solid #666;
text-align: center;
text-decoration: none;
color: #666;
line-height: 40px;
border-top:3px solid #080;
}
.bd {
width: 300px;
height: 210px;
background-color: #eee;
padding: 5px;
}
.bd a {
font-size: 15px;
color: #999;
text-decoration: none;
line-height: 25px;
}
.bd a:hover {
color: black;
}
.bd li {
padding-left: 15px;
}
</style>
</head>
<body>
<div class="new">
<!-- 标题 -->
<div class="hd">
<a href="#">新闻</a>
</div>
<!-- 内容 -->
<div class="bd">
<ul>
<li><img src="" alt="" title=""><a href="#">大模型入局</a></li>
<li><img src="" alt="" title=""><a href="#">大模型入局</a></li>
<li><img src="" alt="" title=""><a href="#">大模型入局</a></li>
<li><img src="" alt="" title=""><a href="#">大模型入局</a></li>
<li><img src="" alt="" title=""><a href="#">大模型入局</a></li>
<li><img src="" alt="" title=""><a href="#">大模型入局</a></li>
<li><img src="" alt="" title=""><a href="#">大模型入局</a></li>
<li><img src="" alt="" title=""><a href="#">大模型入局</a></li>
</ul>
</div>
</div>
</body>
</html>
浮动float
特性
用法
在块级标签的style中加入float属性，可以将其脱离标准流的控制，实现块的同行呈现
一般，要在块标签上加float，那就都加
实例小米官方商城
原品
- 版心居中
- float浮动
- 父级宽度不够，子级会跳到下一行，排版出现错误
浮动
方法1、2、3都是在原父级末尾添加一个新块级标签，来撑起来父级的宽度
（浮动在标准流中去除了块级标签，那我再加上不就得了）
flex弹性容器
主轴与侧轴的对齐
主轴默认是x轴
（前提是父级为弹性容器，子级是弹性盒子）
主轴
侧轴
主轴与侧轴的切换
弹性伸缩比
属性名：flex
表示某弹性容器中某弹性盒子在主轴方向的剩余空间中的占比
ps（弹性盒子如果没有设置宽高，则其主轴大小由内容撑开，侧轴大小拉伸满[拉满了]）
实现逻辑：检测主轴，检测含有flex属性的盒子，将主轴方向上不含flex的盒子占用的空间减去而后瓜分，按照属性值按权值分给含有flex的盒子
结果是这样
弹性换行
属性：flex-wrap
属性值：默认是nowrap，不换行，同一行盒子过多会挤压
wrap，换行
对齐
justify-content主轴方向子元素对齐
align-items竖轴方向位置
align-content多行内容的行对齐，只有一行就没用了
死记不如多用
实践案例
抖音解决方案
成品
- 外边框，外部大div，margin居中
- 内部用一个div包裹四个li，div通过margin居中
- 四个li分散到角落用flex系列属性
- li内部用两个div分别存放img与文本，文本与img同一行的处理用flex
- 文字处理：大小，粗细，颜色，对齐
伪类和伪元素
实战
补充知识点verti-align
补充：background属性
background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动
例如：
div {
background: url() right center #fff;
补充：
文本水平居中用text-align
竖直居中用line-height = height
定位
相对定位
position: relative;
相对的是元素的原位置，top、left、right、bottom。
而且，移走元素之后，原位置不允许其他元素占用（没脱标）.
绝对定位
position:absolute;
特点
- 脱标，不占位（可重叠）
- 参照物:先找最近的已经定位的祖先元素;如果所有祖先元素都没有定位参照浏览器可视区改位置
- 显示模式特点改变:宽高生效(具备了行内块的特点，要变成行内块的形状了~)
绝对定位与相对定位的配合
想要做出一个块压在另一个块上的操作，需要“子绝，父相”的定位方式
上图中：大图为父级，小图为子级
为什么子绝父相？
父级相对定位才能保证原有位置不被占，保护网页布局
子级绝对定位，是相对父级的定位，可以自由在父级内移动
### 使用
固定定位
特点
- 脱标，不会像相对定位一样占着茅坑不拉⑩
- 对他进行边偏移的时候不会参照物时浏览器可视区
- 转化成行内块了
定位的特性（拓展）
定位层叠次序
z表示的是z轴
z-index越大，越靠上
CSS精灵（sprite）
总思想就是：网站中有太多小图，一个一个请求太浪费速度，所以把他们汇总成一张大图，然后通过一个窗口，移动大图位置得到你想要的小图
注意啊，bgp里面常用的时负的坐标，因为浏览器默认时把左上顶点当作原点的
字体图标
将小图标字体化，节省空间与时间，很灵活的一种用法
字体图标的原理与使用
作者制作这个东西的时候，自带了iconfont.css文件，里面是对字体图标的样式定义。
所以，你在用它的时候，需要注意link这个css、并且在具体的使用标签处class一下iconfont以及该图标对应的类名（在作者给的html文件中）
垂直对齐方式
vertical-align:middle\baseline\top\bottom;
过度属性
（参考pr里面的关键帧）
作用:可以为一个元素在不同状态之间切换的时候添加过渡效果
整体透明度
opacity
光标类型
display与visibility与overflow
display
visibility
overflow
filter
模糊效果，与js有关
过渡属性
具体用法
- transition写在hover和原选择器里都可以
- 若想对多个属性进行过渡，则用 ， 分隔开
- 鼠标放上去，过渡了，但是移开的时候，瞬间变回原样而不是渐变。
怎么解决：把transition写在非hover的地方即可
补充
display:flex;放在目标标签的父级
input
去除input的蓝色边框
text-area
文本域就是text-area
text-align
一个盒子添加了text-align：center；，那么该盒子内的行内、行内块元素都会居中对齐
css小三角制作
用border
- border本质上是三角型，普通上下左右三角只需要把其他方向的三角设为transparent即可
- 这种
div { width: 0px;height: 0px; border-bottom: 0px ; border-right: 50px solid #e1e12e ; border-left:50px solid transparent ; border-top: 100px solid transparent; }
属性选择器
div[class]
div[class="nav"]
div[class^="n"]
div[class$="v"]
div[class*="a"
结构伪类选择器
nth-of-child nth-of-type
实现清除浮动
伪元素选择器法
浮动本意是用来使文字和图片交汇使用的，clear标签则是用来精细的调控浮动的效果
项目开发
- 标准规范
- 文件夹安排
- 模块化分配代码
- 类名的命名
- TDK与SEO，是网站更容易被搜索到
favicon
网页的标识符
如：
制作：
等等网页或者工具来制作
TDK
T：title 网站名字
D：description 简要说明网站的功能
K：keywords 页面的关键词，引擎的重点关注对象，6-10个左右，越靠前权重越大
SEO指的是，搜索引擎优化
常用命名规则与方式
less
less再css的基础上加入了编程语言的语法和特性，更加便利，功能更多，易于维护
- 加减乘除运算（左右空格隔开）
- 父子级嵌套来写
- 变量的定义：@a:10px;
运算可用于：颜色，像素，大小等等可以用到数字表示的东西
1114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
