CSS学习笔记（三）：文本、字体、背景、表格、列表

2022/4/7 6:25:03

编程Tag： 属性 表格 css 字体 文本 Font 默认 设定

本文主要是介绍CSS学习笔记（三）：文本、字体、背景、表格、列表，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

镇楼图

Pixiv:torino

十、文本

color

作用：设定文字颜色

属性值 说明
颜色值 略
inherit 略

direction

作用：设定文本书写方向

属性值 说明
ltr 默认，从左到右
rtl 从右到左
inherit 略

letter-spacing

作用：设定每个字符之间的间距

注：也可以为负值，即字符靠近，但如果过大会挤在一起

P {
    letter-spacing: -10px;
}
属性值 说明
normal 默认，即字符之间紧挨着无留白或靠近
inherit 略
长度单位 略

text-align

作用：设定文本水平对齐方式

属性值 说明
left 默认，水平左对齐
center 水平居中对齐
right 水平右对齐
justify 两端对齐
inherit 默认

vertical-align

作用：设定文本垂直对齐方式

属性值 说明
baseline 默认，位于父元素基准线上
sub 垂直对齐文本下标
super 垂直对齐文本上标
top 元素顶端与行最高元素顶端对齐
text-top 元素顶端与父元素字体顶端对齐
middle 位于父元素中部
bottom 元素底端与行最高元素底端对齐
text-bottom 元素底端与父元素字体底端对齐
长度单位 略，相当于用line-height
inherit 略

【【】】

line-height

作用：设定字符的行高，可以通过此属性设置文本在垂直方向上居中、上对齐、下对齐

注：可以设定像素数与父元素高度一致相当于居中效果

备注：line-height会被继承

属性值 说明
normal 默认
长度单位 略
备注：%表示的是于字符
数字，无单位 行高为数字乘上字体尺寸
inherit 略

text-decoration

作用：设定文本样式

属性值 说明
none 默认，无样式
underline 上划线
overline 下划线
line-through 穿过文本中间的线(删除线)
blink 闪烁文本
inherit 略

text-indent

作用：设定文本首行缩进

属性值 说明
长度单位 略
备注一般可以设置2em表示首行空两格
inherit 略

text-transform

作用：控制文本大小写

注：中文无大小写故无用，可以控制英文、希腊、罗马等有大小写区分的字符

属性值 说明
none 默认，可包含大小写
capitalize 每个单词首字母必须大写
uppercase 仅能用大写字母
lowercase 仅能用小写字母
inherit 略

white-space

作用：定义空白符在元素内的处理

属性值 说明
normal 默认，忽略，这也是HTML的做法
不会受到盒子宽度影响
pre 保留，与pre标签一致，不会受到盒子宽度影响
nowrap 不会换行直到出现br标签，不会受到盒子宽度影响
pre-wrap 与pre类似，但会受到盒子宽度影响
pre-line 只有换行符生效，会受到盒子宽度影响
inherit 略

【【】】

【【】】

word-spacing

作用：定义空白符的留白，也就是空格的留白是多少

属性值 说明
normal 默认
长度单位 略
inherit 略

word-break

作用：选择在换行时的方式，这一点牵扯到排版

注：对于中文的情况会采用CJK方式

属性值 说明
normal 默认，一般默认应该都是break-all
break-all 允许单词内换行（不推荐，不美观）
keep-all 只能单词的词缀或-处换行

word-wrap

作用：对于特别特别长的单词而言也需要设定换行方式，比如给人发URL网址，这本身就是一个极长的单词，如果不能换行，展现上并不是很好

属性值 说明
normal 默认
break-word 允许长单词在内部换行

text-overflow

作用：定义当文本发生溢出时，在最后的元素如何处理

注：某些浏览器不采用clip的情况下，文本最后所有的都会用替代文本表示，如果设定为scroll你会发现最后文本消失了。正常情况比如firefox执行，应该只是在显示上替代，最后文本不会被替代

属性值 说明
clip 裁剪文本
ellipsis 文本最后用...表示
字符串 设定某个字符串，文本最后用此表示
备注：此属性只有firefox生效，否则视为clip

text-shadow

作用：在视觉上定义文字阴影，推荐用颜色更浅一层的

是一个复合属性，有四个参数

（顺序：水平偏移→垂直偏移→模糊距离→颜色）

属性值 说明
h-shadow(px) 水平偏移
v-shadow(px) 垂直偏移
blur(px) 模糊距离
颜色值 颜色（推荐用浅一层的颜色，如黑对灰） 
<h1 style="Text-shadow:2px -2px 5px grey;">Text-shadow effect</h1>

十一、字体

font-style

作用：设定字体样式是否倾斜

属性值 说明
normal 默认
italic 若字体倾斜版本可用，则用此字体；否则用oblique模拟
oblique 斜体

font-variant（略）

font-weight

作用：设置字体的粗细

属性值 说明
normal 默认，400
bold 700
thicker 900
lighter 比父元素字体更细
bolder 比父元素字体更粗
数值 用1~1000的数值来表示字体的粗细

