博客列表 >html结构及css样式总结-210180810

html结构及css样式总结-210180810

NiceLiving的博客
NiceLiving的博客原创
2018年08月12日 09:42:05819浏览

测试代码:

<!DOCTYPE html> <!-- 标注类型为html文档类型 还有xml xhtml  -->
<html lang="en"> <!-- 英文页面 -->
<head>  <!-- 头部文件 -->
<meta charset="UTF-8"><!-- 字符集中国UTF-8 -->
<title>PHP-学习第一天</title><!--  网站标题 -->
<link rel="stylesheet" type="text/css" href="static/style.css"><!-- 引入外部样式 ,都可以调用(可共享)-->
<link rel="shortcut icon" type="image" href="image/ico.png"><!-- 网站图标 --> -->
<style type="text/css"> /*内部样式 只针对当前页面*/
body{background: yellow}/*tag标签选择器*/
#box{width:60px;height:50px;background: blue}/*id选择器 具有唯一性*/
.box1{width:60px;height:50px;background: green}/*类选择器*/
a{color: red;}
a[href="www.php.cn"]{color: cyan}/*属性选择器(多用于多个相同样式中单独样式的设置)*/
a[href="demo3.html"]{color: yellow}
div a{color: yellow} /*派生选择器*/
</style>
</head>
<body style="background: #fff"> <!-- 内联样式 -->
<a href="www.baidu.com">百度</a>
<a href="www.php.cn">php中文网</a>
<a href="demo3.html">demo3</a>
<div id="box">
<a href="">派生选择器</a>
</div>
<div></div>
<div></div>
</body>
</html>

运行结果:

20180811.jpg

手写代码:

1.png

2.png

总结:这节课,灭绝老师主要讲解了html结构,以及一些css样式,sublime编辑器的安装,插件的安装。网页的标题的实现,网页图标的实现,引入外部样式(可共享),内部样式的编写,内联样式的编写。三者的优先级:内联>内部>外部。还介绍了几个属性选择器:tag标签选择器、id选择器(唯一性)、class类选择器、属性选择器、派生选择器等。

快速注释快捷键:ctrl+/ 

元素的概念:成对标签 即元素  单标签即空元素


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议