实例
<!DOCTYPE html> <!-- 标注声明 -->
<html>
<head>
<title>PHP中文网——视频教程</title> <!-- 网页标题 -->
<meta charset="utf-8"> <!-- 字符编码 -->
<link rel="stylesheet" type="text/css" href="static/style.css"> <!-- 外联样式 -->
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png"> <!-- 标题图标 -->
<style type="text/css"> /*内部样式*/
body{background: green;}
a[href="http://www.baidu.com"]{color: yellow;}
#lei1{color: yellow;}
.lei{color: black;}
.lei img{width: 100px;height: 100px;} /*派生选择器*/
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div class="lei"><img src=""></div>
<div id="lei1"></div>
<div style="color: white;"></div> <!-- 内联样式 -->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
笔记
1.HTML选择器
body{} 标记选择器
#lei1{} ID选择器
.lei{｝ class选择器 {class的等级比ID低}
.a[]{} 表示属性选择器
.lei img{} 表示派生选择器
2.CSS层级关系
内部标签>内联标签>外联标签
