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

程序员文章站 2022-02-27 07:33:41

...

代码

实例

<!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作业

上一篇：微信小程序登录-PHP后端

下一篇：微信小程序生成带参数的二维码以及小程序码