HTML -超文本標(biāo)記語(yǔ)言- 結(jié)構(gòu)
CSS - 層疊樣式表 - 樣式
JS -腳本語(yǔ)言 - 行為
Sublime text 快捷鍵
新建文檔 ctrl+n
保存文檔 ctrl+s
返回上一步 ctrl+z
位移快捷鍵 ctrl+[ 或者 ctrl+]
注釋 ctrl+/
關(guān)閉文件 ctrl+w
HTML基礎(chǔ)結(jié)構(gòu)
html父元素,head/body 子元素
父子關(guān)系要用tab換行,兄弟關(guān)系要處于同一列
<!-- 文檔頭（類(lèi)型）聲明 -->
<!DOCTYPE html>
這行命令告訴瀏覽器我們要書(shū)寫(xiě)html文檔了
文檔類(lèi)型是HTML5
注意：不是標(biāo)簽
<!-- 根元素 -->
<html>
<!-- 頭部 -->
<head>
<!-- title:定義頁(yè)面（文檔）標(biāo)題 -->
<title> wu </title>
<!-- meta:定義頁(yè)面的元數(shù)據(jù)
屬性：
charset ：針對(duì)搜索引擎和解析格式的屬性
-->
<meta charset="utf-8">
</head>
head內(nèi)部包含的內(nèi)容絕大部分是不可見(jiàn)的价说，主要是用來(lái)輔助頁(yè)面的功能
<!-- 身體 -->
<body> </body>
body內(nèi)部絕大部分都是可見(jiàn)的远荠，主要是用來(lái)搭建HTML結(jié)構(gòu)
</html>
HTML內(nèi)容要全部書(shū)寫(xiě)在根元素當(dāng)中
CSS的引入（掌握）
與
CSS的選擇器（重點(diǎn)）
- 內(nèi)聯(lián)樣式表
- 內(nèi)部樣式表(三種選擇器)：多用Class， 少用ID棕硫。
* 標(biāo)簽選擇器
*類(lèi)選擇器
*ID選擇器
- 外部樣式表
內(nèi)聯(lián)樣式表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
第一種 :內(nèi)聯(lián)樣式表
直接寫(xiě)在標(biāo)簽的內(nèi)部
CSS基礎(chǔ)語(yǔ)法
屬性名： 屬性值骏庸；
（width->寬度）
（height->高度）
（background-color->背景顏色）
（px:像素）
-->
<div style="
width: 300px;
height: 300px;
background-color: red;
"></div>
</body>
</html>
<div></div> 語(yǔ)義：無(wú)意義
內(nèi)部樣式表-標(biāo)簽名選擇器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 第二種：內(nèi)部樣式表
需要書(shū)寫(xiě)在head標(biāo)簽的內(nèi)部 -->
<style >
/* CSS選擇器 */
/*1:標(biāo)簽名選擇器* (作用范圍：所有的“同標(biāo)簽”) */
div{
width: 300px;
height: 300px;
background-color: black;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
內(nèi)部樣式表-類(lèi)選擇器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style >
/*2:類(lèi)選擇器 （作用范圍：所有同類(lèi)名的標(biāo)簽讳窟，類(lèi)選擇器可以被多個(gè)標(biāo)簽同時(shí)使用） */
.a{
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="a"><div>
</body>
</html>
內(nèi)部樣式表-ID選擇器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style >
/*3:ID選擇器 （作用范圍：具有這個(gè)ID名稱(chēng)的唯一標(biāo)簽，ID選擇器只允許作用在一個(gè)標(biāo)簽上 */
#div_1{
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div id ="div_1"></div>
</body>
</html>
外部樣式表：
需要另外創(chuàng)建style.css在css文件名下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 3.外部樣式表
需要書(shū)寫(xiě)在head標(biāo)簽的內(nèi)部
(rel ->關(guān)系)
(stylesheet->樣式表)
(type-> 類(lèi)型)
(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;
}
選擇器優(yōu)先級(jí)： 誰(shuí)控制的越精確敞恋，誰(shuí)的優(yōu)先級(jí)就越高
- 標(biāo)簽名：整個(gè)標(biāo)簽
- 標(biāo)簽名：相同的類(lèi)型
- ID： 一個(gè)ID名稱(chēng)
內(nèi)聯(lián)樣式表>ID選擇器>類(lèi)選擇器>標(biāo)簽名選擇器
引入方式的優(yōu)先級(jí)：
- 當(dāng)選擇器的優(yōu)先級(jí)相同的時(shí)候，誰(shuí)后加載誰(shuí)生效谋右。
- 當(dāng)選擇器的優(yōu)先級(jí)不同的時(shí)候硬猫，誰(shuí)的優(yōu)先級(jí)越高，誰(shuí)生效改执。
內(nèi)聯(lián)>內(nèi)部樣式表啸蜜？外部樣式表
