应用CSS样式表
行内声明
<!DOCTYPE html>
<html lang="en">
<head>
<!--内行声明-->
<meta charset="UTF-8">
<title>应用css样式——行内声明</title>
</head>
<body>
<h1 style="color: #2b99ff;font-family: Broadway BT;font-weight: bold;border:1px
#336699 solid;">Do a thing quickly often means doint it badly.</h1>
<h1>Do a thing quickly often means doint it badly.</h1>
</body>
</html>
内嵌声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>应用css样式-内嵌声明</title>
<style type="text/css">
h1{
color:Red;
font-family:"Adobe Caslon Pro";
font-weight: bold;
border: 1px #336699 solid;
}
h2{
color:#0000cc;
font-family: ParkAvenue BT;
font-weight: bold;
border:3px #669900 DOUBLE;
}
</style>
</head>
<body>
<h1>Do a thing quickly often means doing it badly</h1>
<h2>Do a thing quickly often means doing it badly</h2>
</body>
</html>
链接外部样式文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接外部样式文件</title>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
<h1>Do a thing quickly often means doing it badly</h1>
<h2>Do a thing quickly often means doing it badly</h2>
</body>
</html>
导入外部文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入外部样式文件</title>
<style>
@import "css1.css";
</style>
</head>
<body>
<h1>Do a thing quickly often means doing it badly</h1>
<h2>Do a thing quickly often means doing it badly</h2>
</body>
</html>
外部文件示例,保存格式以css为后缀名
h1{
color:Red;font-family: Bahnschrift;
font-weight: bold;
border:1px #336699 solid;
}
h2{
color:#0000cc;
font-family: "Palace Script MT";
font-weight: bold;
border: 3px #669900 DOUBLE;
}
//h1表示修饰<h1></h1>内的文字,h2同
认识CSS选择器
CSS选择器大致可以为5种:
- 标记名称(div);
- 全局选择器(*);
- 类(class)选择器;
- Id选择器;
- 属性选择器;
以上举例如下:
div {font-size:16px;color:#FFFFFF;}
*{font-size:16px;color:#ff0000;}
<font class="class名称">
//.class属性名{样式规则;}
.txt{font-size:16px;color:$FFFFFF;font-weight:bold;}
下面是实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>叠层样式</title>
<style type="text/css">
.txt{
font-size: 24px;
color:red;
font-family: "Adobe Gothic Std B";
font-weight: bold;
border: 1px #336699 solid;
}
</style>
</head>
<body>
<font class="txt">From savig comes having.</font><p></p>
<table width="400" height="50">
<tr>
<TD align="center" class="txt">富有来自节俭</TD>
</tr>
</table>
</body>
</html>
对于上面的例子,<font>标记和<td>标记中都加入了class属性,并命名为txt,因此两者都会应用.txt选择器的样式
如果希望仅在某一种标记上应用Class选择器的样式,可以在Class选择器之前加上标记名称,格式如下
标记名称.class 属性名{样式规则;}
例如:
font.txt{font.size:16px;color:#FFFFFF;font-weight:bold}
比较以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠样式</title>
<style type="text/css">
font.txt{
font-size:24px;
color:red;
font-family: "Baskerville Old Face";
font-weight: bold;
border: 1px #336699 solid;
}
</style>
</head>
<body>
<font class="txt">From saving comes having.</font>
<table width="400" height="50">
<Tr>
<TD align="center" class="txt">富有来自节俭</TD>
</Tr>
</table>
</body>
</html>
上例中,虽然<font>标记与<td>标记都加入了class属性,并且命名为txt,但是因为CSS样式声明里已经指明font.txt选择器,因此只有<font>标记中的文字会受到影响。
ID选择器:要饮用ID选择器样式前,必须下载HTML标记中加入ID属性,举例来说,<font>标记要应用CSS样式,那么就在<font>标记中加入ID属性,如下所示:
<font id="id名称">
#id名称是自己命名的,不要使用HTML标记作为id名称,以免混淆,然后在CSS样式中加入ID选择器声明就可以了,声明格式如下:
#id属性名{样式规则;}
例如:
#font_bold{font-size:16px;color :#FFFFFF;font-weight=bold;}
下面是一个范例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠样式</title>
<style type="text/css">
#font_bold{
font-size: 24px;
font-family: "Adobe Gothic Std B";
color: red;
font-weight: bold;
border:1px #336699 solid ;
}
</style>
</head>
<body>
<font id="font_bold">From Saving comes having</font>
</body>
</html>
属性选择器:属性选择器属于高级筛选,用来筛选标记中的属性,例如想要指定超链接标记<a>的背景颜色为黄色,但是仅应用于有target属性的组件,这是属性选择器就派上用场了,其使用方法如下:
a[target]{background-color:yellow;}
属性选择器还可以让我们筛选属性,筛选方式有6种,如下表所示。
[attribute="value"] | 属性等于value |
[attribute~="value"] | 属性包含完整value |
[attribute|="value"] | 属性等于value或以value开头 |
[attribute^="value"] | 属性开头有value |
[attribute$="value"] | 属性最后有value |
[attribute*="value"] | 属性中出现value |
举例来说,下面语句中4个不同的组件都包含class属性。
<div class="first_cond">div 标记.</div>
<font class="secondtest">font标记.</font>
<a class="test">a标记.</a>
<p class="test word">p标记.</p>
当我们使用“~=”属性选择器进行筛选时,只会用到<a>和<p>标记
语法如下:
[class~="test"]{background:red;}
使用“*=”属性选择器进行筛选,则会用到<font>标记、<a>标记和<p>标记。语法如下:
[class*="test"]{background:red;}
反向选择:
如果整个文件中除了<p>标记,其标记都想应用同一种样式,这时候就可以采用反向选择“:not”,代码如下:
:not(p){color:red;}
这样,整个网页的字体都会采用红色,只有<p>标记不应用。
在下一篇当中,我会继续学习关于CSS的语法知识以及提供相关例子。