CSS总结（一）

1 css常用的一些属性

color: 文字颜色（前景色）

font-size: 文字大小

font-family: 字体，比如：微软雅黑， 黑体，宋体，仿宋体，”Times New Roman”

font-style: 就是设置字形是”正体”还是“斜体”(italic）

font-weight: 设置是否粗体

background: 背景色

border: 设置边框

text-decoration: 设置“装饰线”（下划线，中划线，上划线）

text-align: 对齐

width: 宽

height: 高

margin:边距

padding:内边距

line-height:线距

2颜色有如下表示法

​ 2.1常规的英文单词： red, blue, green, yellow, pink, purple

​ 2.2RGB表示法：

​ 将一个颜色，使用红（R，red）， 绿（G，green）， 蓝（B，blue）来表示。

​ 这3个叫做“基本颜色”，都按0-255分为256个层级。

​ 所有颜色，都可以使用这3个颜色的不同层级（配比）来调配而成。

​ 形式：rgb(红的配比， 绿的配比，蓝的配比）；

​ 举例：

​ color: rgb(255, 0, 0) //这是红色

​ color: rgb(0,255, 0); //这是绿色

​ color:rgb(0, 0, 255); //蓝色

​ color:rgb(255, 255, 0); //黄色

​ 2.3 RGBA表示法：

​ A代表“透明度”，值从0到1的小数。0表示全透明。1表示不透明，此时就是RGB颜色

​ 形式：rgba(红的配比， 绿的配比，蓝的配比，透明度）；

​ color: rgba(100, 30, 70, 0.5),

​ color: rgba(255, 0, 0, 0.66) //这是红色

2.4进制表示法

​ 形式：#6个16进制数字！

​ 前两个数字表示“红的配比”，中间两数字表示绿的配比，后两个数字表示蓝的配比

Color:#ffffff; #fafafa;

3字体属性

字体属性是用来设定“文字字形”的外观表现，主要包括：

color：颜色

font-family：字体名称

font-size：大小

font-style：是否斜体

font综合属性的语法：font：[ <' [font-style] '> || <' [font-weight] '> ]? <' [font-size] '> [ / <' [line-height] '> ]? <' [font-family] '> ];

4文本属性

文本属性通常指的是作为文字内容的整体性特性（而不是具体文字的表现特性）。

属性名称	含义	举例	其他说明
text-align	一段文字的对齐方式	text-align: center;	可用值：left， center， right
text-decoration	一段文字的”修饰线”	text-decoration：underline	可用值：underline（下划线），overline（上划线），line-through（中划线）
text-indent	设置一段文本的“首行缩进”的宽度（距离）	text-indent: 24px;	px是长度单位，表示“像素”
line-height	设定文字的“行高”	line-height: 30px; line-height: 2em;	em是长度单位，表示“字高”
letter-spacing	设定文字的“字符间距”	letter-spacing: 3px;	注意：中文的每个字都算一个字符
word-spacing	设定文字的“单词间距”	word-spacing: 15px;	注意：单词通常是以“空格”隔开的。因此，连续的中文即使很长也只能算一个单词。

Text-justify  文本的自动对齐

<p>You can use the mark tag to <mark>highlight高亮</mark> text.</p>

<p><del>This line of text is meant to be treated as deleted text.</del></p>

<p><s>This line of text is meant to be treated as no longer accurate.</s></p>

<p><ins>This line of text is meant to be treated as an addition to the
document.</ins></p>

<p><u>This line of text will render as underlined 下划线</u></p>

<p><small>This line of text is meant to be treated as fine print.小字体</small></p>

<p><strong>This line rendered as bold text.</strong></p>

<p><em>This line rendered as italicized text.斜体</em></p>