第七章 CSS入门
结合html和css
先来看一个简单的css语句:
p{ //代表设置<p>元素的样式,称之为选择器
background-color : red; //表示设置<p>元素的字体颜色,属性和属性值之间用冒号“:”隔开,语句用分号“;”结尾
} //语句使用花括号“{”和“}”括起来。
整个语句称之为一个规则(RULE)。
将css语句放入html的<style>元素中即可。
当不同元素的属性相同时,可以这样书写规则:
h1,h2{//设置两个选择器,选择器之间用逗号隔开
color:red;
}
那如果想为h1设置额外的属性呢:
h1,h2{//设置两个选择器,选择器之间用逗号隔开
color:red;
}
h1{
font-family : sans-serif;
}
css的注释是/*这里是注释*/,两边可以不在同一行。
封装css
我们可以将css代码单独封装起来,再导入到html代码里(注意不要复制<style>标记,因为style属于html的标签),封装起来的文件以.css结尾,我们把css文件称之为外部样式表。
然后通过<link>元素将外部样式表导入到html代码中,下面看一下代码示例:
<link type="text/css" rel="stylesheet" href="lounge.css">
1. 使用link元素”链入“外部信息。
2. 这个信息的类型是“text/css”。换句话说,这是一个css样式表,在html5中,不再需要这个属性(这是可选的)。
3. rel属性指定了html文件与所连接文件之间的关系。我们要链接到一个样式表,所以这里使用值”stylesheet“。
4. 样式表放在href中(这里使用的是相对链接,不过也可以是一个URL)。
5. link是一个void元素,他没有结束标记。
属性的继承
继承覆盖
类(class)
如果想对元素内容分别设置样式呢?比如一大段文本被<p>标记,里面有多个<em>元素,想分别设置每个<em>元素的样式,使它们的颜色各不相同。
这时就要引入类(class)的概念了。那么,类到底是什么,可以把它想象成是一个俱乐部,要加入这个俱乐部,就必须认可这个俱乐部所有的权利和责任,如遵循它们的样式标准。
创建一个类有两步:首先,为html中的元素增加一个class属性,这样就会把元素增加到这个类中。其次,在css中选择这个类。下面看一下代码示例:
<p class="laugh"> //将这个p元素增加到了laugh类中
hahahaha
</p>
这就在html中将元素添加到了类中。下面看一下如何在css中选择这个类:
p.laugh{ //先选择这个类中的元素,这里就是p,然后用"."指定一个类,最后写上类名laugh
//这里写指定样式的属性
}
这样就可以选择属于某个类的p元素,为他们指定样式。
如果相对该类中的所有属性进行统一修改样式,可以这样做:
.laugh{ //不指定元素,直接输.laugh
//这里写样式代码
}
一个元素可以加入多个类。可以这样写:
<p class="laugh xiao haha"> //各个类名放在class属性中,类名间用空格分离,类名的顺序并不重要。
如果一个元素属于多个类,所有这些都定义了相同的属性,会有什么结果?比如三个类都定义了color属性,会用哪个颜色?
如果一个规则比其他规则更特定,就会使用那个规则的颜色,更特定是什么意思?后面会讨论这个内容,现在可以先来简单的了解一下规则的特定程度,使你对规则的特定程度有个认识:
p{color:black;} //这个规则会选择所有原来的段落元素
.greentea{color:green;} //这个规则选择greentea类的所有成员,这个规则更特定一些
p.greentea{color:green} //这个规则只选择greentea类的p元素,所以这个比上一个更特定一些
p.raspberry{color:blue} //这个规则也只是选择一个特定类中的段落,所以它与上一个p.greentea规则特定程度相同
那如果<p class="laugh xiao haha">中,p.laugh、p.xiao、p.haha三个类的特定程度相同,又同时设定了颜色样式,那么会采用哪个颜色呢?
这时会选择css文件中最后列出的那个规则。如果由于两个选择器有相同的特定性而无法解决冲突,就要利用样式表文件中的规则的顺序来解决问题。也就是说,你要使用css文件中最后列出的规则(与html代码中指定类的顺序无关)。
检查你的css代码
本章所介绍的属性
color : red //将颜色设置为红色
background-color : red;//将背景颜色设置为红色
border : 1px soild gray;//设置边框,1像素,实线,灰色
font-family : sans-serif //设置字体
border-bottom : 1px soild black;//在文本下加一条下划线,1像素 实线,黑色
top //控制元素顶部的位置
text-align //使用这个属性将文本居中,左对齐或右对齐
letter-spacing //这个属性可以在字母间设置间距
font-style //使用这个属性来倾斜文本
font-weight //用这个属性设置文本的粗细,可以用它来设置粗体
left //利用这个属性指定一个元素的左边所在的位置
list-style //用这个属性可以改变你列表中列表项的外观
padding //如果一个元素边缘和它的内容之间需要有空间,可以使用padding(内边距)
line-weight //这个属性设置一个文本元素中的行间距
font-size //让文本更大或更小
background-image //用这个属性在元素后面放置一个图像