1.1 css基本概念：
Css层叠样式表
Html描述了呈现的内容，而css则定义了这些内容的呈现样式，比如字体的颜色、大小，使用css能够使页面的内容和呈现方式有效分离，有助于分工合作，也有利于快速切换不同的呈现形式。
使用样式表有三种：
内联样式：
<p style="font-family: 黑体;font-size: 20px;color: blue" >内联样式的演示</p>
将样式定义在style属性中，内容和表现形式高度耦合。维护起来困难，不利于分工合作。只能应用当前标签内。
内部样式
1. <style> p { color: red; } </style>
在<head>标签中通过<style>标签来定义，内容和表现形式耦合程度降低，并没有完全分离，定义的样式只能应用在当前页面。
外部样式表
首先定义一个样式表文件css。
p{ font-size: 30px ; color: blue; }
css中也可以使用注释，形式/*.....*/
然后在需要使用这些样式的HTML文件引入该样式表文件。
<head lang="en"> <meta charset="UTF-8"> <title>css样式</title> <link rel="stylesheet" type="text/css" href="7.11.css"> </head>
外部样式表使得内容和形式彻底分离，有力于分工合作及维护，可在多个html中应用。
1.2颜色
光的三基色（三原色）：红、绿、蓝、
Css中用8为表示一个颜色，那么可以表示2的8次方中颜色，及256中颜色，所以有256*256*256
Css中有多种颜色表示形式。
十六进制颜色：
<p style="color: #800000">内部样式的演示4</p>
RGBA颜色
<p style="color:RGBA(255,0,0,0.5)">内部样式的演示1</p>
A代表透明图，1位完全不透明。
RGB颜色 <p style="color: RGB(255.0.0)">内部样式的演示3</p>
HSL颜色
颜色也可以由另外三个分量及：色调，饱和度，明度。
HSLA颜色
颜色也可以由另外三个分量及：色调，饱和度，明度。A代表透明图，1位完全不透明。
预定义颜色
提供一些常用的颜色：
<p style="color: black">3333</p>
1.3尺寸单位
CM：厘米
Mm毫米
In英寸
Px像素绝对单位
%百分比相对单位
em有如下特点：
EM是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内字体尺寸没被人设置，则相对于浏览器的默认字体尺寸。
Vw
1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。
Vh
1vh等于视口高度（viewport height）的百分之一。
vw和vh是相对于视口（viewport，也可以叫做视区、视界或可视范围）的宽度和高度。由于现在移动设备（主要是手机）的屏幕尺寸千差万别，如果仍然根据屏幕的物理分辨率来设计网页，效果会很难统一，因此html5和css3引入视口的概念来代替显示器的物理尺寸。通过在meta标签上的设置，视口的长宽可以跟设备的物理分辨率相等，也可以不相等（以便手机上可以实现用两个手指来放大会缩小页面），可根据需要灵活掌握。在PC中，视口的长宽则是跟浏览器窗口的物理分辨率恒等的。
扫一扫
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
