首页 > 代码库 > css 基础（一）
css 基础（一）
一、css样式表的分类
首先介绍一下css中的样式表 a、外部样式表 将需要的样式放在单独的外部文件中，需要使用是直接调用，通常放在.css文件中。例如：/*以下部分是放在（my.css）自定义名称的css文件中*/
h1,h2,h3{color:blue;}
h1{font-size:18px;}
h2{font-size:35px;}
p{font-size:10px;}
注意：.css文件中不需要写头文件等内容，直接开始写样式内容即可。
/*以下部分是在html中调用上面的.css文件*/
在<head></head>中间添加 <link rel="stylesheet" type="text/css" url="my.css (样式表的地址)" />
b、嵌入式样式表
格式
<head>
<style type="text/css"> 该处是嵌入的样式内容 ，例如 #id={color:red;}</style>
</head>
注意：文档的<style >段必须写在<head></head>之间，可以有多个<style >段。
c、内联样式表
例如：<h1 style="color:red;">红色的标题</h1>
该样式表仅用于某一部分网页元素，在新的web标准中，最好把样式放在<style>或者外部样式表文件中使用。
一个样式规则由一个选择器和一个申明块组成。
二、选择器的分类
1、元素选择器又称为类型选择器
例如：em{cloor:red;}
p{font-size:10px;}
即表示在<body>中所有的em元素的字体全部设置为红色，所有的段落<p>字体大小设置为10px.
2、类选择器(class属性)
语法格式： .类名{属性：值}
例如：<html>
<head>
<title>类选择器使用</title>
<style>
.big {color:red}
</style>
<body>
<p class="big"></p>
</body>
</head>
</html> /*该程序表示将段落p的字体颜色改为红色*/
3、ID选择器（与类选择器类似，即可被用于选择有ID属性的HTML元素）
语法： #id名称 {属性：值；}
例如：在<style></style>之间写 #navigation {width:200px;color:#333;}
在主程序中 <body></body>中间即可调用上面的navigation <div id="navigation"></div>
4、包含选择器
例如：em{color:red}
表示在整个程序中，所有em元素的字体均设置为红色；
p em {coloe:red}
仅仅表示段落<p>中的<em>元素字体设置为红色，而其他可能存在的<div>或者其他元素的字体颜色不变。
5、通配符选择器 （*）
通配符选择器用于选择所有元素
例如： *{color:red;}
整个显示的页面字体设置均为红色。
6、伪类选择器（常使用的是与<a>元素相关的超级链接 伪类选择器）
a {} 不论链接状态如何，均可设置
a:link {} 用在未访问的链接的选择器
a:visited {} 用在已访问过的链接的选择器
a:hover {} 当鼠标放在访问地址上的链接的选择器
a:active {} 当鼠标点击访问地址是的链接的选择器
（上述的后面四种状态可 进行组合，但是顺序必须按照上面的顺序写）
a:link,a:visited {color:red;}
a:hover,a:active {color:blue;}
7、伪元素选择器
标准的选择器不能格式化一个元素的第一个字母或者第一行，而伪元素可以进行该操作；
在伪元素选择器中被所有浏览器支持的有两种：first-line first-letter
p:first-line {font-weight:bold} (段落的第一行)
p:first-letter {font-size:200%;font-weight:bold;} （段落的第一个字母）
看这里啦：one:类选择器可以在一个文档内根据需要多次使用，而同一个ID选择器只能再文档中应用一次；
two:对于同一个HTML元素，可使用多个类选择器格式化，而只能使用一个ID选择器；
three:当类选择器与ID选择器的声明有冲突是，优先选择ID选择器的声明。
css 基础（一）