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将有机会获得视频学习资料奥!