- 简介
CSS主要目的是给HTML标记添加各种各样的表现。比如文字样式，背景，文本样式，链接样式。 - 语法格式
一个CSS由选择器和格式声明语句构成。h1{ color:red; font-size:14px; } - 选择器：
1、基本选择器
（1）*选择器：通配符
将匹配的所有HTML标记，所有的标记都会改变。*{ color:red;}
（2）标签选择器，将匹配指定的HTML标记。h1{ color:red;}
（3）class选择器，给一类HTML标记加样式。
必须以点开头，后跟class属性值。HTML标记的class属性值不能以数字开头。.myClass{ color:red; background-color:yellow;}
（4）id选择器
给指定的id的元素添加样式，网页中HTML标记的id属性值必须是唯一的。
每一个HTML标记都有一个id的公共属性，id属性一般给js用，class属性只能给CSS使用，id选择器的名称必须以“#“开头，后跟HTML标记的id属性值。#myID{ color:red; background-color:yellow;}
2、组合选择器
（1）多元素选择器
给多个元素加同一个样式，多个选择器之间用“，”隔开。h1,div,.p2{Color:red;}
（2）后代元素选择器
给某一标签的某一个后代元素加样式，选择器之间用空格隔开。div .myClass{color:red;}
（3）子元素选择器
给某个元素的子元素加样式div> .myClass{color:red;} - CSS注释
CSS注释：/*内容*/
HTML注释：<!—内容—> - CSS尺寸属性
width：元素的宽度，一定用px单位
height：元素的高度 - CSS字体属性
Font-size:文字大小
font-family：字体
font-style：斜体，取值：italic
font-weihgt 粗体，取值：bold - CSS文本属性
color：文本颜色。
text-decoration：文本修饰线，取值：none（无）、underline（下滑线）、overline（上划线）、line-through（删除线）。
text-align：文本水平对齐方式，取值：left、center、right。
line-height：行高，可以用固定值，也可以用百分比。
text-indent：首行缩进。
letter-spacing：字间距。 - CSS伪选择器
给超链接加样式
1、正常状态（:link）:鼠标没有放上链接的状态。
2、放上状态（:hover）：鼠标放上链接的状态。
3、激活状态（:active）：按住鼠标左键不动的状态（短暂）。
4、访问过状态（:visited）：按下鼠标左键并弹起后的状态。 - CSS列表属性
list-style:none; 去掉项目符号或者编号前面的各种符号。 - CSS边框属性
每个元素都可以加边框线
border（同时给四个边加边框线）、broder-left（左边框线）、border-right（右边框线）、border-top（上边框线）、border-bottom（下框线）。
border：粗细“空格”线形“空格”颜色；
线形：none（无）、solid（实线）、dashed（虚线）、dotted（点状线）
border：5px dashed red； - CSS内边距属性
边框线到内容间的距离。
padding（上下左右四个内填充同时设定）、padding-left（左内填充，左边框线到内容的距离）、padding-right、padding-top、padding-bottom。
padding:10px； //上下左右四个内填充为10个像素。
padding:10px 20px；//上下内填充为10像素，左右内填充为20像素。
Padding:5px 10px 20px; //上内填充为5像素，左右为10像素，下填充为20像素。
Padding:1px 2px 3px 4px; //上内填充为1像素，右为2像素，下为3像素，左为4像素。 - CSS外边距属性
边框线往外的距离。
margin、margin-left、margin-right、margin-top、margin-bottom。
margin:10px； //上下左右四个外边距为10个像素。
margin:10px 20px；//上下外边距为10像素，左右外边距为20像素。
margin:5px 10px 20px; //上外边距为5像素，左右为10像素，下外边距 为20像素。
margin:1px 2px 3px 4px; //上外边距为1像素，右为2像素，下为3像素，左为4像素。 - CSS背景属性
background-color 背景颜色
background-image 背景图片，eg：background-image:url(images/123.gif)
background-repeat 背景平铺，取值 no-repeat，repeat-x，repeat-y 。
background-position 背景定位，取值：left|center|right top|center|bottom。
定位方式：background-position:left center //图片在左中位置。background-position:50px 50px//图片距离容器的左端50像素，顶端50像素。background-position:50% 50% 图片水平居中，垂直居中。background-position:left 10px //背景靠左对齐，距顶端50像素。
简写方式 background：背景色 背景图 是否平铺 定位值. - 浮动和清除
float：让元素浮动，取值：left（左浮动）、right（有浮动）
clear：浮动清除，取值：left（清除左浮动）、right（清除右浮动）、both（同时清除左右浮动）。 - CSS浮动：
浮动的元素将向左或者向右浮动，浮动到容器的边上或者上一个浮动元素的边上。
浮动的元素不再占空间，并且浮动元素的层级要高于普通元素。
浮动的元素一定是块元素，无论之前是什么元素。
浮动的元素如果不定宽度，则会尽可能的变窄。故而一般要定宽度。
一行中的多个元素一起浮动，以解决兼容性。
功能：将多个块元素并列排版。 - CSS清除
功能：可以使包围元素从视觉上包住浮动元素，清除之下其他元素恢复默认排版。注：有浮动，就要清除。如果包围元素定了高度，可以不使用清除。 - CSS继承性
属性继承：外层元素的样式会被内层元素进行继承，多个外层元素的样式最终都会“叠加”到内层元素上。
文本属性都会被继承：color、font-size、font-family、font-style、font-weight、text-align、text-decoration、text-indent、letter-spacing、line-height。
body的css属性会被其所有子元素继承。 - CSS的优先级
单个选择器的优先级：行内样式>id选择器>class选择器>标签选择器
多个选择器的优先级： 一般情况下，指向越精确优先级越高。特殊情况下假设： - display属性
- 规定了网页中元素如何显示。
- 取值：none（不显示）、block（以块元素显示）、inline（以行元素显示）
- block可以将行元素转为块元素，inline可以将块元素转为行元素。
- overflow属性
当内容溢出时该如何显示
取值：visible（可见）、hidden（隐藏）、scroll（滚动）、auto（自动） - cursor属性
规定网页内光标的类型。
取值：text（文本）、help（帮助）、wait（等待）、pointer（手形）。 - CSS定位
position（元素定位方式）：static（默认状态，不定位）、 （固定定位）相对于浏览器窗口来进行的定位、relative（相对定位）、absolute（绝对定位）
定位坐标：定位元素距离目标元素top、bottom、left、right多少距离。 - HTML中引用CSS的方法
1、嵌入式：用<style type=“text/css”></style>只能给当前网页使用，可存在多个。
2、外联式：通过<link>标记引入一个CSS文件（.css），可实现CSS共享。<link rel=“styesheet” type="text/css” href=“文件地址”>。<link>标签放在<head>标签内，可链接多个文件。
3、行内式：每一个HTML标记的公共属性（class、id、title、style）HTML中的style属性和CSS中的一致。 - CSS表格属性
Border-collapse:表格边框线合并，取值：collapse。 - 浏览器兼容性
不同浏览器下显示效果不同，兼容性调试，主要调试 ：IE6、IE7、IE8、Firefox.
兼容性调试手段
1、全局设置
清除所有标记的内外边距body,ul,li,a,img,p,input{margin:0;padding:0;}
去除项目符号或者编号前的符号ul,li,ol{list-style:none;}
全局链接效果a:link,a:visited{color:#444;text-decration：none；}a:hover{color:red;}
网页中所有文字的大小颜色body{font-size:12px;font-family:宋体;color:#ccc;}
去除链接图片的边框线img{border:0;}
CSS HACK（尽量不用）
针对不同浏览器，编写不同的CSS代码，不同浏览器的CSS的识别符号
“*”IE6和IE7识别.box{*background-color:red;}
“_”只有IE6识别.box{_background-color:red;}
08-10
458
458
07-24
221
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
