HTML -超文本标记语言- 结构
CSS - 层叠样式表 - 样式
JS -脚本语言 - 行为
Sublime text 快捷键
新建文档 ctrl+n
保存文档 ctrl+s
返回上一步 ctrl+z
位移快捷键 ctrl+[ 或者 ctrl+]
注释 ctrl+/
关闭文件 ctrl+w
HTML基础结构
-
html父元素,head/body 子元素
-
父子关系要用tab换行,兄弟关系要处于同一列
<!-- 文档头（类型）声明 -->
<!DOCTYPE html>
这行命令告诉浏览器我们要书写html文档了
文档类型是HTML5
注意：不是标签
<!-- 根元素 -->
<html>
<!-- 头部 -->
<head>
<!-- title:定义页面（文档）标题 -->
<title> wu </title>
<!-- meta:定义页面的元数据
属性：
charset ：针对搜索引擎和解析格式的属性
-->
<meta charset="utf-8">
</head>
head内部包含的内容绝大部分是不可见的，主要是用来辅助页面的功能
<!-- 身体 -->
<body> </body>
body内部绝大部分都是可见的，主要是用来搭建HTML结构
</html>
HTML内容要全部书写在根元素当中
CSS的引入（掌握）
与
CSS的选择器（重点）
- 内联样式表
- 内部样式表(三种选择器)：多用Class， 少用ID。
* 标签选择器
*类选择器
*ID选择器
- 外部样式表
内联样式表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
第一种 :内联样式表
直接写在标签的内部
CSS基础语法
属性名： 属性值；
（width->宽度）
（height->高度）
（background-color->背景颜色）
（px:像素）
-->
<div style="
width: 300px;
height: 300px;
background-color: red;
"></div>
</body>
</html>
<div></div> 语义：无意义
内部样式表-标签名选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 第二种：内部样式表
需要书写在head标签的内部 -->
<style >
/* CSS选择器 */
/*1:标签名选择器* (作用范围：所有的“同标签”) */
div{
width: 300px;
height: 300px;
background-color: black;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
内部样式表-类选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style >
/*2:类选择器 （作用范围：所有同类名的标签，类选择器可以被多个标签同时使用） */
.a{
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="a"><div>
</body>
</html>
内部样式表-ID选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style >
/*3:ID选择器 （作用范围：具有这个ID名称的唯一标签，ID选择器只允许作用在一个标签上 */
#div_1{
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div id ="div_1"></div>
</body>
</html>
外部样式表：
需要另外创建style.css在css文件名下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 3.外部样式表
需要书写在head标签的内部
(rel ->关系)
(stylesheet->样式表)
(type-> 类型)
(href->链接的路径)
-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- href="../css/style.css" -->
</head>
<body>
<div></div>
</body>
</html>
style.css
div{
width: 300px;
height: 300px;
background-color: black;
}
选择器优先级： 谁控制的越精确，谁的优先级就越高
- 标签名：整个标签
- 标签名：相同的类型
- ID： 一个ID名称
内联样式表>ID选择器>类选择器>标签名选择器
引入方式的优先级：
- 当选择器的优先级相同的时候，谁后加载谁生效。
- 当选择器的优先级不同的时候，谁的优先级越高，谁生效。
内联>内部样式表？外部样式表
网友评论