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