博主信息
博文 34
粉丝 0
评论 1
访问量 29108
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML标签和CSS选择器—2018年8月10日23时45分
感恩的心的博客
原创
1133人浏览过
学习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选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
1条评论
感恩的心 2018-08-13 17:43:57
第一次作业,加油!
1楼
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

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