回退机制，若指定的数值无法使用，则会根据以下方式进行查找合适的权重值

■数值小于400，降序查找若不存在升序查找

■数值大于500，升序查找若不存在降序查找

■在400~500之间（包括），先查看500是否可用，若没有降序查找，若再没有升序查找

相对粗细值实际渲染，使用lighter、bolder时虽然可以变粗变细，但实际上是限定的

■对于lighter分为1500，501799，800~1000三档，分别变成100，400，700

■对于bolder分为1399，400599，600~1000三档，分别变成400，700，900

font-size

作用：设定字体大小

属性值 说明
长度单位 默认16px，略
smaller 比父元素更小
larger 比父元素更大

font-family

作用：设定字体类型，可以指定多个值作备用

若发现不支持某一个字体，则往下查看备用字体是否满足，CSS内置一些可以使用的字体

p {
	font-family:"Times New Roman",Georgia,Serif;
}

@font-face

作用：设定服务器字体

font-family的字体只能使用近乎固定的字体，字体能否使用还要由用户决定

因此有@font-face允许使用服务器上的字体

比如这里我下载了华康少女的字体（一般用户不会安装此字体），我可以很容易的加上

【【】】

@font-face是一个特殊规则

其中可以设置font-family（表明你要为设定font起的名字）、src（font来自于哪）、font-style（是否斜体）、font-weight（字体粗细）

备注：可能会遇到跨域问题

font

是一个复合属性，顺序为：

font-style→font-variant→font-weight→font-size/line-height（必要）→font-family（必要）

十二、表格

border-collapse

作用：设定边框是否合并

注：HTML的表格边框默认是双边框的

属性值 说明
collapse 合并为单边框
separate 默认，双边框

border-spacing

作用：设定双边框（border-collapse: collapse;则失效）在水平方向、垂直方向的距离

属性值 说明
length length 略

empty-cells

作用：隐藏空单元格的边框、背景（border-collapse: collapse;则失效）

属性值 说明
show 默认，显示
hide 隐藏

table-layout

作用：设定表格如何布局

属性值 说明
auto 默认，根据单元格内容自动设定
fixed 由表格列td宽和表格table宽决定（可能有溢出）

caption-side

作用：table中还有一个caption标签，可以针对caption设定标题的位置

属性值 说明
top 默认，位于表格之上
bottom 位于表格之下

十三、列表

list-style-image

作用：设定列表标记图标

属性值 说明
none 默认
url(...) 列表标记图标的路径

list-style-position

作用：设定列表项是否缩进

属性值 说明
outside 默认
inside 列表项会存在缩进

list-style-type

作用：设定列表标记的类型，会被list-style-image覆盖

属性值 说明
none 无标记
disc 默认，实心圆
circle 空心圆
square 实心方块
decimal 数字
decimal-leading-zero 0开头的数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
lower-greek 小写希腊字母
lower-latin 小写拉丁字母
upper-latin 大写拉丁字母
hebrew 希伯来编号
armenian 亚美尼亚编号
georgian 乔治亚编号
cjk-ideographic 中文
hiragana 日文片假名
katakana 日文片假名
hiragana-iroha 日文片假名
katana-iroha 日文片假名

list-style

复合属性，顺序：list-style-type→list-style-position→list-style-image

十四、背景

background-color

作用：设定背景颜色

属性值 说明
transparent 默认，透明
颜色值 略

background-position

作用：设定背景图像的位置

属性值 说明
left/center/right top/center/bottom 若忽略后边参数则认为center
length length 略

background-size

作用：设定图像大小

属性值 说明
auto 默认
cover 图像缩放保证是完全覆盖区域的最小尺寸
contain 图像缩放保证是适合区域的最大尺寸
length length 略

background-repeat

作用：设定图像平铺方式

属性值 说明
repeat 默认，水平垂直方向均重复
repeat-x 水平方向重复
repeat-y 垂直方向重复
no-repeat 不重复

background-origin

作用：设定背景图像position参考的位置

注：若background-attachment: fixed;则失效

属性值 说明
padding-box 默认，位置参考padding
border-box 位置参考border
content-box 位置参考content

background-clip

作用：设定背景图像的绘制区域

属性值 说明
padding-box 绘制在padding范围内
border-box 默认，绘制在border范围内
content-box 绘制在content范围内

background-attachment

作用：设定背景图像是否固定

属性 说明
scroll 默认，随页面滚动
local 随滚动元素滚动
fixed 固定

background-image

作用：设定背景图像url

属性值 说明
none 默认
url(...) 略

background

复合属性，顺序：

x-color→x-image→x-position→x-size→x-repeat→x-origin→

x-clip→x-attachment

参考网站

w3cschool

MDN CSS

HTML.net CSS

CSS specifishity

grid布局案例

grid小游戏

A Complete Guide to Grid

CSS Grid Starter Layouts

Getting Started with CSS Grid



这篇关于CSS学习笔记（三）：文本、字体、背景、表格、列表的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程