CSS指层叠样式表
为什么用CSS??
HTML描述了要呈现的内容,而css则定义了这些内容的呈现形式,比如字体,颜色等。使用css能够将页面内容呈现形式有效分类,有利于分工合作,也有利于快速更换不同的呈现形式。
使用样式表可以有三种方式:
(1)内联样式
<p style="font-size: 24px;color:aqua;">内部</p>
将样式定义在style属性中,只有对当前标签有效,内容和表现形式高度耦合
弊端:维护困难,不利于分工合作。只能应用于当前标签。
(2)内部样式:
<style>
p{
color: red;
}
</style>
在<head>标签中通过<style>标签来定义
内容和表现形式降低了耦合程度,但都还是在Html中,没有实现完全分离。(但不彻底)
定义的样式只能应用于当前页面有效,重复应用率低。
(3)外部样式表
首先需要定义一个样式表文件(.css)
p{
font-size: 36px;
color: blue;
}
css中可以使用注释,形式为/**/
然后在需要使用这些样式的HTML文件中引入该样式表文件
<link REL="STYLESHEET"TYPE="text/css" HREF="CSS/E102-01-02.css"/>
外部样式表使得内容和表现现形式的彻底分离,有利于分工合作及维护,可在多个HTML中引用。
推荐使用外部样式
但后面的案例为了方便,会会大量使用内部样式甚至内联样式。
颜色(红 绿 蓝)
需要将需要连续的量(无穷)转化为离散的量(有限的)所有的颜色都可以由红色(red)、绿色(Green)、和蓝色(blue)三种颜色调配而成,这三种颜色俗称三原色。
css中用8位表示一个颜色,那么可以表示256(2的8次方)种颜色,那么每个颜色值为24位来表示的。即256种颜色,所以总共可以表示256*256*256种颜色
Css中有多种颜色表示形成;
(1)十六进制形式
<p style="color: #ff0000;">dddddddddddddddd</p>
每俩种符号表示一种颜色
(2)RGB颜色
<p style="color:RGB(255,0,0)">LLLLLLLLLLL</p>
(3)RGBA颜色
在RGB颜色基础上增加了透明度分量(Alpha),该分量的取值范围为0(完全透明)~1(完全不透明)。
(4)HSL颜色
颜色也可以由另外三个分量表示,即色调.饱和度。透明度(亮度)。
<p style="color:HSL(255,50%,50%)">HSL</p>
(5)HSLA颜色
在HSL颜色的基础上增加了Alpha分量)
<p style="color:HSLA(255,50%,50%,0.4)">HSL</p>
(6)预定义颜色
Css提供了一些常用的预定义颜色用(符号和数字表示)
1.3 尺寸单位
CM:厘米绝对
mm:毫米绝对
In:英寸(inch)对角线
Px:像素(pixel)絶対単位
%:百分比,相对尺寸单位
Em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
所以我们在写CSS的时候,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。
比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em,因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。
那些是絶対単位?那些是相对单位?
px,pt,cm,mm这些定值都是绝对单位,
em,%这些是相对单位,没有参照就没有值
进制
1. 计数的方法
2. 2 基:某种计数方法所需数的个数
权:某位“1”代表的值
字体相关属性
background-color:red
p{
background-color:red
font-size:13px
}
2.1字体相关属性
font-family:字体名称
font-size:字体大小
font-style:字形(斜体等)
font-variant:字形变化(如大写)
font-weight:字体粗细
font-family: 宋体;
font-size: 500px;
font-style: italic;
font-variant: small-caps;
font-weight: 800;
可以简写。书写顺序
Font-style font-variant
前面三个可缺省,使用默认值,font-size和font-family必须指定值这种方式更简洁
文本相关的属性
文本相关的属性主要包括颜色,对齐方式,等
Color设置文本颜色
Text-decoration:修饰
None:默认值,没有装饰效果
Underline:加上下划线
Line-through/加删除线
Text-shadow;增加阴影,text-shadow:red 5px 10px
含义是定仪一个红色的背景,水平方向上移5px,垂直方向向上上移10相片px
direction:ltr从左往右;rtl自右至左
text-align:文本对齐方式
left:左对齐
right;右对齐
center;居中对齐
justify:俩端对齐
vertical-align:align;垂直对齐方式
top:靠上对齐
bottom;靠下对齐
Middle:居中对齐
Text-indent:文本缩进
Letter-spacing;字符之间的间距
Word-spacing:字(单词)间距
Line-height:设置行高,实际上是调整行间距