CSS是Cascading Style Sheets（层叠样式表单）的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在您丰富的想象力下千变万化。实际上CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的：
选择符{属性：属性值}
看，是不是很简单，只有三部分。
1. CSS的要点是在你的页面中使用简洁的HTML代码,然后编写CSS"控制规则"来样式化页面中的对象.页面保持清晰有条不紊看上去非常棒.这样你的Html页面可以在移动设备和标准浏览器中运行.这就是CSS的要点.
不过CSS的艺术在于能够利用CSS控制规则快速有效地操纵页面对象.把CSS规则与HTML标记匹配起来的操做就好像是一种对话:两者需要条理清楚且保持同步,否则的话他们将答非所问,搞得你头大.
2.常规操作还是灵活匹配:假设你要样式化页面中一个<h1header,可选择操作有:
*用CSS规则h1{...定义所有的<h1标记
当然你也可通过不同的方式混合使用上面的规则:
3. 获取目标:匹配规则出错会浪费很多的时间,这里有个小窍门:在打算实施你的规则之前,不妨先使用color:red这个属性,它既书写简便又利于观察. 一旦你看到HTML页面中的文本变为红色,说明规则匹配正确.这时你会知道你的规则可以在文档中正确的部分生效,然后,删除color:red替换成原来你想实施的规则语句.
4. 掌握专利技术JM3 Gasbag Model:一个CSS布局设计就好比一个装满对象的大袋子.每一个对象均能够对外施加压力(联想一下煤气泄露,如同你的布局设计)大多数情况下,压力表现出来(margins, padding,以及float都是跟"推"密切相关的属性)通过修改CSS规则,你判断压力,在浏览器中观察你的页面好比是摇晃一下袋子,会显现出压力集中在什么区域产生影响,这就是CSS-管理压力对象保持平衡的秘密.对付压力,一次性应用过多的属性,冲突就会导致你的对象到处拥挤,对象相互之间以及袋子会被扎出许多洞来.页面漏洞百出,实在是没劲.
Gasbag 例子1:要产生居中的效果,设置margin-left:auto ,margin-right:auto这样做是有效的,因为你平衡了分布在左右两侧的压力,于是元素就像放置在两块磁铁中间的铁球一样被完美保持在了中间位置.
5. GasbagCorollary 1:JM3 Gasbag Model 只适用于使用默认的CSS"telative"定位模式.当然也可能适用于"absolute"的定位模式(通过给定精确的坐标定位每个模块的布局方式),但是千万不要轻易这样做,一旦文本或者图象的数量有所变动它会花费你很长时间来重新布局并且使你的页面看上去很糟糕.只有那些怪异的出版设计师愿意那样做.
6. 规则A-Divs和Spans:CSS中的混合语言是两个名为<div和<span的标记,两者均没有默认的外观,所谓的 <div以及<span不过是一些容器和在文本中的线。他们只是普通的用以应用样式的标记
7. 规则B：Div是容器，<span是文本，<div是有高度，宽度，队列可以与之打交道。还有：一个<div 的高度是指它其中内容的高度（文本、图像或者其他<div）.<sapn标记用于文本中的分割，正因他们只在成一条直线的文本中有意义，所以被称为"inline"元素，其他的标记如：bold(b),italic(i),underline(u)等，他们被称为是<span/元素。
不要使用<div来标记文本，也不要将<span直接用于“袋子”，这样你的布局工作才会变得容易
8. 应用CSS的三个级别：应用于较多数量的页面（通过使用扩展名为.css的文件）适用于单一页面（通过定义一个样式代码块），还有就是应用于页面内部明确的标记（通过在标记内部添加style"..."属性），当你完成一个页面布局设计，把所有的CSS代码转换为一个独立的css文件是一个不错的主意-你可以到处使用它。当你测试代码时，仅仅将此CSS文件内容复制到HTML页面内部的样式代码块中(这对你来说很容易做到)然后你就不必在两个文件之间来回切换.当样式代码定下来的时候再修改原CSS文件(我认为这段话作者的意思是:不断备份一个稳定的测试代码).
9. 保持代码简洁：书写简洁的HTML虽然很简单，但即便是那些自认为很了解CSS的人也没有把它写的简洁高效。高效的代码不能使你的页面载入更快，但是它能够让你的编码工作更容易。
three tips：
*精简你的规则语句：将(font-family, font-size) (margin-left, margin-right)转换为单行规则margin：0px 10px 10px 10px；
*当你看到一个人的层叠样式表有许多像下面这样的行：
.redtext {font-family: Arial, Helvetica, sans-serifcolor: red}
.bluetext {font-family: Arial, Helvetica, sans-serifcolor: blue}
这就表示他们可能不知道这个技巧。
定义CSS样式 (三种方式)一、在head标签中加载一个CSS文件示例<head><link rel="stylesheet" type="text/css" href="style.css" /></head>
此例使用了link标签。
abbr { font-size:12px}.text10pxwhite { font-size:10pxcolor: #FFFFFF}
style.css的内容
二、直接把CSS内容写在HTML文件的head标签中示例<head><style type="text/css">abbr { font-size: 12px} .text10pxwhite { font-size: 10pxcolor: #FFFFFF} </style></head>
此例使用了style标签。
两种方法是殊途同归的(但是推荐使用第一种方法).
三、使用style属性对标签加载样式示例<p style="font-size: 12pxcolor: #000">使用css</p>
此例使用了标签的style属性。
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style>标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: redmargin-left: 20px">
This is a paragraph
</p>
float，css的一种属性，主要属性值为：left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动），多用于网页排版。
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
扩展资料
CSS属性
1、整数和实数
在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。
2、长度量
相对长度单位有：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度；Dx——一个像素的长度，其实际的长度由显示器的设置决定，比如在800木600的设置下，一个像素的长度就等于屏幕的宽度除以800。
3、百分数量（percentages）
百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。
参考资料来源：百度百科-CSS
参考资料来源：百度百科-FLOAT
