目录
前言
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效 果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增 加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。 那么如何实现结构和样式的完全分离呢？
一、 CSS基础
1.1 什么是CSS
简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边 距等）以及版面的布局等外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不 同的浏览器设置不同的样式。
1.2 CSS发展历史
1. 1996年 CSS 1.0 规范面世，其中加入了字体、样色等相关属性。 2. 1998年 CSS 2.0 规范推出，这个版本的 CSS 也是最广为人知的一个版本。 3. 2004年 CSS 2.1 规范推出，对 CSS 2.0 进行了一些小范围的修改，删除了一些浏览器支持不成熟的 属性。 4. 2010年 CSS 3.0 规范推出，将 CSS3 分成了不同的模块，例如盒子模型、背景和边框、文字特效等 模块。
二、CSS使用方式(3种)
2.1 行内样式
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is title</title>
</head>
<body>
<p style="font-size: 16px; color: red;">大家好</p>
</body>
</html>2.2 内部样式表
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is title</title>
p {
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<p>Hello everyone</p>
</body>
</html>
2.3 外部样式表。
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is title</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<p>我是优秀的开发工程师</p>
</body>
</html>3. CSS基本语法
CSS 样式由一系列的规则集组成，规则集中有一条或多条样式声明，每条样式声明包含着一对属性名和 属性值，属性名和属性值之间以冒号（ : ）隔开，样式规则之间以分号（ ; ）隔开，最后一对样式声明 后面可以省略分号。
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。
每个属性有一个值。属性和值被冒号分 开。
4. CSS字体样式属性
4.1 font-size:
字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相 对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：
4.1.1 px
px单位名称为像素，像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏 幕上的一个点 (是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染 的像素完美呈现的网站。
4.1.2 em
em是相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。若用于其他属性 （width,height），则是相对于本身元素的font-size。
em单位有如下特点：
em的值并不是固定的;
em会继承父级元素的字体大小。
我们知道任意浏览器的默认字体大小都是16px。所有未经调整的浏览器都符合: 1em=16px。
em是继承父元素的字体大小，可是当父元素字体大小改变时，又得重新计算了，这不怎么方便，还好 rem解决了这个问题。
思考:什么是rem?
值 描述 normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。 100~900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
4.2 font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落 文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{ font-family:"微软雅黑","楷体_GB2312";}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到 找到合适的字体。 常用技巧：
1. 现在网页中普遍使用16px、字体是微软雅黑。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如fontfamily: "Times New Roman";。
5. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
4.3 font-weight:字体粗细
字体加粗除了用 b 和 strong 标签之外，可以使用css 来实现，但是css 是没有语义的。 font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900 （100的整数倍）。 属性值 小技巧： 数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。
4.4 font-style:字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用css 来实现，但是css 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
小技巧： 平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。 4.5 font:综合设置字体样式 (重点) font属性用于对字体样式进行综合设置，其基本语法格式如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* 0-255*/
/*color: rgb(red, green, blue)*/
/* 透明度0-1之间*/
/* color: rgba(red, green, blue, alpha)*/
/* 16进制 1 23 45 678 9 a b c d e f*/
color: #fc46b3;
font-size: 16px;
/* 文本默认的大小是16px*/
/* 最小是0*/
font-weight: 900;
/* 字体粗细*/
font-family: "华文彩云";
/*默认微软雅黑*/
}
</style>
</head>
<body>
<div>
热热热热热
</div>
</body>
</html>
746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
