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