<!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>
点击 "运行实例" 按钮查看在线实例