CSS
元素背景样式background
背景颜色
background-color: rgba(0, 0, 255,0.5);
/*元素背景颜色
,css
的所有颜色的值写法一致*/
支持颜色名称
red,blue,white,black
rgb
模式
rgb(0, 0, 255)
颜色代码
#ffffff
rgba(0, 0, 255,0)
，在
rgb
的基础上多一个透明度
的变化，
a
的变化是
0-1
之间，
0
是全透明，1
是不
透明。可以实现颜色透明度的变化。
transparent
背景透明，默认值。
背景图片: 引入一张图片平铺满元素。
background-image: url(./imgs/shop_15.jpg);
函数: css里面带有()的，不同的函数有不同的功能。
url()引入一个图片地址，可以是本地路径或者网络路径(网址不存在了，图片就不能显示),图片路径不加""
背景重复
background-repeat: repeat-y;
repeat 垂直水平平铺
(
默认
)
no-repeat 不平铺，只显示
1
张背景图
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
背景图片定位，改变图片的位置
background-position: 30% -100px;
background-position: x y; x
是水平方向的距离，y
是垂直方向的距离，参考点
(
圆点
)
是左上角，如果x
，
y
的值一样，可以简写为
1
个。
1.
可以给位置关键词
:
水平位置
(x) center
居中
left
居左
right
居右
垂直方向
(y) top
顶部
center
居中
bottom
底部
2.
具体单位或百分比
,
可以给负数，负数是往圆点
的反方向。
height
可以是具体的单位(
如
px)百分比(80%),
是父元素高度的百分比
(
父元素的高度乘以百分比)
，如果父元素没有高度，则高度无效。
行内元素的width
和
height
无效
(
行内元素的尺寸随内容)。
width
元素的宽度，默认块级元素随父元素的宽度，修改宽度后，不会影响块级元素的特性。
百分比(80%),
是父元素宽度的百分比
(
父元素的宽度度乘以百分比) 。
overflow
元素内容超出的显示方案，默认是溢出显示
auto 超出的方向出现滚动条，可以滚动显示完 数据(x
方向超出则
x
方向显示滚动条，
y
方向超 出，则y
方向显示滚动条
)
：
overflow: auto;
hidden
溢出隐藏，超出的元素，隐藏显示。 overflow: hidden;
文本样式
首行缩进，浏览器默认字体是16px
大小，缩进两 个中文字符的宽度是32px,
可以给负数，往左边移动。text-indent:2em;
可继承。
字体大小font-size:
可以给具体单位
,
可继承。
font-size的尺寸一般是字符的高度。
px
固定的物理像素点
em
相对于父元素
font-size
的尺寸
(1em=
父元素
字体尺寸
)
百分比 ，相对于父元素
font-size
的百分比尺
寸。
一般浏览器最小字体是
12px,
小于
12px
则会显示
12px
的大小。
字体颜色color
：字体颜色，和背景颜色写法一致,
可以用
rgb(),rgba()
可以实现字体颜色透明
,
颜色代码，颜色名称等
文本对齐方式 ：
text-align: left;
left
左对齐，
center
居中对齐，
right
居右，可继
承
单词间距，默认是以空格区分单词。
word-spacing: 10px;
字间距，字母之间的距离， 可继承，
letter-spacing: 10px;
字母转换：
text-transform: capitalize;
none 默认，不做任何处理
u
ppercase
全转大写
l
owercase
全转小写
capitalize
首字母转大写
文本装饰,
可以给文本添加线条
text-decoration: line-through;
none 没有任何装饰
underline 下划线
,
在底部添加线条
overline 上划线，在顶部添加线条
line-through 删除线，在中部添加线条
文本空格和换行处理
white-space: pre-line;
normal默认，空格会被浏览器忽略，长单词超出元素不会换行
nowrap 文本不会换行，在同一行显示
pre-wrap 保留输入的空格，会按单词换行
pre 类似于
pre
标签，保留输入的格式
pre-line 合并空白符号，保留换行符号
inherit 继承父元素的
white-space
direction 文本方向
direction: rtl;
unicode-bidi: bidi-override;
ltr 默认 从左往右
,
需要配合
unicode-bidi:bidi-override 改变字符方向。
rtl 从右往左
inherit 继承父元素
文本行间距:
两行文本直接的距离。
line-height: 30px;
顶线到底线的距离是font-size
的大小，
line-height 减去
font-size
就是行间距的距离，然后文本的上边和下边的距离是
行间距
/2
。
line-height = font-size + 半行间距
*2
当line-height =
元素的高度，单行文本可以垂直居中。
调整文本垂直对齐方式，主要是调整该元素和其他文本元素的对齐线 vertical-align
baselin 基线对齐
(
默认
)
top 顶线对齐
middle 中线对齐
bottom 底线对齐
text-top 元素与父元素文本顶部对齐
text-bottom 元素与父元素的底部对齐
% 百分百，可以给负数。
sub 下标元素，类似
sub
标签
super 上标元素，类似
sup
标签
字体加粗
:font-weight: 400;
数组是100 - 900
normal 是
400
粗度
bold 类似于
700
粗度
bolder 类似于900
粗度
字体系列，可以用逗号分割，指定多种字体，会 按顺序查找字体，找到位置，没有找到则显示默 认字体。格式 font-family:
余繁新语
,
微软雅黑
,' Cambria Math';
字体没有特殊符号和空格，不加双引号或单引号。
双引号""和单引号
''
是一样的，表示字符。双引号里面只能用单引号，单引号里面只能用双引 号。
字体样式，
mormal
普通样式
(
默认
),italic
文本倾斜显示。 如: font-style: italic;
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
