一 样式表有分为几种
1. 行内样式表
例如:<p style="color:#FFFF00; font-family:Times New Roman; font-weight:bold; font-size:24px">
注:行内样式就是修饰某个标签,规定的样式只对所修饰的标签有效(这种方法比较麻烦,可以统一入在<head>标签中,采用内嵌样式)
2.内嵌样式表(根据选择器的不同:分为html选择器,Class类选择器,ID选择器)
(1)HTML选择器
<style type="text/css">
p{
font-family:System;
font-size:18px;
color:#3366CC;
}
</style>
<style type="text/css">
A{
color:#0066FF;
//下划级的属性
text-decoration:none;
}
A:hover{
color:red;
text-decoration:underline;
}
</style>
(2)CLASS选择器(类选择器)
.fire{
color:red;
font-size:24;
}
.water{
color:blue;
text-decoration:underline;
}
类名前有一个"."号,类名可以随意命名,但最好有意义,
使用类选择器格式如下:
<p class="water">你想在网页上显示的内容</p>
当使用时,那个点号就去掉了呀!!!
(3)ID选择器
#fire{
color:red;
font-size:24;
}
ID选择器使用了HTML元素中的ID属性,ID名可以随意命名,但是在整个网页必须是唯一的,不能重名.
使用格式与类选择器类似如下:
<p id="fire">你想在网页上显示的内容</p>
3.外部样式表
一个外部样式表怎么创建,其实很简单!把你以前写到<HEAD>中的样式规则,写入一个以.css文件即成功了.(假设把上面的样式规则写到一个名为newstyle.css的文件中)
使用外部样式表有两种方
(1)链接外部样式表
<head>
<link href="newstyle.css" rel="stylesheet" type="text/css">
</head>
链接外部样式表是通过HTML的LINK标签,把样式表建立关联!
其中,rel="stylesheet"表示在网页中使用这个外部样式表,type="text/css"表示文本类型的样式,href="样式表文件.css"指定的哪个文件!
(2) 导入样式表
<head>
<style type="text/css">
@import newstyle.css;
</style>
</head>
这样就和link实现了一样的功能!!!
二 样式表的混合使用的优先级
行内样式表>内嵌样式表>外部样式表
三 顺便说一下<span>元素
1.<span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。<span>本身没有任何属性。
2.<span> 与<div>
<span>在定义中属于一个行内元素，而<div>是块级元素，我们可能通俗地理解为<div>为大容器，大容器当然可以放一个小容器了,<span>就是小容器。
注:标签在样式表中即称为选择器
扫一扫
4936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
