2021-07-11 CSS-CSDN博客

一：字体相关与文本相关样式

a.字体相关样式属性

字体样式大致有如下几种特征：
字体类型（风格）、字体粗细、字体大小、字体系列
(1)字体系列 font-family
用于设置多个显示字体

(2)字体大小 font-size
用于设置字体大小的
默认情况下，几乎所有的浏览器的默认字体大小都为16px.

(3)字体类型（风格） font-style
用于设置字体风格，可设置以下值：
①　normal：普通字体
②　italic：斜体
③　oblique：倾斜字体(不常用)

(4)字体粗细 font-weight
用于设置字体粗细，可设置以下值：
①　normal：正常粗细
②　bold：粗体
③　bolder：更粗的字体
④　lighter：更细的字体
⑤　100~900：步长为100

(5)字体修饰 text-decoration
用于控制文字是否有修饰线，可设置以下值：
①　none：无修饰
②　blink：闪烁
③　underline：下划线
④　line-through：中划线
⑤　overline：上划线

(6)text-shadow
用于设置文字是否有阴影效果

(7)text-transform
用于设置文字的大小写

none：默认。定义带有小写字母和大写字母的标准的文本。

capitalize：文本中的每个单词以大写字母开头

uppercase;定义仅有大写字母

lowercase;定义无大写字母，仅有小写字母。

inherit;规定应该从父元素继承 text-transform 属性的值。

(7)line-height
用于设置文字的行高，即字体最低端与字体内部顶端之间的距离（em的值并不是固定的，默认情况16px==1em）

b.颜色表示

文本的颜色 “color”

①　用颜色名表示
可以通过颜色的英文单词直接设置文本的颜色，如
“red”、“yellow”、“green”等等。
②　16进制表示
通过“#”+16进制表示颜色，
有“#”+“三位”和“#”+“六位”的形式。
若是“三位”的形式，第一位表示“红”，第二位表示“绿”，第三位表示“蓝”，通过取值区间“0-f”③　rgb(r,g,b)函数表示
例如rgb(255，255，0)，红光的值为255，绿光的值为255，蓝光的值为0，混合出来的颜色就是黄色
④　rgba(r,g,b,a)函数表示
“rgba”里面的这个“a”，用于指定该颜色的透明度，取值区间是“0到1”之间的浮点数（可保留到两位小数），“0”表示完全透明，“1”表示完全不透明

c.文本相关样式属性

①　text-indent
该属性是用于设置每个段落首行缩进数量值的属性，
如果是用于中文布局，一般会使用“2em”的数值和单位来为每个段落的首行缩进“两个字符”
②　text-overflow
用于控制溢出文本的处理方法，该属性的两个属性值分别是

clip:只是简单的裁剪溢出的文本

ellipsis：指定裁切溢出的文本，并显示一处标记（...）

③　vertical-align
“rgba”里面的这个“a”，用于指定该颜色的透明度，取值区间是“0到1”之间的浮点数（可保留到两位小数），“0”表示完全透明，“1”表示完全不透明

④　text-align

该属性用于控制“行内块元素”或“块元素”内“行内元素”（文本元素）的居中方式的，包含三个值：
left（默认）文本左对齐
center 文本居中对齐
right 文本右对齐

⑤word-break：用于设置目标元素中文本内容的换行方式，可以让元素内每一行文本的最后一个单词在自动换行

word-wrap：用于设置目标元素中文本内容的换行方式，该属性会尽量让长单词，URL地址不换行

d.服务器字体

使用@Font-face定义服务器字体即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        @font-face {
            font-family: CrazyIt;
            src: url("ziti/Blazed.ttf") format("TrueType");
        }
    </style>
</head>

<body>
    <div style="font-family:CrazyIt;font-size:36pt">
        hello world

    </div>

</body>

</html>

二.背景，边框，边距相关样式属性

a.背景

①　background-color
用于设置背景色。如果同时设置了背景色和背景图，则背景图将覆盖背景色
②　background-image
用于设置背景图，需要使用url（）函数指定图片地址，地址可以是相对地址也可以是绝对地址
③　background-repeat
用于设置对象的背景图片是否平铺。必须先指定background-image属性后才可以使用
④　background-attachment
用于设置图片是随对象内容滚动还是固定，属性值有scroll，fixed

⑤　background-position

用于设置对象的背景图片位置，该属性需要横坐标和纵坐标两个值

b.边框

①　border-radius
用于指定圆角边框的圆角半径，可以把边框四个直角变的圆滑，甚至可以变成圆形

②　border-color
用于设置元素的边框颜色。4个参数值，则按上右下左的顺序设置
③　border-style
用于设置元素的边框类型
④　border-width
用于设置元素的边框线宽

c.透明度

opacity用于设置整个HTML元素的透明度，rgba()其中a代表也是透明，只不过只是对背景颜色的透明，而opacity是对整个HTML元素的透明设置

d.内边距

padding：可以设置上下左右4个边的内填充距离，按上右下左顺序设置

e.外边距

margin：可以设置上下左右4个边的外边距距离，按上右下左顺序设置