CSS常见样式(一)——颜色，字体，文本，display样式，继

2021-01-15 本文已影响0人 HGS

一、颜色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要转换为/,如下图：

Unicode码字体获得方式

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文字向两侧对齐，字间距有可能会发生变化，对最后一行无效：

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文字遇边界不折行，只是展示一行。

text-overflow 溢出和隐藏

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

https://www.jianshu.com/p/a76ff389245f

CSS常见样式(一)——颜色，字体，文本，display样式，继

一、颜色color

二、字体font

1. 四个常见属性：

1.1 `font-size`字体大小，有以下单位：

1.2 `font-family`

注意：

1.2.1 `@font-face`：设置自定义字体

1.3 `font-style`字体风格: 设置文字是否以斜体显示

1.4 `font-weight`字体加粗: 设置字体粗细

1.5 `line-height`字体高度:

三、文本text

1. `text`是指文本在盒模型中格式表现形式，常用的有以下：

1.1 `text-align`对齐方式，应用在块级容器上，对行内内容生效。

1.2 `text-indent`首行缩进，常用单位：px，em，rem，百分比。

1.3 `text-decoration`设置字体划线样式

1.4 `text-transform`文本转换器：用于改变字母大小。

1.5 `text-shadow`文本阴影

1.6 `text-overflow` 溢出和隐藏，应用在块级元素上，设置内部文本溢出后的展示样式。

1.6.1 `overflow` 内容过多设置

注意：

1.7，1.8 `letter-spacing`字符间距，`word-spacing`单词间距

四、display样式（改变元素的级）

五、隐藏和透明

六、css样式继承

猜你喜欢

热点阅读

CSS常见样式(一)——颜色，字体，文本，display样式，继

一、颜色color

二、字体font

1. 四个常见属性：

1.1 font-size字体大小，有以下单位：

1.2 font-family

注意：

1.2.1 @font-face：设置自定义字体

1.3 font-style字体风格: 设置文字是否以斜体显示

1.4 font-weight字体加粗: 设置字体粗细

1.5 line-height字体高度:

三、文本text

1. text是指文本在盒模型中格式表现形式，常用的有以下：

1.1 text-align对齐方式，应用在块级容器上，对行内内容生效。

1.2 text-indent首行缩进，常用单位：px，em，rem，百分比。

1.3 text-decoration设置字体划线样式

1.4 text-transform文本转换器 ：用于改变字母大小。

1.5 text-shadow文本阴影

1.6 text-overflow 溢出和隐藏，应用在块级元素上，设置内部文本溢出后的展示样式。

1.6.1 overflow 内容过多设置

注意：

1.7，1.8 letter-spacing字符间距，word-spacing单词间距

四、display样式（改变元素的级）

五、隐藏和透明

六、css样式继承

猜你喜欢

热点阅读

1.1 `font-size`字体大小，有以下单位：

1.2 `font-family`

1.2.1 `@font-face`：设置自定义字体

1.3 `font-style`字体风格: 设置文字是否以斜体显示

1.4 `font-weight`字体加粗: 设置字体粗细

1.5 `line-height`字体高度:

1. `text`是指文本在盒模型中格式表现形式，常用的有以下：

1.1 `text-align`对齐方式，应用在块级容器上，对行内内容生效。

1.2 `text-indent`首行缩进，常用单位：px，em，rem，百分比。

1.3 `text-decoration`设置字体划线样式

1.4 `text-transform`文本转换器：用于改变字母大小。

1.5 `text-shadow`文本阴影

1.6 `text-overflow` 溢出和隐藏，应用在块级元素上，设置内部文本溢出后的展示样式。

1.6.1 `overflow` 内容过多设置

1.7，1.8 `letter-spacing`字符间距，`word-spacing`单词间距