样式表的基本形式
样式表用于控制HTML标签的样式。他的基本形式就像我们平时填写的单子，形式为
样式名称：样式值。
多组值之间用；隔开，整个组用{}包含起来。
{样式名称1：样式值1; 样式名称2：样式值2; 样式名称3：样式值3;}
样式表的基本形式
根据其放置的位置可分为三类：行间样式表，内部样式表，外联样式表
1.行间样式表
在标签内加上style=“样式名称1：样式值1；样式名称2：样式值2；”.如
<div style="color: red;margin-left: 20px">
This is aparagraph
</div>
2.内部样式表
在head里边加上:
<style>选择器{样式名称：样式值；样式名称2：样式值2；}</style>
如：
<head>
<style type="text/css">
body {background-color: red}/*表示body的背景颜色是红色。这段属于注释。就像看美剧有中英文对照，html文件里有给浏览器看的html，css，js，也有给人看的中文。浏览器在解析源码的时候会自己忽略注释*/
p {margin-left: 20px}
</style>
</head>
这边解释下什么叫做选择器。选择器就是说明{}中的样式作用于网页中的哪些元素，也就是你写这些样式是为了让那个元素或哪些元素改变外观。
最基本 css选择器有以下几种：
标签选择器，类选择器，id选择器， 群组选择器，通用选择器，包含选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式表</title>
<style type="text/css">/* 这个叫内部样式表 */
div{
width: 300px;
height: 100px;
border: 1px solid #000;
background-color:blue;
}/* 这个叫标签选择器 ,表示当前页面所有的div都符合这个样式*/
.test{
color: #666;
}/* 这个叫类选择器，表示所有class属性中带有test的标签 */
#idTest{
text-align: center;
}/* 这个叫id选择器，表示id属性值为idTest的标签（一般只有一个，id一般是唯一的） */
.test,#idTest{
font:14px/28px;
}/* 群组选择器，表示id属性值为idTest的标签和class属性中带有test的标签 */
*{
outline:#00ff00 dotted thick;
}/* 通用选择器 ,表示所有的标签元素*/ div p{ color：#000; }/* 包含选择器 ,表示所有的div中的所有的p标签.包含关系可以是上述选择器之间的任意组合，也可以是多重包含*/
</style>
</head>
<body>
<div style="background-color:red">这里边的style是css行间样式表</div>
<div class="test test2">test</div>
<div class="test">test</div>
<div id="idTest">test</div> <div><p>123</p></div>
</body>
</html>运行结果：
可以使用谷歌浏览器的插件进行查看每个元素使用了哪些样式。
不同的选择器之间的优先级（代码执行生效的顺序）：行间样式 > id选择器 > 类选择器 > 标签选择器。可以看成各选择器的权重分别是（非官方）
行间样式1000
id选择器 100
类选择器 10
标签选择器 1
包含选择器可以看成两者之间的乘积。比如div #inner和#box div的权重均为1000，此时后者样式会覆盖前者。
3.外联样式表
在head里边加上外部样式表<link href="样式文件的路径" rel="stylesheet"/>
css文件的后缀名为XXX.css,内容和内部样式表中syele标签中的一样（不含style标签）。
一般而言，优先级顺序如下：
浏览器缺省设置（默认值）<外部样式表<内部样式表（位于 <head> 标签内部）<内联样式（在 HTML 元素内部）
也就是说同一个样式出现在以上四个地方，只有优先级高的一处会生效。比如上述例子中的background-color。
扫一扫
1095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
