Blogger Information
Blog 36
fans 0
comment 0
visits 28493
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML的一些标签及CSS选择器使用的总结——2018年8月10日22时8分
Jackson
Original
738 people have browsed it

第一天的学习,主要就是了解了网页的基本构成。其实网页都是由很多标签和纯文本组成的,并且给这些标记添加了各种各样的css样式,这样就使得整个页面变得漂亮了。而这些标记和样式都有其使用的方式,可以通过以下的实例来了解其基本的使用方法。

实例

<!-- 写代码要用英文输入法,避免符号出错 -->
<!DOCTYPE html><!-- 声明文档类型 -->
<html>
<head><!-- 定义网页的头部,包括网页标题、字符编码及外部文件的引入等 -->
	<title>php中文网</title>
	<meta charset="utf-8"><!-- 网页的字符编码 -->
	<link rel="stylesheet" type="text/css" href="static/style.css">
	<!-- 引入外部的css样式文件 外部样式:为了共享 -->
	<link rel="shortcut icon" type="image/x-icon" href="images/phplogo.jpg"><!-- 在title里放入图片 -->
	<style type="text/css">/*内部样式:只对当前页面有效
	    有标记名、class名、id名、属性选择器等*/
	    body{background:white;}/*标记选择器*/
        #box{width:100px;height:100px;background:green;}
        .main{width:100px;height:100px;background:purple;} /*class 类选择器*/

        a{color:red;}
        /*属性选择器*/
        a[href="http://www.baidu.com"]{color:blue;}
        a[href="http://www.php.cn"]{color:pink;}
        /*派生选择器*/
        div a{color:orange;}

	</style>
</head>
<body ><!-- 网页的主体部分 内联样式style="background:red;"-->

<img src="" >
<a href="http://www.baidu.com">百度</a><!-- 连接到百度 -->
<a href="http://www.php.cn">php中文网</a><!-- 连接到php中文网 -->
<a href="demo2.html">#</a><!-- 连接到外部文件 -->

<div id="box">
    <a href="">php</a>
</div>
<div class="main"></div>
<div></div>

</body>
</html>

运行实例 »

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

8.10.png

代码总结:

  • 标签有单标签和双标签,单标签是显示某个功能,双标签是修饰内容的,一对标签称作元素,单标签为空元素。

  • id选择器:#id名{} ,自定义的标记的id名,id只有一个。

  • class选择器:。类名{} ,自定义标记的类名,类名可以有多个。

  • 优先级:id选择器>class选择器>标记选择器

  • 样式优先级:内联样式》内部样式》外部样式

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