CSS
2020-12-08 11:30:40 2 举报AI智能生成
对HTML中CSS进行了总结
作者其他创作
大纲/内容
内联式
内联式
内嵌式
嵌入式css样式写在之间
外部式
html：
css样式: span{color.red}
rel="stylesheet" type="text/css"是固定写法不可修改
标签一般写在标签之间
选择器
标签选择器
p {color : red}
类选择器
. p { color : red }
div . p { color : red }
需要同时满足两个条件
ID选择器
#one { color : red }
类选择器与ID选择器区别
类选择器可多次使用
可以用类选择器词列表方法为【一个元素】同时设置多个样式。如.one{ ~} .two {~}
ID选择器可且仅可使用一次
子选择器
food>li{~} 即">"用于选择指定标签元素的第一代元素
包含选择器
first span{~} 即加入空格，用于指定标签元素下的后辈元素
通用选择器
*{~} 作用于html下所有标签
分组选择符
h1,h2,h3{~} 用于较多标签共用部分样式
伪类选择符
允许给html不存在的标签（标签的某种状态）设置样式。例： 鼠标滑过超链接变换颜色，a:hover{~}
被点击过的超链接样式。例：点击超链接过后颜色改变，a:visited{~}
在超链接上单击时，即“当前激活”时超链接的样式。例：点击超链接时颜色改变，a:active{~}
样式
字体
font-style
文本的字体样式
font-size
字体的大小
font-family
什么字体
font-weight
文本的粗细
颜色
color
文本的颜色
opacity
颜色的透明度
背景
background-color
背景颜色
background-image
背景图片
background-repeat
背景图片是否重复
background-size
背景图片的大小
background-attachment
背景图片是否随内容滚动
边框
border-color
设置四条边框的颜色
border-width
设置四条边框的宽度
border-style
设置四条边框的样式
border-left
设置左边框的属性，其他边框同样
border-left-color
设置左边框的颜色，其他边框同样
border-left-style
设置左边框的样式，其他边框同样
border-left-width
设置左边框的宽度，其他边框同样
基本属性
尺寸
width
min-width
max-width
min-height
max-height
文本
overflow：hidden
多出后隐藏
text-overflow
文本溢出
text-align：center
文本居中
text-transform
设置对象中的文本的大小写
text-decoration
文本有无装饰
text-indent
首行文本缩进
line-height
对象的行高
letter-spacing
字的间距
vertical-align
对象内容的垂直对齐方式
word-wrap
超过容器边界是否换行
列表
list-style-image
列表项标记的图像
list-style-position
列表项如何根据文本排列
list-style-type
定义列表项符号
表格
border-collapse
设置是否把表格边框合并为单一边框
border-spacing
设置分割单元格边框的距离
caption-side
设置表格标题的位置
empty-cells
设置是否显示表格中的空单元格
CSS3
新增选择器
属性选择器
E[att^="val"]
属性att的值以"val"开头的元素
属性att的值以"val"开头的元素
E[att￥="val"]
属性att的值以"val"结尾的元素
属性att的值以"val"结尾的元素
E[att*="val"]
属性att的值包含"val"字符串的元素
属性att的值包含"val"字符串的元素
结构伪类选择器
：root
选择匹配文档的根元素
E:nth-chlild(n)
选择所有在其父元素中第n个位置的匹配E的
子元素
子元素
E:nth-last-child(n)
选择所有在其父元素中倒数第n个位置的
匹配E的子元素
匹配E的子元素
E:nth-of-type(n)
选择所有在其父元素中同类型第n个位置
的匹配E的子元素
的匹配E的子元素
E:nth-last-of-type(n)
选择所有在其父元素中同类型倒数第n个位置
的匹配E的子元素
的匹配E的子元素
E:last-child
选择位于其父元素中最后一个位置，且匹配E的子元素
E:first-of-type
选择在其父元素中匹配E的第一个同类型子元素
E:last-of-type
选择在其父元素中匹配E的最后一个同类型子元素
E:only-type
选择在其父元素只包含一个子元素，且该子元素匹配E
E:only-of-type
选择在其父元素只包含一个同类型的子元素，且该子元素匹配E
E:empty
选择匹配E的元素，且该元素不包含子元素
UI伪类选择器
E:enabled
选择匹配E的所有可用UI元素
E:disabled
选择匹配E的所有不可用UI元素
E:checked
选择匹配E的所有可用UI元素
E:read-write
选择匹配可读及可写的元素
E:read-only
选择匹配设置“readonly”（只读）属性的元素
E:selection
匹配元素中被用户选中或处于高亮状态的部分
E:out-of-range
用于标签的值在指定区间之外时显示的样式
E:in-range
用于标签的值在指定区间之内时显示的样式
E:optional
用于匹配可选的输入元素
E:required
用于匹配设置了“required”属性的元素
E:valid E:invalid
用于匹配输入值为合法、非法的元素
其他CSS3选择器
E~F
通用兄弟元素选择器。选择匹配F的所有元素，且匹配元素
位于匹配E的元素后面
位于匹配E的元素后面
E:not(s)
否定伪类选择器。选择匹配E的所有元素，且过滤掉匹配s选择
符的任意元素。E:not(s)选择器相当于二次过滤，是和精确选择元素
符的任意元素。E:not(s)选择器相当于二次过滤，是和精确选择元素
E:target
目标伪类选择器类型。选择器匹配E的所有元素，且匹配元素
被相关URL指向。该选择器是动态选择器，只有当存在的URL
指向该匹配的元素时，样式效果才能够起效
被相关URL指向。该选择器是动态选择器，只有当存在的URL
指向该匹配的元素时，样式效果才能够起效
边框
border-radius
这个属性允许你为元素添加圆角边框
border-image
这个属性允许你为元素添加边框背景
source
定义边框的背景图片源。
定义边框的背景图片源。
slice
定义如何裁剪背景图像
定义如何裁剪背景图像
width
定义边框背景图像显示大小（即边框显示大小）
定义边框背景图像显示大小（即边框显示大小）
outset
定义边框背景图像的偏移位置（不支持）
定义边框背景图像的偏移位置（不支持）
repeat
定义重复性，重复（repeated）、拉伸（stretched）、平铺（rounded）
定义重复性，重复（repeated）、拉伸（stretched）、平铺（rounded）
box-shadow
设置一个或多个下拉阴影的框
h-shadow:必需的。水平阴影的位置，允许负值。
v-shadow：必需的。垂直阴影的位置，允许负值。
blur：可选。模糊距离
spread：可选。阴影的大小
color：可选。阴影的颜色
背景
background-origin
用来定义背景图像的定位区域
语法：background-origin：padding-box|border-box|content-box
background-clip
用来定义背景图像的裁剪区域
background-size
用来定义背景图像的大小
文本属性
text-shadow
用于定义文本阴影或模糊效果
text-overflow
用来定义省略文本的处理方式
word-wrap
用来定义文本超过指定容器的边界时是否断开转行
常用颜色
RGBA颜色值
HSL颜色值
HSLA颜色值
使用颜色值translate
2D变形
transform
translate()
XY轴移动
scale()
改变宽度、高度
rotate()
旋转
skew()
倾斜
transform-origin
动画设计
transition
简写属性
transition-property
规定应用过度的CSS属性的名称
transition-duration
定义过度效果花费的时间。默认0
transition-timing-function
规定过渡效果的时间曲线。默认“ease”
transition-delay
规定过渡效果何时开始。默认0
animations动画
animation-name
规定@keyframes动画的名称
animation-duration
规定动画完成一个周期所花费的秒或毫秒。默认0
animation-timing-function
规定动画的速度曲线。默认“ease”
animation-delay
规定动画何时开始。默认0
animation-iteration-count
规定动画被播放的次数。默认1
animation-direction
规定动画是否在下一周期逆向地播放/默认是“normal”
animation-play-state
规定动画是否正在运行或暂停。默认“running”
animation
除animation-play-state属性外所有动画属性的简写
渐变效果
线性渐变
Linear Gradients
Linear Gradients
三个参数。
1、表示渐变方向
2、表示起点颜色
3、表示终点颜色
1、表示渐变方向
2、表示起点颜色
3、表示终点颜色
径向渐变
Radial Gradients
Radial Gradients
盒子模型
盒模型
由content、padding、border、margin组成
border
边框
color
width
style
padding
内边距
用于控制content与border之间的距离
设置padding属性时为顺时针方向
margin
外边距
指元素与元素之间的距离
当设置为负数时，会使得块向反方向移动，甚至覆盖在另外的块上
当块是父子关系时，margin可以设置为负数，使得子块与父块进行分离
浮动与定位
float
left
right
none
clear
left
right
both
position
fixed
绝对定位，相对于浏览器窗口
absolute
绝对定位，相对于static定位外的第一个父元素
relative
相对定位，相对于自身在父块的原先位置进行定位
static
默认值，无定位
z-index
用于调整定位时重叠块的上下位置
当块设置了position属性时，该值便可设置各块之间的重叠高低关系
默认值为0
display
none 隐藏对象
inline 设为内联元素，不可设置宽高
block 设为块级元素
inline-block 设为内联块元素，像行内元素一样，可设置宽高
table-cell 设为表格单元格
flex弹性盒模型
概述
设置display：flex属性可以把块级元素在一排显示
默认为从左往右依次排列，且和父元素左边没有间隙
flex需要添加在父元素上，改变子元素的排列顺序
给子元素设置flex属性，可以设置子元素相对于父元素的占比
flex属性的值只能是正整数，表示占比多少
给子元素设置了flex之后，其宽度属性会失效
justify-content
竖轴上属性
flex-start
默认值，左对齐
flex-end
交叉轴的终点对齐
center
交叉轴的中点对齐
baseline
项目的第一行文字的基线对齐
stretch
默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
横轴上属性
flex-start
交叉轴的起点对齐
flex-end
右对齐
center
居中
space-between
两端对齐，项目之间的间隔都相等
space-around
每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
grid布局
网格容器
属性
display
声明，当元素设置了网格布局，column、float、clear、vertical-align属性无效
grid
生成块级网格
inline-grid
生成行内网格
subgrid
如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小
目前所有浏览器都不兼容
grid-templete
使用以空格分隔的多个值来定义网格的列和行
属性
track-size
可使用css长度、百分比或用分数（fr）
line-name
可选择任何名字
grid-templete-areas
对网格取名时，用空格隔开，一个 . 代表空
grid-template-rows
grid-templete-columns
gap
指网格线的大小
gird-column-gap
列网格线
gird-row-gap
行网格线
items
属性值
start
内容与网格区域的左端对齐
end
内容位于网格区域的右端对齐
center
内容位于网格区域的中间位置
stretch
内容宽度占据整个网格取域空间
align-items
属性值
start
内容与网格区域的左端对齐
end
内容位于网格区域的右端对齐
center
内容位于网格区域的中间位置
stretch
内容宽度占据整个网格取域空间
place-items
属性值
start
内容与网格区域的左端对齐
end
内容位于网格区域的右端对齐
center
内容位于网格区域的中间位置
stretch
内容宽度占据整个网格取域空间
content
justify-content
设置网格容器内的网格沿着行轴对齐网格的对齐方式
属性值
start
内容与网格区域的左端对齐
end
内容位于网格区域的右端对齐
center
内容位于网格区域的中间位置
stretch
内容宽度占据整个网格取域空间
space-around
在grid item之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
space-between
在grid item之间设置均等宽度空白间隙，其外边缘无间隙
space-evenly
在每个grid item之间设置均等宽度的空白间隙，包括外边缘
align-content
设置网格容器内的网格沿着竖轴对齐网格的对齐方式
属性值
start
内容与网格区域的左端对齐
end
内容位于网格区域的右端对齐
center
内容位于网格区域的中间位置
stretch
内容宽度占据整个网格取域空间
space-around
在grid item之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
space-between
在grid item之间设置均等宽度空白间隙，其外边缘无间隙
space-evenly
在每个grid item之间设置均等宽度的空白间隙，包括外边缘
grid-auto
grid-auto-columns/rows
指定自动生成的网格轨道（又名隐式网格轨道）的大小
隐式网格轨道在显式的定位超出指定网格范围的行或列时被创建
属性值
row
告诉自动布局算法依次填充每行，根据需要添加新行
column
告诉自动布局算法依次填充每列，根据需要添加新列
dense
告诉自动布局算法，如果后面出现较小的grid item，则尝试在网格中填充空洞
grid
所有属性的简写
none
将所有子属性设置为初始值
网格项
0 条评论
下一页
