CSS与HTML
HTML可以比喻为房子,CSS比喻为房子内的房间。
为这些房间设置型号,喷漆颜色等等,就需要用到CSS。
相比HTML,CSS更适合设置指定样式,也更有利于处理多个页面的样式。
<style type="text/css">
p{
background-color:red;
border:1px solid gray;
color:maroon;
}
<!--表示段落背景为红色,并且有粗细为1像素,灰色实现边框-->
<!--改变字体颜色是maroon,你可能以为是font-color,可惜并不是-->
</style>
用选择器做更复杂的设置
增加规则:
<style type="text/css">
h1,h2{
font-family:sans-serif;
color:gray;
}
h1{
border-bottom:1px solid black;
}
p{
color:maroon;
}
<!--我们把开头的h1,h2或者p或者h1称为选择器-->
</style>
创建一个CSS文件
css文件中只包括CSS,不能包含HTML
所以只用在css文件中复制:
h1,h2{
font-family:sans-serif;
color:gray;
}
h1{
border-bottom:1px solid black;
}
p{
color:maroon;
}
从"lounge.html"链接到外部样式表:
<head>
<meta charset="utf-8">
<title>Head Firtst Lounge</title>
<link type="text/css" rel="stylesheet" href="../lounge.css">
</head>
- link元素链接外部信息
- type类型是“text/css”表示这是一个CSS样式表,但在HTML5中,不再需要这个属性了。
- rel属性指定HRML文件与所连接文件的关系,我们这里使用的是样式表:stylesheet
- href可以放相对链接或者URL
谈谈继承
为p选择器增加font-family属性时,会影响<p>
元素中内部元素的字体,如<em>
和<a>
也就是它们继承了父元素的样式。
继承是可以覆盖的。
为p选用了一种字体,可以为子元素选择另一种字体。
创建类选择器
实际上,我们不希望所有的p选择器都是一种形式的,这时候就需要类选择器。
我们可以在css文件里这样写:
p{
color:maroon;
background-color: red;
}
p.greentea{
color: green;
}
并且在html文件里这样应用
<p class="greentea">Green Tea $1.56</p>
<!--这样会覆盖p的color 并且继承bg-color-->
如果省略元素名,那么这个规则会应用到所有使用这个类的成员,如下:
.greentea{
color:green;
}
一个元素可以假如多个类:
<p class="greentea blueberry">
<!--如果规则中有重复的,则以最后一个类的规则为准-->