今天学习了CSS的基础知识,CSS和html的功能不太一样,html主要描述了要呈现的内容,而CSS则是定义了这些内容的呈现形式,可以设置字体、颜色、大小等。使用CSS能够将页面内容和呈现的方式有效分离,有利于分工合作,提高效率。
1、基本样式
CSS是指层叠样式表,其中有三种方式:
(1)内联样式:是将样式定义在style属性中,但这样会导致内容和形式会高度耦合,不利于分工合作,而且只能应用于当前标签中。
(2)内部标签:是在<head>标签中通过<style>标签来定义,耦合程度是降低了,但还是在html文件中,没有实现完全分离,定义的样式只能在本页面使用。
(3)外部样式:需要先定义一个CSS表,然后在需要使用这些样式的html文件中引入该样式表文件:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS样式</title>
<link rel="stylesheet" href="E102-02.css">
</head>
外部样式使得内容和表现形式彻底分离,有利于分工合作和维护,可以在多个html文件中引用
2、颜色
自然界的颜色是无穷的,但计算机只能表示有限的信息。
需要将连续的量(无穷)转换为离散的量(有限)的。
所有的颜色都可以由红色(red)、绿色(green)和蓝色(blue)三种颜色调配而成,这三种颜色俗称三原色。
CSS中8为表示一个颜色,那么可以表示28种颜色,那么每个颜色值有24位来表示,即256种颜色,所以总共可以表示256*256*256种颜色(真彩色)。
CSS中有多种颜色表示形式:
(1)十六进制形式:#ff0000
<p style="color: #ff0000">十六进制颜色</p>
(2)RGB颜色:(128,0,0)等价于#800000
<p style="color: RGB(255,0,0)"> RGB颜色表示形式</p>
(3)RGBA颜色
<p style="color: RGBA(255,0,0,0.5)"> RGBA颜色表示形式</p>
在RGB颜色基础上增加了透明度分量(Alpha),该分量取值范围为0(完全透明)-1.0(完全不透明)。
(4)HSL颜色
颜色也可以由另外三个分量来表示,即色调、饱和度和明度。
<p style="color: HSL(120,50%,50%)">HSL颜色表示形式</p>
(5)HSLA颜色
在HSL颜色的基础上增加了Alpha
<p style="color: HSLA(120,50%,50%,0.5)">HSLA颜色表示形式</p>
(6)预定义颜色
CSS提供了一些常用的预定义颜色,比如red,blue等
<pstyle="color:darkviolet">预定义颜色表示形式</p>
3、基础属性
属性名:属性值;
background-color:red;
P{
background-color:red;
font-size=24px;
}
4、字体相关的属性
font-famils:字体名称;
font-size:字体大小;
font-style:字形(斜体等);
font-vanable:字体变化(如大写);
font-weight:字体粗细。
font-family: 楷体;
font-size: 36px;
font-style:italic;
font-variant:small-caps;
font-weight:600;
可以简写,书写顺序:
font-style font-vanablefont-weight font-size font-famils
前面三个可省略,使用默认值,font-size和font-famils必须指定值
p{
font:60px 楷体;
}
5、 文本相关属性
文本相关属性主要包括颜色、对齐方式、修饰等。
(1)color:设置文本的颜色
(2)text-decoration:文本的修饰
none:默认值,没有装饰效果
underline加下划线
overline:加上划线
line-through:加删除线
text-shadow:增加阴影
如:text-shadow: -3px -3px darkorchid;的含义是定义一个紫色的背景,在其水平方向上左移3px,垂直方向上上移3px
(3)direction:文本的方向
ltr:自左至右;rtl:自右至左
(4)text-align:文本水平对齐方式
其中有:left(左对齐)、right(右对齐)、center(居中对齐)、justify(两端对齐)
(6)vertical-align: 文本垂直方向对齐
top:靠上对齐
bottom:靠下对齐
middle:垂直居中对齐
(7)text-indent:文本缩进
letter-spacing:字符之间的间距
word-spacing:字(单词)的间距(8)line-height:设置行高,实际上是调整行间距