HTML5+CSS3+JavaScript从入门到精通-08
原创
HTML5+CSS3+JavaScript从入门到精通
作者：王征，李晓波
第八章 CSS基础
案例
08-01 CSS的基本语法
<!DOCTYPE html>
<!--web08-01-->
<!--
选择器： body, h1, p
声明语句以；分隔
-->
<html>
<head>
<meta charset="utf-8" />
<title>CSS的基本语法</title>
<style type="text/css">
body {
font-size: 15px;
color: pink;
}
h1 {
background: orange;
color: blue;
}
p {
background: rgb(100,200,100);
font-size: 18;
color: red;
}
</style>
</head>
<body>
<h1 align="center">CSS的基本语法</h1>
<hr />
CSS的基本语法
<p>
爆竹声中一岁除，春风送暖入屠苏。<br />
千门万户曈曈日，总把新桃换旧符。
</p>
</body>
</html>08-02 类选择器class
<!DOCTYPE html>
<!--web08-02-->
<!--
类选择符可将相同的元素分类定义不同的样式。
-->
<html>
<head>
<meta charset="utf-8" />
<title>类选择器</title>
<style type="text/css">
p {
font-family: "黑体";
font-size: 15px;
}
p.a {
font-family: "宋体";
font-size: 20px;
font-weight: bold;
}
p.b {
font-family: "楷体_GB2312";
color: red;
}
p.c {
background: pink;
color: blue;
font-style: initial;
}
</style>
</head>
<body>
<p>CSS样式之类选择器</p>
<p class="a">CSS样式之类选择器</p>
<p class="b">CSS样式之类选择器</p>
<p class="c">CSS样式之类选择器</p>
</body>
</html>
08-03 ID选择器
<!DOCTYPE html>
<!--web08-03-->
<!--
在定义样式时，id选择器前面要添加#；只适用于有id属性值的HTML元素。
关联选择器： 用空格连接的多个选择器
div p{color:blue;} -- 在div里面的p，字体是蓝色；
关联选择器优先级高于单一选择器的样式。
组合选择器：用“,”号连接的多个选择器
h1,h2,h3,div,p,em{color:#FF0000;} -- 前面所写的选择器，颜色都是红色
-->
<html>
<head>
<meta charset="utf-8" />
<title>ID选择器</title>
<style type="text/css">
#div1 {
background: rgb(200,200,0);
color: blue;
font-size: 20px;
}
#div2 {
background: rgb(200,0,200);
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<div id="div1">
爆竹声中一岁除，春风送暖入屠苏。<br />
</div>
<div id="div2">
千门万户曈曈日，总把新桃换旧符。
</div>
</body>
</html>08-04 伪(虚)选择器
<!DOCTYPE html>
<!--web08-04-->
<!--
伪(虚)选择器,对一个HTML元素不同状态，定义不同的样式
常用来定义超链接元素A：
A:link, 表示超链接没有被访问 -- 刚打开时
A:visited，超链接已被访问过 -- 已被点击
A:hover, 表示光标移动到超链接上 -- 鼠标移动到超链接上
A:active,超链接当前被选中 -- 按住左键不松开
-->
<html>
<head>
<meta charset="utf-8" />
<title>伪(虚)选择器</title>
<style type="text/css">
a:link {
color: red;
font-size: 15px;
}
a:visited {
color: blue;
font-size: 15px;
}
a:hover {
color: orange;
font-size: 25px;
}
a:active {
color: green;
font-size: 30px;
}
</style>
</head>
<body>
<p><b><a href="file:///E:\WEB\Case\web08-01.html" target="_blank">CSS的基本语法</a></b></p>
<p><b>提醒：</b>在CSS定义中，a:hover必须位于a:link和a:visited之后，这样才能生效！</p>
<p><b>提醒：</b>在CSS定义中，a:active必须位于a:hover之后，这样才能生效！</p>
</body>
</html>08-05 CSS注释
<!DOCTYPE html>
<!--web08-05-->
<!--
CSS只有一种注释 /**/
-->
<html>
<head>
<meta charset="utf-8" />
<title>CSS注释</title>
<style type="text/css">
/*使用元素选择器，定义所有P元素属性*/
p {
font-family: "微软雅黑"; /*字体类型*/
font-size: 15px; /*字体大小*/
color: blue; /*字体颜色*/
font-weight: bold; /*字体加粗*/
}
/*使用ID选择器，定义个别样式*/
#p2 {
color: red; /*字体颜色*/
}
</style>
</head>
<body>
<p id="p1">HTML控制网页的结构</p>
<p id="p2">CSS控制网页的外观</p>
<p id="p3">Javascript控制网页的行为</p>
</body>
</html>08-06 链接外部样式表
/* web08-06-css */
@charset "utf-8"; /*编码*/
p {
background: rgb(100,200,100);
color: red;
font-size: 20px;
}
<!DOCTYPE html>
<!--web08-06-->
<!--
嵌入样式表 - 在style中直接写样式
链接外部样式表
内嵌样式 - 直接写在HTML元素中
优先级：内嵌(inline) -> 嵌入(internal) -> 外部(external) -> 浏览器默认(browser default)
-->
<html>
<head>
<meta charset="utf-8" />
<title>链接外部样式表</title>
<link rel="stylesheet" type="text/css" href="web08-06.css" />
</head>
<body>
<h3 align="center">连接外部样式表</h3>
<hr />
<p align="center">
爆竹声中一岁除，春风送暖入屠苏。<br />
千门万户曈曈日，总把新桃换旧符。
</p>
</body>
</html>
08-07 内嵌样式
<!DOCTYPE html>
<!--web08-07-->
<!--
内嵌样式，是直接写在HTML元素中的
-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>内嵌样式</title>
</head>
<body>
<h3 align="center">内嵌样式</h3>
<hr />
<p align="center" style="font-family:黑体;color:red;background:yellow;">
爆竹声中一岁除，春风送暖入屠苏。<br />
千门万户曈曈日，总把新桃换旧符。
</p>
</body>
</html>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
