实例
<!DOCTYPE html> <!-- 文档申明 html5 -->
<html>
<head>
<title>这是第一节课的标题</title> <!-- 标题 -->
<meta charset="utf-8"><!-- 编码格式 -->
<link rel="stylesheet" type="text/css" href=""> <!-- 外部样式 -->
<!-- rel 定义当前文档跟链接文档的关系 -->
<!-- type - 引入样式类型 -->
<!-- href - 引入文件地址 -->
<link rel="shortcut icon" type="image/x-icon" href="http://www.iqiyipic.com/common/images/logo.ico"> <!-- 引入图标 -->
<!-- 内部样式 -->
<style type="text/css">
/* 命名类型 tag标签名 id名 class名 属性选择器*/
body{width: 500px; height: 500px; background: blue;} /*标签选择器*/
.box{width: 500px; height: 500px; background: red;} /*类选择器*/
#box { width: 500px; height: 500px; background: green; } /*ID选择器 */
a[href="http://www.baidu.com"]{width: 500px; height: 500px; background: yellow;} /*属性选择器*/
.box a{ width: 500px; height: 500px; background: pink; } /*子父级选择器 PS 表示选择 box类下面的所有a标签元素样式*/
</style>
<!-- <单标签 开头无结尾 双标签 开头加结尾 > -->
</head>
<body style="background: pink;"> <!--内联样式--> <!--基本顺序 外部<内部<内联-->
<!-- 选择器的应用 -->
<div id="box">
<a href="http://www.baidu.com">百度</a>
</div>
<div class="box">
<a href="http://www.php.cn">中文网</a>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
