HTML描述了要呈现的内容，而CSS则定义了这些内容的呈现形式，比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离，有利于分工合作，也有利于快速更换不同的呈现形式。
使用样式表有三种方式：
1.内联样式
内联样式
2.内部样式
p{
font-size: 36px;
color: red;
}
内联样式
内部样式的演示1
内部样式的演示2
3.外部样式表
首先要定义一个外部样式表文件：
/*定义了应用于段落的样式：
字体大小：36
颜色：红色
*/
p{
font-size: 36px;
color: blue;
}
然后在需要使用这些样式的html文件中引入该样式表文件：
外部样式表使得内容和表现形式彻底分离，有利于分工合作及维护，可在多个html中引用。
CSS中的颜色：
所有的颜色都可以由红色，绿色，蓝色三种颜色调配而成，这三种颜色称为三原色。而在CSS中用8位表示一个颜色，那么可以表示28种颜色，既256种颜色。那么每个颜色值有24位来表示。可以表示256*256*256种颜色（真彩色）。
CSS中有多种颜色表示形式：
（1） 十六进制形式：
十六进制颜色
（2） RGB颜色
十六进制颜色
（3） RGBA颜色
在RGB颜色基础上增加了透明度分量（Alpha）,该分量的取值范围为0（完全透明）-1.0（完全不透明）。
RGBA颜色表示形式
（4） HSL颜色
颜色也可以由另外三个分量来表示，既色调、饱和度、和明度。
HSL颜色表示形式
（5） HSLA颜色
在HSL颜色的基础上增加了Alpha分量
HSLA颜色表示形式
（6） 预定义颜色
CSS提供了一些常用的预定义颜色，比如red、green等。
预定义颜色表示形式
尺寸单位：
cm：厘米
mm：毫米
in：英寸（inch）
px：像素（pixel）
%：百分比
em：就相当于“倍”，比如如果设置当前的div的字体大小为1.5em，则当前的div字体大小为：当前div集成的字体大小*1.5。但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放。
vw：就是当前屏幕可见高度的1%。（当元素没有内容的时候，设置height：100%该元素不会被撑开，但是设置height：100vh，钙元素会被撑开屏幕高度一致）
vh：就是当前屏幕可见高度的1%。（当这只width：100%，被社会的宽度是按照父元素的宽度来设置，但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw比50%大的情况）
px：绝对单位，%相对尺寸单位。
字体相关属性：
Font-family:字体名称
Font-size:字体大小
Font-style:字体的样式（斜体等）
Font-variant：字体变化（如：大写）
Font-weight：字体粗细
字体的相关属性可以直接简写，如： font:60px 宋体；
简写要按照一定的顺序：
Font-style font-variantfont-weight font-size font-family，前面三个可以缺省，适应默认值，font-size和font-family必须指定值。
文本相关属性：
主要包括颜色、对齐方式、修饰等。
color：设置文本的颜色
text-decoration：文本的修饰
none 默认值，没有装饰效果
underline 加一条下划线
overline 加一条上划线
line-through 加删除线
text-shadow 设置字体的阴影，如：
text-shadow:-2px -3px black;
定义一个黑色的阴影颜色，其水平方向上左移5px，垂直方向上移3px。
direction：表示文本的方向。
ltr:自左至右：rtl：自由至左。
text-alion：文本对齐方式。
left：左对齐
right：右对齐
center：居中
justify：两端对齐
vertical-align：文本垂直对齐方式。
top：靠上对齐
bottom：靠下对齐
middle：垂直居中对齐
text-indent：文本缩进方式。
letter-spacing：字符之间的间距
word-spacing：字（单词）的间距
line-height：设置行高，实际上是调整行间距。
ps: 添加助理qq:2078256832将有机会获得视频学习资料奥！
网友评论