博主信息
博文 7
粉丝 0
评论 2
访问量 6765
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML一些常用的标签以及CSS样式和选择器—2018年8月11日15:36:57
Hito的博客
原创
976人浏览过
  • 前言:

昨天2018年8月10号晚上在PHP中文网上了第三期的培训的第一节课,讲师:灭绝师太!!!前端开发基础以前懂一些,现在听加强记忆,印象更深刻了,希望三个月后我也能成为“PHP大牛”

  • 回忆:

在HTML里,都是由一个个标签组成的,为了让HTML看上去更加好#看,漂亮,引入CSS样式表,引入CSS的三种方式,简单说明了css三种基本选择器,比较选择器的优先级。

实例

<!DOCTYPE html>	<!--注释    ctrl+/  -->
<html>
<head>  
	<!-- 定义网页头部 -->
	<title>php中文网</title>   
	<meta charset="utf-8">
	<!-- 外部样式:为了共享 -->
	<link rel="stylesheet" type="text/css" href="static/style.css">  
	<!-- 引入icon图标 -->
	<link rel="shortcut icon" type="image/x-icon" href="image/footlogo.png">  
	<!-- /*内部样式:只针对当前页面*/ -->
	<style type="text/css">				
	/*	tag标签名;id名(名字前加#,有唯一性);class名*/
		 /*标记选择器*/
		body{}
		/*id选择器*/
		#box{width: 100px;height: 100px;background: pink;} 
		/*class选择器 类选择器*/
		.main{width: 100px;height: 100px;background: green;}  
		a{color: pink;}
		a[href="https://www.7gao.net"]{color: red;}
		div a{color: #214411}
		/*测试id选择器和选择器优先级*/
		#yxj1{color: red;}
		.yxj2{color: blue;}
		.yxj3{color: red;}
		#yxj4{color: blue;}

	</style>
</head>
<body>   
 <!-- 优先级:内联样式(只针对当前标签)>内部样式>外部样式 style="background: blue;"-->
<!-- 
外部样式就是 外面马路上的公共厕所,谁都可以用
内部样式就是 合租房里的厕所,这个房子里的人都可以用
行内样式就是  独立厕所,只能房间里的你使用 
-->
<a href="https://www.baidu.com">百度</a>
<a href="https://www.7gao.net">去搞网</a>
<a href=""></a>
<div id="box">
	<a href="">php</a>
</div>
<div class="main"></div>
<div id="yxj1" class="yxj2">是id选择器还是类选择器优先级高呢?</div>
<div class="yxj3"  id="yxj4" >是id选择器还是类选择器优先级高呢?</div>
<div></div>
</body>
</html>

运行实例 »

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

2018-8-11.png

  • 点评:

在html中,通过标签以及相应的属性来实现不同的效果。

  • 手抄代码:

  IMG_0104.JPG

IMG_0105.JPG

  • 说明:

    手写一遍感觉还是不一样的,加强了记忆,对属性关键词还能好好记住,用编辑器提示写和手写真的完全两回事。

  • 总结:

1:代码手写一定要规范化,对自己对别人看你的代码都是由好处的,也方便以后出问题了找错。

2:优先级:内联样式(只针对当前标签)>内部样式>外部样式

3:优先级:id选择器>类选择器

4:遇到不懂的问题可以自己在编辑器上手动测试下,学编程多动手

5:id选择器再找的时候用 #  ,类选择器是用.

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
1条评论
灭绝师太 2018-08-11 16:42:12
非常详细啊……给你点赞对于 课程总结的也非常棒
1楼
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学