css优先级:
1、浏览器默认
2、外部样式表
3、内嵌样式表(在HEAD标签里的)
4、行内样式Inline style
当发生css的冲突时,遵循“谁具体听谁的”的原则。比如id selector就比class selector更具体,冲突时就会以id selector为准。而Inline style比id selector优先级更高。
css语法由3个部分组成:选择器(selector)、属性、值。
语法 selector { property: value}
选择器就是我们希望去定义的HTML标签,如:
body { color: black}
p { font-family: "sans serif"}
p { text-align: center; color: red}
其中,值如果有多个单词要加双引号;属性如果有多个要用分号隔开。
另外,冒号两边不要带空格。
也可以分行描述:
p{
text-align: center;
color: black;
font-family: arial
}
可以将selector写在一起,以逗号隔开
h1,h2,h3,h4,h5,h6 { color: green}
选择器类(class selector)--同一个元素显示不同的样式
有时在网页中不是希望“一视同仁”,比如不是所有的段落都居中,那么可以这么写:
p.right{text-align:right}
p.center{text-align:center}
这里的p.right的right是自己定义的class,可以随便叫什么,但是不要以数字开头
然后在HTML中用类属性引用:
<p class="right">right</p>
<p class="center">center</p>
注意:每个html元素只能用一个class,比如这样写是不符合规范的:<p class="right" class="center">
可以省略标签直接定义,这意味着所有html元素只要引用这个class均会执行。如:
.center{text-align:center}
id选择器(id selector)--不同的元素显示同样的样式
--为不同的html元素定义相同的样式,通过id属性实现
比如这个样式规则: #green{color:green}
这个规则能匹配下面:
<h1 id="green"></h1>
<p id="green"></p>
还可以这么写: p#green{color:green}
这个规则指定了能匹配所有带id属性值为green的p标签
css的注释: /* */
如何在html中引入css?
外部样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
内嵌样式表:
<head>
<style type="text/css">
hr{color:red}
p{margin-left:20px}
body{backgroud-image:url("images/back40.gif")}
</style>
</head>
行内样式表:
<p style="color:red;margin-left:20px"></p>
一般不推荐使用行内样式表,因为css的目的就是把内容和形式分开。而行内样式表又是混淆在一起的。
伪类 psuedo class(编辑顺序 l-->v-->h-->a)
link 未被访问前的样式
visited 其链接地址已被访问过时的样式
hover 鼠标悬停时的样式
active 被用户激活(在鼠标点击与释放之间发生的事件)时的样式
下面是一个例子:
body{background-color:orange}
h1{color:green;font-size:20pt}
hr{color:red}
p{font-size:11pt;margin-left:15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}
1、浏览器默认
2、外部样式表
3、内嵌样式表(在HEAD标签里的)
4、行内样式Inline style
当发生css的冲突时,遵循“谁具体听谁的”的原则。比如id selector就比class selector更具体,冲突时就会以id selector为准。而Inline style比id selector优先级更高。
css语法由3个部分组成:选择器(selector)、属性、值。
语法 selector { property: value}
选择器就是我们希望去定义的HTML标签,如:
body { color: black}
p { font-family: "sans serif"}
p { text-align: center; color: red}
其中,值如果有多个单词要加双引号;属性如果有多个要用分号隔开。
另外,冒号两边不要带空格。
也可以分行描述:
p{
text-align: center;
color: black;
font-family: arial
}
可以将selector写在一起,以逗号隔开
h1,h2,h3,h4,h5,h6 { color: green}
选择器类(class selector)--同一个元素显示不同的样式
有时在网页中不是希望“一视同仁”,比如不是所有的段落都居中,那么可以这么写:
p.right{text-align:right}
p.center{text-align:center}
这里的p.right的right是自己定义的class,可以随便叫什么,但是不要以数字开头
然后在HTML中用类属性引用:
<p class="right">right</p>
<p class="center">center</p>
注意:每个html元素只能用一个class,比如这样写是不符合规范的:<p class="right" class="center">
可以省略标签直接定义,这意味着所有html元素只要引用这个class均会执行。如:
.center{text-align:center}
id选择器(id selector)--不同的元素显示同样的样式
--为不同的html元素定义相同的样式,通过id属性实现
比如这个样式规则: #green{color:green}
这个规则能匹配下面:
<h1 id="green"></h1>
<p id="green"></p>
还可以这么写: p#green{color:green}
这个规则指定了能匹配所有带id属性值为green的p标签
css的注释: /* */
如何在html中引入css?
外部样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
内嵌样式表:
<head>
<style type="text/css">
hr{color:red}
p{margin-left:20px}
body{backgroud-image:url("images/back40.gif")}
</style>
</head>
行内样式表:
<p style="color:red;margin-left:20px"></p>
一般不推荐使用行内样式表,因为css的目的就是把内容和形式分开。而行内样式表又是混淆在一起的。
伪类 psuedo class(编辑顺序 l-->v-->h-->a)
link 未被访问前的样式
visited 其链接地址已被访问过时的样式
hover 鼠标悬停时的样式
active 被用户激活(在鼠标点击与释放之间发生的事件)时的样式
下面是一个例子:
body{background-color:orange}
h1{color:green;font-size:20pt}
hr{color:red}
p{font-size:11pt;margin-left:15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}