Blogger Information
Blog 34
fans 0
comment 1
visits 23061
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML标签和CSS选择器—2018年8月10日23时45分
感恩的心的博客
Original
965 people have browsed it
学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

 


1、实例

<!DOCTYPE html>  <!-- 声明 -->
<html>
<head>
	<title>php中文网-培训-感恩的心</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="static/style.css">
	<link rel="short icon" type="image/x-icon" href="images/footlogo.png">
	<style>
	/* tag标签名、id名、class名 */
	body{}
	#box{width:100px;height: 100px;background: pink;}/* id选择器 */
    .main{width: 100px;height: 100px;background: green;}/* class选择器 */
    a{color:red;}
    a[href="www.php.cn"]{color:blue;}
    a[href="demo2.html"]{color:pink;}
    div a{color:#000;}
	</style>
	
</head>
<body><!-- 内联样式 style="background:blue;" -->
<img src="">
<a href="https://www.baidu.com">百度</a>
<a href="http://www.php.cn">php中文网</a>
<a href="demo2.html">demo2</a>
	<div id="box">
		<a href="#">php</a>
	</div>
	<div class="main"></div>
	<div></div>
	<div></div>
	
</body>
</html>

运行实例 »

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



2、 手写作业262177722.jpg

3、本次课程总结:

  HTML head 元素:
<head>定义了文档的信息
<title>定义了文档的标题
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了脚本文件
<style>定义了HTML文档的样式文件

CSS类型选择器
CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器),可以向这种元素类型的每个实例上应用声明。
(1)CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲,可以使用CLASS属性来分类元素,在样式表中创建规则来引用CLASS属性的值,然后浏览器自动将这些属性应用到该组元素。
(2)ID属性的操作类似于CLASS属性,但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。
(3)STYLE属性的值实际上是一个或多个CSS声明。通常情况下,使用CSS,设计者将把所有的样式规则置于一个样式表中,该样式表位于文档顶部的STYLE元素内(或在外部进行链接)。
(4)组合选择器类型,可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。

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
1 comments
感恩的心 2018-08-13 17:43:57
第一次作业,加油!
1 floor
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!