CSS
2023-06-21 10:14:52 0 举报AI智能生成
CSS详细的复习总结，尊重知识，付费使用，感谢您的支持
作者其他创作
大纲/内容
<p style=\"color=blue\">Like</p>
样式少
行内样式表
<style></style>
head 内部
样式多
内部样式表
link
真正实现了结构和样式相分离
样式最多
外部样式表
位置分类
选择器（属性：值；属性：值；）
CSS样式规则
单位：px
字体大小：font-size
字体格式：font-family
normal 正常的==400
bold 加粗的==700
字体加粗：font-weight
normal 正常
italic 倾斜的
字体样式倾斜：font-style
有顺序关系，不能调动，要求必须有font-size和font-family
选择器（font:font-style font-weight font-size/line-height font-family）
综合连写
字体样式
#f00
#000
#fff
十六进制 color
行与行之间的距离
单位一般用px
line-height
文本水平居中对齐
text-align
段落首行缩进2个字，text-indent:2em; 1em 就是一个字的距离
text-indent
文本样式
font-style:normal 取消倾斜
font-style:italic 添加倾斜
em和i倾斜
font-weight:normal 400 取消加粗
font-weight:bold 700 添加加粗
strong和b
text-decoration:none 删除下划线
text-decoration:underline 添加下划线
u ins
text-decoration:none 删除删除线
text-decoration:line-through 添加删除线
s和del
文本格式化标签样式
可以选择一个或多个标签
div span table input
标签选择器
可以选择一个或者多个标签
1.不能纯数字
2.不能数字开头
3.尽量英文字母+数字
4. .div .p .table 是错误的 不能以标签命名
5.自己起的名字
类名命名 .nav
多类名选择器
类选择器
#定义id调用
ID选择器
class 多次重复使用（最常用）
id只能使用一次
使用次数上
id选择器和class选择器 区别
*所有标签都会选择，实际开发的时候使用较少
通配符选择器
基本选择器
用空格隔开 选取子孙后代的
后代选择器
用>隔开 选取亲儿子
子代选择器
标签连写 div.one
div#two
交集选择器
用逗号隔开，集体声明，相同样式的时候
并集选择器
复合选择器
:
a: link
a: visited
a: hover
a: active
a{} a:hover{}
链接伪类选择器
CSS选择器
没有宽度和高度
一行可以放多个
inline
行内元素
有高度和宽度
一行只能放一个
霸道
block
块级元素
有宽度和高度
inline-block
行内块元素
display
转换
显示模式
如果权重相同的情况下
就近原则，离着这个标签最近的那个样式
层叠性
如果子级没有指定样式，则会继承父级的样式
不是所有样式都会继承 一般继承 文字类 text-font-line
继承性
*和继承 0000
标签选择器 0001
类和伪类 0010
id选择器 0100
行内样式表 1000
！ important ∞
优先级 选择器不同，优先执行的顺序不一样
CSS三大特性
连写：border:1px solid red;
boder-top:1px solid red;
boder-left:1px solid red;
border 边框
padding:10px; 上下左右
padding:10px 20px; 上下10 左右20
padding：10px 20px 30px; 上10 左右20 下30
padding:10px 20px 30px 40px; 顺时针
实际盒子大小 = width + padding + border
padding 内边距
margin 外边距
内容
盒子模型
背景颜色
background-image:url();
背景图片
我们后面会学精灵图
background-position
方位名词top bottom left right
background-position:top center;背景图片 水平居中 垂直上
background-position:20px 100px；背景图片 水平20 垂直100
背景位置
背景铺平
背景滚动
背景
margin:0 auto; 核心 让盒子的左右改为auto
必须设置宽度
块级盒子居中对齐
*{margin:0; padding:0;}
清除内外边距
上下垂直合并 避免开
border
padding
overflow:hidden
嵌套的合并 塌陷
合并问题（最大的为准）
外边距
就是为了让多个块级元素一行显示（布局用）
正常显示的方式 块级一行显示一个 行内元素一行显示
标准流
1、浮动再父盒子里面，是不是超过内边距和边框的范围
2、如果子盒子有一个浮动了，其余的子盒子都应该浮动
3、默认的隐式转换 行内块元素
浮动是脱标的
浮动
border-radius:50% 圆环
border-radius
圆角边框
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影
box-shadow
盒子阴影
CSS笔记
0 条评论
回复 删除
下一页
