一、颜色color
- 单词: red, blue, yellow...
- 十六进制:#ff00ff、#f0f...
- rgb形式:rgb(0, 0, 0) , r(红), g(绿), b(蓝)可以是数字,也可以是百分比,255相当于100%,数字1相当于100%。
- rgba形式:rgba(0,0,0,0.6),里面的a代表的是透明度,范围为0~1,数值越大越不透明。
- hsl形式:hsl(0, 100%, 50%),主要构成:色相(0和360是红,120是绿,240是蓝) 饱和度(0%灰) 明度(0%是黑)
- hsla形式:同上hsl,后面的a是透明度。
- 关键词:透明色 transparent,currentColor主要用于边框的颜色,可以和设置的字体颜色一致,字体颜色改变,他也会随之改变。没有设置color就会继承父亲的样式。
二、字体font
1. 四个常见属性:
1.1 font-size
(大小)
1.2 font-family
(字体类型)
1.3 font-style
(字体风格)
1.4 font-weight
(字体粗细)
1.5 line-height
(行高)
1.1 font-size
字体大小,有以下单位:
-
px
(像素):浏览器默认的字体大小为16px,Chrome最小字体限制(11px or 12px); -
每层列表字体逐渐减小em
(相对长度单位):2em相对于相对于父亲字体大小的倍数(如果是非font-size属性对应的值,则是相对于当前元素的font-size);主要应用于倍增或者递减。
例:设置每层列表
PS:除了font-size本身才是相对于父亲的大小,其他的属性的em都是相对于自己的font-size大小
-
rem
: 2rem,是相对于根元素(html或者:root)字体的倍数,不是相对于body; -
百分比:80%,同em相对于父亲字体的大小倍数;
-
vw, vh
①长度单位:
1vw=视窗宽度的1%,100vw表示水平满屏;
1vh=视窗高度的1%,100vh表示垂直满屏;
②兼容性:
可以打开这个网站砍砍:https://caniuse.com/#search=vw
③应用:主要实现移动端适配(等比放大或缩小)
1.2 font-family
①、指定一个优先级从高到低的可选字体列表,先找第一个字体,找不到再找第二个,依次往后。。。
②、字体形状样式,在CSS中,font-family
有三种写法(微软雅黑举例):
- 英文写法:
font-family: "Microsoft YaHei"
- 中文写法:
font-family: "微软雅黑"
- Unicode写法:
font-family: /5FAE/8F6F/96C5/9ED1
注意:
- 英文写法中如果有空格以及采用中文写法的话要加引号;
- 尽量采用Unicode码字体,因为如果如果直接写中文情况下编码方式和解码方式不一致有可能不匹配,导致乱码;
- 字体的Unicode码可以在开发者工具的console里用escape(字体中文)获得,但是要注意的是,里面的
%u
要转换为/
,如下图:
1.2.1 @font-face
:设置自定义字体
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body {
font-family: "Bitstream Vera Serif Bold", serif;
}
1.3 font-style
字体风格: 设置文字是否以斜体显示
-
normal
正常 -
italic
斜体 -
oblique
模拟斜体
1.4 font-weight
字体加粗: 设置字体粗细
-
normal
正常 -
bold
粗体 -
lighter
比父元素字体细一级 -
bolder
比父元素字体粗一级 -
100-900
用于微调字体粗细
注意:设置字体的粗细还取决于字体库是否存在该粗细尺寸的字体图形描述。
1.5 line-height
字体高度:
- 常用单位是px, em, rem, 百分比;
- 浏览器默认的字体16px, 最小的字体是12px。
三、文本text
1. text
是指文本在盒模型中格式表现形式,常用的有以下:
1.1 text-align
(对齐方式)
1.2 text-indent
(缩进)
1.3 text-decoration
(设置字体划线样式)
1.4 text-transform
(文本转换器)
1.5 text-shadow
(文本阴影)
1.6 text-overflow
(溢出和隐藏)
1.7 letter-spacing
(字符间距)
1.8 word-spacing
(单词间距)
1.1 text-align
对齐方式,应用在块级容器上,对行内内容生效。
-
left
左对齐 -
right
右对齐 -
左对齐,右对齐,居中center
居中
-
justify
文字向两侧对齐,字间距有可能会发生变化,对最后一行无效:
1.2 text-indent
首行缩进,常用单位:px,em,rem,百分比。
首行 缩进2字
1.3 text-decoration
设置字体划线样式
-
none
取消 下划线 -
underlie
设置下划线 -
overline
上划线 -
line-though
中划线
text-decoration字体划线
1.4 text-transform
文本转换器 :用于改变字母大小。
-
none
取消转换效果 -
uppercase
转为大写 -
lowercase
转为小写 -
capotalize
转为首字母大写
text-transform文本转换器
1.5 text-shadow
文本阴影
- 主要写法:
text-shadow
:水平偏移 垂直偏移 模糊半径 颜色;
text-shadow文本阴影
1.6 text-overflow
溢出和隐藏,应用在块级元素上,设置内部文本溢出后的展示样式。
- 不设置,默认溢出隐藏切断
-
text-overflow: clip;
溢出隐藏切断 -
text-overflow: ellipsis;
溢出最后展示...
1.6.1 overflow
内容过多设置
-
overflow: visible;
默认值,不修剪,会溢出框外。 -
overflow: hidden;
内容被修剪,不出现滚动条。 -
overflow: scroll;
隐藏并出现滚动条。 -
overflow: anto;
不超出无滚动条,超出出现滚动条。
注意:
-
overflow
可以单独设置水平和垂直方向,如:overflow-x: scroll; overflow-y: hidden;
- 使用
overflow
,块级容器必须有指定高度,height
或max-height
或将white-space
设置为nowrap
文字遇边界不折行,只是展示一行。
1.7,1.8 letter-spacing
字符间距,word-spacing
单词间距
单词间距与字符间距
四、display样式(改变元素的级)
-
display
样式有三个常用的值:inline
(行内),block
(块级),inline-block
(行内块级) -
inline
:设置元素为行内元素 -
block
:设置元素为块级元素 -
inline-block
:设置元素为行内块级元素 -
display
其他值还有:table
,table-cell
,table-cell
,table-row
,list-item
,none
,inherit
五、隐藏和透明
- 透明:元素不能被看见,但是位置依然被占据。
-
opacity: 0~1;
: 透明度,作用于整体,用的比较少。 -
visibility:hidden;
: 元素可见度,表示该元素透明,依然占据位置。 -
background-color:rgba(0,0,0,0~1);
:表示背景色的透明度,a的值为0时完全透明,数值越大越不透明。
- 隐藏
display:none;
表示该元素消失,不占据位置也看不见。
六、css样式继承
- 什么是css样式继承
继承就是子元素继承了父元素的CSS样式的属性 - 常用的继承样式
- 字体:family, size, weight, line-height
- 文本:letter-spacing, word-spacing, text-align, text-indent
- 列表:list-style-type
- 颜色:color, ps: a 标签不能继承父元素的字体颜色,原因是 a标签有自己默认的字体颜色,会覆盖继承父元素字体颜色。
- 不能继承的属性
- display
- float
- padding和 margin
- 背景相关,比如颜色和图片
参考:https://static.xiedaimala.com/xdml/file/f40ceb64-df08-4420-9226-7f76dbff15d5/2019-11-7-15-59-8.pdf
网友评论