妙味课堂——HTML+CSS(第一课)
生活随笔
收集整理的這篇文章主要介紹了
妙味课堂——HTML+CSS(第一课)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
? ?一句話，還記憶不如爛筆頭，何況還這么笨，記下筆記，也是記錄這一路學(xué)習(xí)的過程。
? ?妙味課堂第一課并未一味地先講HTML，而是穿插著CSS講解，這一點不同于一些其他視頻，這一點挺特別的！所以這一課涉及到HTML的知識，也并未多講，倒是CSS中的內(nèi)容講的比較多。記錄如下：
- HTML(Hypertext Markup Language)——超文本標(biāo)記語言（結(jié)構(gòu)）
- css(Cascading Style Sheets)——層疊樣式表（樣式）
- js(javascript)―― 行為
? ?為了更快地初步了解這三種語言，給出我的第一個頁面：
<!DOCTYPE html> <html> <head><meta charset="UTF-8" /><title>標(biāo)題 - title</title> </head> <body>內(nèi)容 - content<div onclick="this.style.width = '800px'; this.style.height = '400px';" style="width: 100px; height: 100px; transition: 1s; border: 8px solid red; background: url(http://www.52ij.com/uploads/allimg/160317/003T95164-3.jpg);">aaaa</div> </body> </html>? ?效果(用文字表示)：點擊圖片，過渡1s，圖片循循展開。(由于是一個動態(tài)效果圖，所以小白不知道該怎么表示出)
? ?下面初略說明(涉及到CSS和JavaScript的部分后面會說明，在此不贅述)：
? ?<div>——標(biāo)簽
? ?<div></div>——標(biāo)簽對
? ?單標(biāo)簽：直接在后面斜杠結(jié)束的標(biāo)簽叫做單標(biāo)簽。
<!DOCTYPE HTML> !: 聲明 注意 doc document 文檔 type 類型 即聲明文檔類型為HTML <meta charset="utf-8"/> 代碼編碼格式，通俗點說就是告訴瀏覽器我是按照什么編碼的? ?
? ?樣式表出現(xiàn)的位置
? ?1、行間樣式，如
<div style="……"></div>? ?例，特別說明HTML文件的注釋是<!-- ?-->
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div style="width: 400px; height: 200px; background: blue;">塊</div>一個塊，寬度是300像素高度200像素背景是紅色；<div style="width: 300px; height: 200px; background: red;"></div>行間樣式<!-- html注釋 --> </body> </html>2、內(nèi)部樣式，如
<style>…………</style>例，特別說明CSS中的注釋是/* ? */
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box {width: 400px;height: 200px;background: blue;}/*內(nèi)部樣式表*//*css注釋*/</style> </head> <body><div id="box">塊</div> </body> </html>? ?3、外部樣式，如
<link rel="stylesheet" type="text/css" href="style.css">? ?例，
? ?樣式位置-外部1.html：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="./style.css"> </head> <body><div id="box">塊</div>數(shù)碼 </body> </html>? ?樣式位置-外部2.html：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="./style.css"> </head> <body><div id="box">塊</div>汽車 </body> </html>? ?style.css：
#box {width: 400px;height: 200px;background: blue; }? ?
? ?下面詳解一些常見樣式
| 屬性 | 屬性值 |
| width | 寬度 |
| height | 高度 |
? ?常見樣式 一 background
| background | 背景 |
| background-attachment | fixed(背景是否滾動) |
| background-color | red.....(背景顏色) |
| background-image | url(icon.gif)(背景圖片) |
| background-position | center (top)0px(左右居中，上下居頂)/10px(X軸) 50px(Y軸) (背景圖位置) |
| background-repeat | no-repeat(背景圖不重復(fù))/repeat(背景圖重復(fù)，鋪滿整個盒子)/repeat-x(背景圖片橫向重復(fù))/repeat-y(背景圖縱向重復(fù)) |
? ?background其實是一個復(fù)合屬性，一個屬性多個屬性值。我們不必一個個寫出以上這些屬性，可以一次就寫出包含多個屬性的代碼，如又能這樣寫(順序無關(guān)緊要)：
background: url(bg.jpg) center top no-repeat gray fixed;? ?例，
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box {width: 500px;height: 200px;background: blue url(icon.gif) no-repeat center center;}#bg {height: 1500px;background: url(bg.jpg) center top no-repeat gray fixed;}</style> </head> <body id="bg"><div id="box"></div> </body> </html>? ?我們會發(fā)現(xiàn)向下滑的過程中，背景圖片bg.jpg是固定不懂的，就是因為使用了background-attachment=fixed的緣故。
? ?常見樣式 一 border
| border | 邊框 |
| border-width | 1px(邊框?qū)挾? |
| border-color | red...(邊框顏色) |
| border-style | solid(實線)/dashed(虛線)/dotted(點線)（注意IE6不兼容） |
? ?border也是一個復(fù)合屬性，我們同樣可以如下寫：
border: 1px dotted green;? ?讓我們看看一個盒子(盒子模型)的邊框構(gòu)成：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box {width: 100px;height: 100px;border-top: 100px solid red;border-right: 100px solid green;border-bottom: 100px solid blue;border-left: 100px solid yellow;}</style> </head> <body><div id="box"></div> </body> </html>? ?運(yùn)行效果圖：
? ?
? ?如果盒子中的高度和寬度都設(shè)置為0，那么可以看到如下圖所示的效果，似乎我們可以做出七巧板的東西。
? ?
? ?常見樣式 一 padding
? ?內(nèi)邊距相當(dāng)于給一個盒子加了填充厚度會影響盒子大小。
? ?注意：盒子的width和height并不是整個盒子的大小，可以認(rèn)為是盒子里面能放東西的部分(即容積)。
? ?關(guān)于內(nèi)邊距與外邊距，我已經(jīng)在另一篇文章中HTML CSS——margin與padding的初學(xué)記錄過，在此不贅述，只給出一個例子：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box {width: 340px;height: 240px;/*寬和高不是整個盒子的大小，可以認(rèn)為是盒子里面能放東西的部分(即容積)*/border: 1px solid black;/*padding-top: 30px;padding-right: 30px;padding-bottom: 30px;padding-left: 30px;*/padding: 30px;}</style> </head> <body><div id="box">塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距塊內(nèi)邊距</div> </body> </html>? ?常見樣式 一margin
? ?外邊距的問題：
? ?例，上下外邊距會疊壓：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box1 {width: 500px;height: 300px;background: blue;margin-bottom: 30px;}#box2 {width: 300px;height: 100px;background: yellow;margin-top: 30px;}</style> </head> <body><div id="box1"></div><div id="box2"></div> </body> </html>? ?
? ?例，父子級包含的時候子級的margin-top會傳遞給父級（內(nèi)邊距替代外邊距）
? ?需求：id為box2的<div>距離id為box2的<div>
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box1 {width: 500px;height: 300px;background: blue;}#box2 {width: 300px;height: 100px;background: yellow;margin-top: 100px;}</style> </head> <body><div id="box1"><div id="box2"></div></div> </body> </html>? ?
? ?內(nèi)邊距替代外邊距后：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box1 {width: 500px;height: 300px;background: blue;padding-top: 100px;}#box2 {width: 300px;height: 100px;background: yellow;}</style> </head> <body><div id="box1"><div id="box2"></div></div> </body> </html>? ?
? ?發(fā)現(xiàn)盒子的大小發(fā)生變化，要想一樣，必須高度-100px
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box1 {width: 500px;height: 200px;background: blue;padding-top: 100px;}#box2 {width: 300px;height: 100px;background: yellow;}</style> </head> <body><div id="box1"><div id="box2"></div></div> </body> </html>? ?
? ?關(guān)于auto在margin中的應(yīng)用：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box2 {width: 300px;height: 100px;background: yellow;margin-left: auto;/*計算右邊的距離，統(tǒng)統(tǒng)都塞給左邊*/}</style> </head> <body><div id="box2"></div> </body> </html> <!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box2 {width: 300px;height: 100px;background: yellow;margin-right: auto;}</style> </head> <body><div id="box2"></div> </body> </html> <!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box2 {width: 300px;height: 100px;background: yellow;margin: 0 auto;}</style> </head> <body><div id="box2"></div> </body> </html>? ?常見樣式 —文本設(shè)置
| font-size | 12px/14px/16px文字大小（一般均為偶數(shù)） |
| font-family? | 字體（中文默認(rèn)宋體） |
| color | 文字顏色(英文、rgb、十六位進(jìn)制色彩值) |
| line-height | 行高 |
| text-align | center/right/left(文本對齊方式) |
| text-indent? | 首行縮進(jìn)(em縮進(jìn)字符) |
| font-weight | 文字著重 |
| font-style | 文字傾斜 |
| text-decoration | 文字修飾 |
| letter-spacing? | 字母間距(可為負(fù)值，-10px) |
| word-spacing? | 單詞間距(以空格為解析單位) |
? ?例，
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box {width: 500px;height: 300px;border: 1px solid black;margin: 90px auto;font-size: 16px;font-family: 宋體;/*color: #a51a3b;*/color: rgb(165,26,59);line-height: 30px;text-align: left;text-indent: 2em;/*首行縮進(jìn)兩個字*/font-weight: normal;font-style: normal;text-decoration: none;/*letter-spacing: -10px;*/word-spacing: 30px;}</style> </head> <body><div id="box">塊文本設(shè)置塊 go ogle 文本設(shè) su n 置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置塊文本設(shè)置塊文本設(shè)置文本設(shè)置</div> </body> </html>??? ?下面圖示行高(line-height)
? ?
? ?
轉(zhuǎn)載于:https://www.cnblogs.com/yerenyuan/p/5347364.html
總結(jié)
以上是生活随笔為你收集整理的妙味课堂——HTML+CSS(第一课)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Swift 初见（A Swift Tou
- 下一篇： 第八次课作业（采购管理、信息与配置管理）