1.1基础概念
css指层叠样式表（Cascading Style Sheets）
为什么需要用CSS
HTML描述了要呈现的内容，而CSS定义了这些内容的呈现形式，比如字体，颜色等，使用CSS能够将页面的内容和呈现的形式有效分离，有利于分工合作，也有利于快速更换不同的呈现形式。
使用样式表可以有三种方式：
（1）内联方式
<p style="font-size:24px;color: green">内联样式的演示</p>
将样式定义在style属性中，内容和呈现形式高度耦合，维护困难，不利于分工合作
只能在当前标签使用
（2）内部样式
<style>
p{
font-size:36px;
color: red;
}
</style>
</head>
<body>
<p>内部样式的演示1</p>
<p>内部样式的演示2</p>
</body>
在<head>标签中通过<style>标签来定义
内容和表现形式的耦合程度降低了，但都还是在html文件中，没有实现完全分离
定义的样式只能在本页面中使用
（3）外部样式表
首先定义一个样式表文件（.css）/*
定义了应用于段落的样式：
字体大小：36
颜色：红色
*/
p{
font-size:36px;
color:blue;
}
Css中也可以使用注释，形式为/*.....*/
然后在需要使用这些样式的html文件中引入该样式表文件
<head>
<meta http-equiv="Content-Type"content="text/html; 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位表示一个颜色，那么可以表示256种颜色，即二的八次方，所有总共可以表示256*256*256
CSS中有很多种颜色表示形式：
（1）十六进制:
<p style="color:#ff0000">十六进制颜色表示形式</p>
（2）RGB颜色
<p style="color:RGB（255，0，0）">RGB颜色表示形式</p>
（3）RGBA颜色
在RGB颜色基础上增加了透明度分量，该分量的取值范围为0（完全透明）
-1.0（完全不透明）
<p style="color:RGBA(255,0,0,0.2)">RGBA颜色表示形式</p>
（4）HSL：颜色也可以由另外三个分量来表示，即色调、饱和度和明度。
<p style="color:HSL(120,50%,50%)">HSL颜色表示形式</p>
（5）HSLA：在HSL基础上增加了Alpha
<p style="color:HSLA(120,50%,50%,0.3)">HSLA颜色表示形式</p>
（6）预定义颜色
<p style="color: blue">预定颜色表示形式</p>
1.3尺寸大小
cm：厘米
mm：毫米
in：英寸（inch）
px：像素（pixel）
%：百分比
em:<em> 标签告诉浏览器把其中的文本表示为强调的内容。
vw和vb:vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。
1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px。
px：绝对单位，%相对尺寸单位。
哪些是绝对单位，那些是相对单位？
绝对单位：用基本量(例如长度、时间、质量及电荷或电流)的单位所规定的单位,称为绝对单位。这些单位在任何时刻、任何地点都取固定的数值。
相对单位：以基本量作为参考值，根据这个参考值来使用单位，称为绝对单位。
扫一扫
1443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
