CSS教程

CSS学习笔记(三):文本、字体、背景、表格、列表

本文主要是介绍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学习笔记(三):文本、字体、背景、表格、列表的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!