博客列表 >HTML基础及CSS选择器——2018年8月10日

HTML基础及CSS选择器——2018年8月10日

张铮的博客
张铮的博客原创
2018年08月13日 17:50:02584浏览

HTML文档结构是学习HTML的基础,总的来说,1.文档类型声明,2.头部,3.主体部分;

css中权限从高到底分为 内联样式>内部样式>外部样式

css选择器分为标记选择器,ID选择器,CLASS选择器,属性选择器,派生选择器

实例

<!DOCTYPE html><!-- xml xhtml 文档类型声明 --><!-- ctrl+/ 快速加注释-->
<html>
<head>
	<title>8月10日前端基础学习作业_张铮</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: pink}/*tag标签(标记)选择器*/
		#box{width: 100px;height: 100px; background: pink;}/*id名选择器,名字前加# */
		.main{width: 100px;height: 100px;background: green}/*class选择器,名字前加.*/
		a{color: red}
		a[href="http://www.php.cn/"]{color: white;}/*属性选择器*/
		div a{color: #000}/*派生选择器*/
	</style>
</head>
<body style='background: blue;'><!-- 内联样式,优先级最高 -->
	<img src=""><!-- 无内容标签 -->
	<a href=""></a><!-- 超链接标签 -->
	<a href="http://www.php.cn/">php中文网</a><!-- 超链接标签 -->
	<a href="#">#</a><!-- 超链接标签 -->
	<div id='box'>
		<a href="php.cn">PHP</a>
	</div>
		
	<div class="main"></div>

</body>
</html>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议