最初的web页面只是在浏览器里边显示一些信息而已,后来随着互联网的发展,人们对页面的可观赏性要求越来越高,你网站做的难看,没人浏览啊,而且网站的功能越来越强大,如果这么多的页面没有一个很好的排版的话,简直就是乱七八糟,为此对于优化页面的需求也越来越高,但是HTML他没这个能力啊,HTML:臣妾做不到啊~。为此为了弥补HTML的不足,W3C组织又弄出来了一个新的东西,那就是CSS,然后就是HTML来负责内容,CSS用来负责美观。
5.1引用方式
CSS有4种定义与引用方式:行内样式,内嵌式,链接式和导入式。用的时候可以根据实际的情况来选择合适的定义方式。
1,行内样式:
行内样式是一种比较直接的一种样式,它通过style属性直接定义在HTML标记内,这种样式比较容易被初学者接受,但是非常不灵活。
例子如下:<p style=”color:blue”>文字</p>把段落里边的颜色设置成蓝色。
2,内嵌式:
内嵌式样式表就是在页面中使用<style></style>标记将CSS样式包含在页面中,例如:
<style>
P{
color:red;
}
</style>
这样的话,在html文档中,所有p标记的内容都是红色字体的。但是呢,我们一个网站里边有很多的网页的,你说我们在一个网页定义了这样的一个样式,但是我们另外的一个页面又要重新弄,是不是很麻烦,所以说这种时比较笨重的。
3,链接式:
链接外部CSS样式表是最常用的一种引用样式表的方式,将CSS样式定义在一个外部的文件中,然后在html文件中使用<link>标记引用,这是最为有效的使用CSS样式表的方式。
用法:<link rel=”stylesheet” href=”path” type=”text/css”>
例子:比如我们创建了一个mystyle.css的样式表,那么我们怎么用呢?
<link rel=”stylesheet” href=”mystyle.cc” type=”text/css”>那么在CSS文件中定义的样式就被HTML文件引用了。
4,导入式
导入式和链接式差不多只不过是引用的方式不一样罢了,比如在链接式中举的那个例子,那么用导入式怎么用呢?
<style>
“mystyle.css”
</style>
如果万一有一个文档具有上述的所有的样式,而且对同一种标记多了多个样式定义的时候应该怎么办呢?所以W3C给这几种使用CSS的方式弄了一个级别。他们的优先级从高到底为:行内样式》内嵌》链接》导入式。
5.2CSS规则:
一个CSS样式表中包含3部分内容:选择符、属性、属性值。
选择符:{ 属性:属性值;}
选择符又叫选择器,HTML引用某个CSS文件之后,某一段文字的具体用什么样式,就是通过选择器来具体使用的。
例如上边提到的例子
<style>
P {
color:red;
}
</style>
那么p就是选择器,当前的HTML中所有使用p标记的内容的颜色都将是红色的。
Color就是属性喽,red就是属性值。
5.3CSS选择器
1,标记选择器:直接定义某个标记的属性,那么所有使用这个标记的内容都将是被设置的样式。使用这种选择器非常便捷,但是使用这种选择器会有一定的局限性。比如说我定义了一个超链接的样式,那么我一个页面的超链接将都是这个样式,我想用不同的样式来表现超链接的话,将非常麻烦。
2,类别选择器:自己定义一个类别,以.开头,相当于自己定义了一个属性一样。
例子:
<head>
<meta charset = “utf-8”>
<title>类别选择器</title>
<style>
.one{
color:red;
}
</style>
</head>
<body>
<h2 class=”one”>应用了选择器1</h2>
</body>
3,ID选择器:通过HTML页面中的ID属性来选择来添加样式的,需要注意一个html页面中不能有两个相同的ID,相当于给标记的ID属性增加了一个属性值,定义ID以#号开头。
<style>
#one{
color:red;
}
</style>
<body>
<p id=”one”>ID选择器</p>
</body>
5.4 CSS常用属性
此处略,无非就是宽,高,背景,字体,颜色啥的,需要用的时候去查找就行了。顺便举个小例子。
下期预告:六,JavaWeb简略的谈下前端技术<三>JavaScript
如果想查看更多的技术文档请关注我的公众号:ITYaoDao,或者直接扫描下边的二维码: