CSS是指层叠样式表
HTML描述了要呈现的内容,而CSS则定义了这些内容的呈现形式,比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离,有利于分工合作,也有利于快速更换不同的呈现形式。
使用样式表有三种方式:
1.内联样式
<pstyle="font-size: 24px;color: yellow;">内联样式</p>
<head>
<!--<metahttp-equiv="Content-Type" content="text/html"charset="utf-8">-->
<title></title>
<style>
p{
font-size: 36px;
color: red;
}
</style>
</head>
<body>
<p style="font-size:24px;color: yellow;">内联样式</p>
<P>内部样式的演示1</P>
<P>内部样式的演示2</P>
</body>
首先要定义一个外部样式表文件:
/*定义了应用于段落的样式:
字体大小:36
颜色:红色
*/
p{
font-size: 36px;
color: blue;
}
<headlang="en">
<metacharset="UTF-8">
<title></title>
<link rel="stylesheet"type="text/css" href="css/E102-01-02.css">
</head>
外部样式表使得内容和表现形式彻底分离,有利于分工合作及维护,可在多个html中引用。
CSS中的颜色:
所有的颜色都可以由红色,绿色,蓝色三种颜色调配而成,这三种颜色称为三原色。而在CSS中用8位表示一个颜色,那么可以表示28种颜色,既256种颜色。那么每个颜色值有24位来表示。可以表示256*256*256种颜色(真彩色)。
CSS中有多种颜色表示形式:
(1) 十六进制形式:
<pstyle="color: #ff0000">十六进制颜色</p>
(2) RGB颜色
<pstyle="color: RGB(255,0,0)">十六进制颜色</p>
(3) RGBA颜色
在RGB颜色基础上增加了透明度分量(Alpha),该分量的取值范围为0(完全透明)-1.0(完全不透明)。
<pstyle="color: RGBA(255,0,0,0.5)">RGBA颜色表示形式</p>
(4) HSL颜色
颜色也可以由另外三个分量来表示,既色调、饱和度、和明度。
<pstyle="color: HSL(120,50%,50%)">HSL颜色表示形式</p>
(5) HSLA颜色
在HSL颜色的基础上增加了Alpha分量
<pstyle="color: HSLA(120,50%,50%,0.4)">HSLA颜色表示形式</p>
(6) 预定义颜色
CSS提供了一些常用的预定义颜色,比如red、green等。
<pstyle="color: red">预定义颜色表示形式</p>
尺寸单位:
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:设置行高,实际上是调整行间距。