用来修饰标签的技术,叫层叠样式表——简称CSS
一、CSS选择器
1.1.id选择器
选中网页中某一个指定ID的标签的样式
网页中的标签,每个标签有且仅有一个唯一的ID
实例:
1.2.class选择器
选中所有网页中指定class属性的标签的样式
不同的标签的class属性可以一样,表示使用同一种样式来修饰
实例:
1.3.标签选择器
使用指定的标签,来修饰网页中所有选中的标签的样式
实例:
1.4.组合选择器
|-- 兄弟选择器
|-- 子元素选择器——#msg > li{}
|-- 内部选择器—— #msg li{}
二、怎么使用CSS
2.1. 标签内嵌的CSS样式
|-- HTML标签,标签属性都有一个style属性,在style属性中编辑css样式
|-- <div style="width:20px;height:10px;"></div>
实例:
<body>
人生<u>没有</u>彩排,<p><del>每一秒</del>都是现场直播。</P><br />
<b><i>加油!</i></b><hr/>
<strike style="color:#ccc">原价109</strike>现价89
</body>
2.2. 页面内嵌的CSS样式
|-- 网页中在<head></head>标签里,嵌入<style></style>标签,在标签中编辑网页中的CSS样式
实例:
<!doctype html>
<html>
<head>
<meta charset="GB13080">
<title>我的主页</title>
<style>/*设置字体颜色及大小写在<style>标签*/
#old{
color:blue;
font-size:20px;
}
#new{
color:red;
font-size:40px;
}
</style>
</head>
<body>
人生<u>没有彩</u>排,<p><del>每一秒</del>都是现场直播。</p><br/>
<b><i>加油!</i></b><hr/>
<span id="old"><strike>原价109</strike></span><span id="new">现价89</span>
</body>
</html>
3. 外部CSS样式
|-- 网页外部创建一个单独的样式表文件【**.css】,然后引入到网页中,当前网页就可以使用【**.css】中定义的样式
实例:
<span style="white-space:pre"> </span><!doctype html>
<span style="white-space:pre"> </span><html>
<span style="white-space:pre"> </span> <head>
<span style="white-space:pre"> </span> <meta charset="utf-8">
<span style="white-space:pre"> </span> <title>无标题文档</title>
<span style="white-space:pre"> </span> <!-- 使用Link标签,引入一个外部的css样式表 -->
<span style="white-space:pre"> </span> <strong><link rel="stylesheet" type="text/css" href="css/index2.css"></strong>
<span style="white-space:pre"> </span> <style>
<span style="white-space:pre"> </span> #pageinner input{width:120px;height:18px;color:#363434;}
<span style="white-space:pre"> </span> </style>
<span style="white-space:pre"> </span> </head>
</html>
三、CSS使用语法:
3.1.标签内嵌CSS样式:
|-- 属性名称:属性值
|-- 属性名称:属性值;属性名称:属性值;
3. 2.外部CSS样式:
选择器{
属性名称:属性值;
属性名称:属性值;
属性名称:属性值;
}