博客列表 >HTML标签和CSS选择器—2018年8月10日23时45分

HTML标签和CSS选择器—2018年8月10日23时45分

感恩的心的博客
感恩的心的博客原创
2018年08月26日 20:37:55964浏览
学习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选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。

上一条:php过滤空数组下一条:8月10日作业
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
感恩的心2018-08-13 17:43:571楼
第一次作业,加油!