Blogger Information
Blog 34
fans 1
comment 0
visits 36170
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html中常用的标签属性及css的样式和常用的选择器总结--2018年8月11日17时15分
coolperJie
Original
872 people have browsed it

实例

<!DOCTYPE html> <!-- xml xhtml 网页的声明  注释的快捷键是ctrl+/ -->
<head><!-- 定义网页的头部信息 -->
	<title>php中文网</title><!-- 网页的名称 -->
	<meta charset="utf-8"><!-- 设置字符集编码 -->
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<!-- 链接外部css样式表 外部样式的用途是为了多个html可以共享同一个资源 -->
	<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png">
	<!-- 在标题内放入图片 -->
	<style type="text/css"> /*内部样式,只针对当前的页面有效*/
	/*tag标签名,id名(名字前边加#)class名(前边加.) 属性选择器*/
	body{}/*标记选择器*/
	#box{width: 100px;height: 100px;background: black;}/*id选择器*/
	.select{width: 100px;height: 100px;background: pink;}/*class选择器 又叫类选择器*/

	a{color: blue}/*属性选择器*/
	a[href="https://www.baidu.com"]{color: pink;}
	a[href="http://www.php.cn"]{color: green;}
	/*派生选择器 根据文档上下关系来定义样式*/

	div a{color: red;}/*选择div中的a标签颜色*/
	#box a{color: white;}
	</style>
</head>
<body style="align-content: center;"><!-- <body style="background: blue;">属于内联样式 -->
	<img src=""><br>
	<a style="text-decoration: none" href="https://www.baidu.com">百度一下</a><!-- 超链接到百度网址 -->
	<a style="text-decoration: none" href="http://www.php.cn">php中文网</a>
	<!-- 超链接到中文网网址 -->
	<a style="text-decoration: none" href="demo2.html">例二</a>
	<!-- 链接到外部文件夹的一些文件 -->
	<a style="text-decoration: none"href="#">#</a>
	<!-- 链接到外部文件 -->

	<div id="box">
		<a style="text-decoration: none" href="">php</a>
	</div>
	<div class="select"></div>
</body>

运行实例 »

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

zy.png

  • 点评:此代码主要对前面多学习的html的标签,属性和css的样式及选择器进行了代码实践,运行结果如上图所示。

  • 手抄代码:

    shouchao.png

    说明:通过手抄代码,进一步的加深了对代码的印象,一些细节也能进一步的巩固,加强记忆。

  • 总结:

  • (1)html是一种网页的语言又称为超文本标记语言,最基本主要包括标签、元素和属性,其中最重要的是各种属性的使用,通过大量的敲代码才能做到熟能生巧。

    (2)css的加入使得html页面更加的生动形象,今天的学习算是初始html+css,对css的样式种类以及优先级有了简单的了解其中优先级:内联样式>内部样式>外部样式,而内联样式只作用于当前的标签内,内部样式作用于当前的整个页面,外部样式可以同时作用于多个html页面。

    (3)css选择器我们这里只学习了集中常用的,包括标记选择器、id名选择器、类名选择器,属性选择器等,不同的选择器的用法稍微不同,但是他们的作用却是相同的,多个div标签中快速定位到对应的div标签。

    (4)超链接标签的使用也是非常的简单的,后边需要做的就是去掌握它的各种属性,比如如何去掉默认的下划线,a标签不仅能链接到网上的网址它还可以链接到外部的文件,只需要知道该文件的路径就轻松搞定。

    (5)第一天的收获还是蛮多的,学习是个持久活,坚持下去,相信自己!

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments