欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML基础结构及CSS选择器8.10作业

程序员文章站 2022-03-03 10:19:05
...

代码 

实例

实例

<!DOCTYPE html><!-- 声明文档类型的作用   -->
<html>
<head><!-- 定义网页头部 -->
	<title>html第一课</title><!-- 定义网页标题 --><!-- 双标签 -->

	<meta charset="utf-8"><!-- charset 定义字符集 --><!-- 不敲上有些浏览器不识别中文 -->

	<link rel="stylesheet" type="text/css" href="static/style.css"><!-- link引入外部文件 --><!-- rel定义当前文档与被链接文档关系 --><!-- type定义外部文档类型 --><!-- href定义外部文档网址或本地地址 -->   <!-- 外部样式 为了共享 -->

	<link rel="shortcut icon" type="image/x-icon" href="images/logo.png">

	<style type="text/css">/*内部样式 只对当前页面*/
         /*tag标签名  ID  class*/  /*属性选择器*/

		body{width: 200px;height: 200px;background: red;}/*内部样式举例 添加背景色*/  /*标记选择器不用加符号*/

		#box{width: 200px;height: 200px;background: pink;}/*ID名字前加#号选中*//*ID名是维一的*/

		.main{width: 200px;height: 200px;background:green;}/*class名字前加. 选中*/

		a{color: green;}/*标记所以a标签颜色*/
		a[href="http:www.php.cn"]{color: pink;}/*属性选择器*/

		div a{color:#000;}
		#box a{color:red;}/*属性选择器*/

	</style>
</head>
<body ><!-- 内联样式针对当前标签   --><!-- 分优先级 外部小于内部小于内联 --><!-- style="background: blue;" -->
<img src="">
<a href="https://baidu.com">百度</a>

<a href="http://www.php.cn">PHP中文网</a>

<a href="https://www.taobao.com">淘宝</a>

<a href="https://mail.qq.com">QQ邮箱</a>

<div id="box">
	<a href="http://www.php.cn">php</a>
</div>
<div class="main">
        <a href="http://www.php.cn/code/27881.html">CSS</a>
        <a href="http://www.php.cn/code/27882.html">css</a>
</div>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结

HTML是元素标签  有双标签 及 单标签

ID唯一性 命名不能重复  calss 命名无此限制

外部样式 为了共享

内部样式 只对当前页面

内联样式针对当前标签

优先顺序是外部样式小于内部样式小于内联样式


HTML基础结构及CSS选择器8.10作业HTML基础结构及CSS选择器8.10作业