1.1基本概念
CSS 指层叠样式表(CascadingStyle Sheets),为了实现页面内容和表现形式的分离。
为什么需要用CSS 什么是cdn
HTML描述了要呈现的内容,而CSS则定义了这些内容的呈现形式,比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离,有利于分工合作,也利于快速更换不同的呈现形式。
使用样式表可以有三种方式
(1) 内联样式
<p style="font-size: 24px;color: bisque">
将样式定义在style属性中。
内容和表现形式高度耦合,维护困难,不利于分工合作。
(2) 内部样式
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p{
font-size:30px;
color:blue;
}
</style>
</head>
<body>
<p>内部样式演示1</p>
<p>内部样式演示2</p>
<p>内部样式演示3</p>
在<head>标签中通过<style>标签定义。
内容和表现形式的耦合程度降低了,但是在html文件中,没有实现分离。
定义的样式只能在当前页面中使用
(3)外部样式表
首先需要定义一个样式表文件(.css)
/*定义了应用于段落的样式:
字体大小:36px
颜色:红色
*/
p{
font-size: 36px;
color: red;
}
Css中也可以使用注释,形式为/*……..*/
然后在需要使用这些样式的html文件引入该样式表文件
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/E102-01-02.css"/>
</head>
外部样式表使得内容和表现形式彻底分离,有利于分工合作及维护。可在多个html中引用。
推荐尽量使用外部样式。
但后面的案例为了方便,还会大量使用内部样式、内联样式。
1.2颜色
所有的颜色都可以由红色(red)、绿色(green)、蓝色(blue)三种颜色调配而成,这三种颜色俗称三原色。
Css中8位表示一个颜色,那么可以表示2*种颜色,即256种颜色。所以我们总共可以表示256*256*256种颜色。
Css中有多种颜色表示形式:
<body>
<p style="color:#ff0000">十六进制颜色</p>
<p style="color:RGB(255,0,0)">RGB颜色</p>
<p style="color:RGBA(255,0,0,0.5)">RGBA颜色</p>
<p style="color:HSL(120,50%,50%)">HSL颜色</p>
<p style="color:HSLA(120,50%,50%,0.4)">HSLA颜色</p>
<p style="color:BLACK">HSLA颜色</p>
</body>
(1)十六进制形式:
<p style="color: #ff0000">十六进制颜色</p>
---(2)RGB颜色
<p style="color: RGB(255,0,0)">十六进制颜色</p>
(3)RGBA颜色
在RGB颜色基础上增加了透明度分量(Alpha),该分量的取值范围为0(完全透明)~1.0(完全不透明)。
(4)HSL颜色
颜色可以由另外三个分量来表示,即色调、饱和度和明度。
(5)HSLA颜色
在HSL颜色的基础上增加了Alpha分量
(6)预定义颜色
CSS提供了一些常用的预定义颜色,比如red、green等
1.3尺寸单位
cm:厘米
mm:毫米
in:英寸(inch)
px:像素(pixel)
%:百分比
Em:相对长度单位。相对于当前对象内文本的字体尺寸。 如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
<style>
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
</style>
</head>
<body>
<h1>假定当前默认字体尺寸是14px,n em即为14px字体尺寸的n倍:</h1>
<ul>
<liclass="size1">
<strong>1em</strong>:
<p>1em大小的文字</p>
</li>
<liclass="size2">
<strong>2em</strong>:
<p>2em大小的文字</p>
</li>
<liclass="size3">
<strong>3em</strong>:
<p>3em大小的文字</p>
</li>
</ul>
Vw:相对于视口的宽度。视口被均分为100单位的vw
<style>
p {
font-size:5vw;
}
</style>
</head>
<body>
<p>相对于viewport宽度大小的文字</p>
</body>
</html>
Vh:相对于视口的宽度。视口被均分为100单位的vh
<style>
p {
font-size:5vh;
}
</style>
</head>
<body>
<p>相对于viewport高度大小的文字</p>
</body>
</html>
px:绝对单位,%相对尺寸单位。
那些是绝对单位,那些是相对单位,(自学)
px,pt,cm,mm这些定值都是绝对单位,
em,%这些是相对单位
权:某位的1所代表的值
145=1*102的二次方+4*101一次方+5*100
101=1*82二次方+4*81一次方+5*80
65=6*161一次方+5*160