CSS 简介

摘要: CSS(Cascading Stytle Sheets)

​“层叠样式表”或“级联样式表”简称样式表，它允许网页设计者定义网页元素的样式，包括字体、颜色及其他高级样式。

简介：

CSS(Cascading Stytle Sheets)

“层叠样式表”或“级联样式表”简称样式表，它允许网页设计者定义网页元素的样式，包括字体、颜色及其他高级样式。

样式表有一组决定显示格式的规格组成，这些规则用于定义网页中任何HTNL元素内容的显示格式。



一个CSS规则，由“选择器”和“格式申明语句”构成。

选择器：就是选择HTML标记，将要加样式的HTML标记

格式申明语句：由{}构成，{}中是各种格式语句

一条格式语句，有“属性名：属性值”构成，英文“；”结束

属性名，就是CSS中的各种属性，这些属性名都是固定的

属性值，一个属性名可以去不同的值，这个值不假引号

CSS中的数字单位是px，这个px不能省略

CSS选择器：

基本选择器：

“*”选择器，通配符

描述：将匹配所有的HTML标记，所有的标记都会改变

<style type="text/css">
*{color:red;}
</style>

“*”尽量少用，IE6不支持

标签选择器

描述：将匹配指定的HTML标记

语法：

<style type="text/css">
h1{
color:red;
}
</style>

注意：CSS标签选择器，与HTML标记的名称一样，但不能加<>

class选择器（类选择器）

描述：给一类HTML标记加样式，每个HTML标记都有一个class属性，且class的值一样。class属性是公共属性，每个HTML都有。

类选择器的名称，必须以“.”开头，后跟HTML标记的class属性的值

id选择器

描述：给制定id的元素添加样式

注意：网页中HTML标记的id属性的值，必须是唯一的，同一个id只能使用一次

每一个HTML标记中都有一个id属性

注意：id属性大多时候是给js来使用的；class只能给css用，不能给js使用

id选择器的名称，必须以“#”开头，后跟HTML标记的id属性的值

组合选择器：

多元素选择器

描述：给多个元素加同一个样式,多个选择器之间用“，”隔开

h1,p,div,body{ color:red; }

后代元素选择器

描述：给某个标签的某一个后代元素加样式,选择器之间用空格隔开

div .title {color : red;}

子元素选择器

描述：给某个元素的子元素添加样式

div>h1.title{color：red；}

CSS伪类选择器（给链接加的样式，链接的不同状态加的样式）

一个超链接，有四个状态

正常状态(:link)：在鼠标没放上之前链接的样式

放上状态(:hover)：鼠标放到链接上是的样式

激活状态(:active)：按住师表左键不松开的样式，这个状态特别短暂

访问过的状态(:visited)：按下鼠标左键，并弹起，这是的样式效果

a:link,a:visited{ color:#444; text-decoration:none; } //正常状态和访问过的状态合并

a:hover{ color:#999999;text-decoration:underline; } //鼠标放上单做效果

CSS尺寸属性：

width：元素宽度，一定要加px单位

height：元素高度

CSS字体属性：

font-size：文字大小， fon-size:14px;

font-family：字体， font-family：微软雅黑；

font-style：斜体，取值：italic， font-style:italic;

font_weight：粗体，取值：bold， font_weight:bold;

CSS文本属性：

color：文本颜色

text-decoration：文本修饰线，取值：none（无），underline（下划线），overline（上划线），line-through（删除线）

text-align：文本水平对齐方式，left，center，right

line-height：行高，固定值或者百分比

text-indent：首行缩进， text-indent：28px

letter-spacing：字间距