type= " text/css " rel= "stylesheet" href= "lounge.css" media="screen and (min-width:481px)"> 要記住，這個元素告訴瀏覽器查找一個名為 “lounge.css”的外部樣式表，當分辨率寬度大于480像素，使用這個CSS。

@media screen and (min-device-width : 481px) {
#guarantee {
margin-right : 250px
}
}
如果設備屏幕寬度大于480px就會使用這些規則

font-family : Verdana , Geneva , Arial , sans-serif (字體樣式)
用于web的字體系列包括serif , sans-serif , monospace , cursive和fantasy。serif和sans-serif字體最為常用。

font-size : small (有 xx-small , x-small , small , medium , large , x-large , xx-large 順序從小到大)

14px

100% (100%大小沒有變化)

1.0em (1.0表示比例沒有變化)
使用相對字體大小可以讓你的頁面更可維護。
以上是改變字體大小

font-weight : normal (有lighter , normal , bold , bolder 順序由細到粗,一般加粗用bold，normal是取消加粗)

font-style: italic (斜體文本，并不是所有字體都支持斜體風格(italic)，所以你得到的實際上稱為傾斜(oblique)文本。)

font簡寫，font : font-style font-variant font-weight font-size/line-height font-family

color: red (字體為紅色)

@font-face {
font-family: Emblema One;
src: url(“http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff”),
url(“http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf”)
}這個一般放在開頭，從url下載字體，然后命名為Emblema One
如果你要使用某種字體，而默認情況下用戶可能沒有安裝這種字體，可以在CSS中使用@font-face規則。

text-decoration : none (none取消裝飾 , underline下劃線 , overline上劃線 , line-through有一個從文本中間穿過的線 )
text-align : center
(文本排列，center文本居中，left文本左對齊，right文本右對齊)

line-height : 1.6em(行高) (normal允許瀏覽器選擇一個適當的行高大小，通常要根據字體來確定)

border-color : black;
border-width : 1px; (可以使用關鍵字thin, medium或thick指定邊框寬度，或者用像素數指定。)
border-style : solid;
要指定一個邊框樣式，只需要使用border-style屬性，并提供一下某個樣式值。
solid(實線) dotted(虛線) double(雙線) dashed(破折線) groove(槽線) inset(內凹) outset(外凸) ridge(脊線)
border-radius : 15px (可以在四個角上都創建圓角，或者只對一個角或這4個角的任意組合創建圓角。)
border是邊框，以上是邊框設置

background-color: red (將背景顏色設置為紅色 )
background-image : url (images/background.gif)
background-image屬性設置為一個URL，這可以是一個相對路徑，也可以是一個完整的URL(http://***)

background-position : top left ;
background-position屬性會設置圖像的位置，可以按像素指定，也可以指定為一個百分數，或者還可以使用關鍵字指定，如top , left , right , bottom和center.

background-: no-repeat;
background-repeat默認的，背景圖會“平鋪”，也就是反復反復來填滿整個背景空間,屬性可以控制這種平鋪行為。(no-repeat圖像顯示一次，根本不重復; repeat-x圖像只在水平方向上重復; repeat-y圖像只在垂直方向上重復; inherit按父元素的設置來處理。)

內邊框：padding:25px
外邊框：margin:25px

a : link {
color : grenn;
}
這個選擇器應用于處于未訪問狀態的鏈接

a : visited {
color : red;
}
這個選擇器應用于已訪問的鏈接

a : hover {
color : yellow;
}
懸停在一個鏈接上時會應用這個選擇器

!important(優先級)

float : right (文本右浮動)

text-decoration: none (超鏈接去下橫線)

border-spacing:10px (表格中的單元格增加10像素的邊框間距)

vertical-align:top; (top表格文字垂直對齊，midle中間對齊，bottom底端對齊)

position : relative (absolute絕對定位，relative相對定位，fixed固定定位，static靜態定位)

section(如果要增加一個元素來標記一些內容，指示這是由相關內容構成的一個結構明確的區塊。)

article(用于類似博客帖子、論壇帖子和新聞報道等獨立的內容)

的內容可用作文章的側欄

list-style-type: none (Disc是默認的列表標記類型，circle屬性值提供一個簡單的圓形標記，square屬性值提供一個方塊標記，none刪除列表項的項目符號)(允許改變列表中使用的列表標記類型)

list-style-image (允許指定列表標記的圖像)

poster (如果愿意，可以提供一個可選的海報圖像，視頻未播放時就會顯示這個海報)

controls (video播放控件)

source src="…" (瀏覽器從上往下查找，直到找到它能播放的一種格式)

border-collapse: collapse (是針對表格的一個特殊的CSS屬性，允許將單元格邊框合并為一個邊框)

nth-child (偽類可以為表格隔行增加背景顏色)

first-child（第一個元素）

rowspan/colspan (占行/占列)

文本輸入 <input type="text" name="fullname">

元素用于輸入一行文本。它還有一些可選的屬性，允許你為這個控件設置最大字符個數和寬度。
"type"指示你希望得到一個“文本”輸入。
"fullname"大多數表單元素都需要一個名字，服務器腳本將使用這個元素名。

提交輸入 <input type="submit" value="Order Now">

元素會創建一個按鈕，允許你提交表單。點擊這個按鈕時，瀏覽器會把表單發送到服務器腳本進行處理。
"submit"提交按鈕要指定"submit"作為元素的type屬性值。
"value"用于自定義提交名字。

單按鈕輸入 <input type="radio" name="hotornot" value="hot"> <input type="radio" name="hotornot" value="not">

"radio"元素會創建包含多個按鈕的控件，但是一次只能選擇其中一個按鈕。這就像老式的汽車電臺按鈕，“按下”一個按鈕，其余的按鈕就會“彈起”。
"name"與一組給定選項關聯的單選鈕必須有相同的名字。
"value"不過每個選項可以有不同的值。
如果單按鈕輸入元素增加一個布爾屬性“checked”，瀏覽器顯示表單時就會默認地選中這個元素。
布爾屬性不需要值，如果有屬性checked，這個輸入控件就會選中。

復選框輸入 <input type="checkbox" name="spice" value="Salt"> <input type="checkbox" name="spice" value="Pepper"> <input type="checkbox" name="spice" value="Garlic">

"checkbox"元素會創建一個復選框控件，可以選中也可以不選中。多個復選框可以放在一起，如果是這樣，你可以根據需要選中多個選項。
"checkbox"類似于單選鈕，對各個選項使用相同的checkbox元素。
"spice"相關的復選框也共用一個名字。
"value"每個復選框有一個不同的值。

文本區 <textarea name="comments" rows="10" cols="48"></textarea>

"textarea"元素會創建一個多行的文本區，可以在其中輸入多行文本。如果輸入的文本在文本區中放不下，右邊還會出現一個滾動條。
使用name屬性為元素指定一個唯一的名字。
rows屬性告訴瀏覽器文本區高度為多少個字符。
cols屬性告訴瀏覽器文本區寬度為多少個字符。
開始和結束標記之間的所有文本會成為瀏覽器文本區控件中的初始文本。

select <select name="characters"><option value="Buckaroo">Buckaroo Banzai</option><option value="Tommy">Perfect Tommy</option><option value="Penny">Penny Priddy</option><option value="Jersey">New Jersey</option><option value="John">John Parker</option> </select>

"select"元素會在Web頁面中創建一個菜單控件。菜單提供了一種從一組選項中做出選擇的方法。"select"元素與下面的"option"元素結合使用可以創建一個菜單。
name屬性為select元素指定一個唯一的名字。
只需加入multiple屬性，就把一個單選菜單變成了多選菜單。

option <select name="characters"><option value="Buckaroo">Buckaroo Banzai</option><option value="Tommy">Perfect Tommy</option><option value="Penny">Penny Priddy</option><option value="Jersey">New Jersey</option><option value="John" selected>John Parker</option> </select>

“option”元素與"select"元素結合使用可以創建菜單。使用“option”元素來表示各個菜單項。
“option”元素的內容用作為菜單項的描述。每個菜單選項還可以包含一個表示這個菜單項的值。
selected表示默認選中

數字輸入 <input type="number" min="0" max="20">

number會限制只能輸入數字。甚至還可以用可選的屬性指定這個元素允許的最小數和最大數。
type為"number"表示你只希望輸入數字，而不是文本。
使用max和min屬性來限制允許輸入的數字。

范圍輸入 <input type="range" min="0" max="20" step="5">

range類似于number，只是它會顯示一個滑動條，而不是一個輸入框。
number和range都有一個可選的step屬性，可以用來指定值的間隔數（步長）。

顏色輸入 <input type="color">

使用color可以指定一個顏色。單擊這個控件時，會彈出一個顏色選擇器，允許你選擇一個顏色，而不必輸入顏色名或值。
如果瀏覽器不支持顏色輸入元素，你會得到一個常規的文本輸入控件。

日期輸入 <input type="date">

使用date，可以利用一個日期選擇控件指定日期。這個控件會創建一個合法的日期格式串，發送到服務器腳本。

email輸入 <input type="email">

email就是一個文本輸入元素，只不過在一些移動瀏覽器上，開始輸入email時你會得到一個方便輸入email的定制鍵盤。

tel輸入 <input type="tel">

tel也只是一個文本輸入元素，不過與email類似，它會在一些移動設備上彈出一個定制鍵盤。

url輸入 <input type="url">

與email和tel類似，url也只是一個文本輸入元素，不過會在一些移動設備上彈出一個定制鍵盤。

<input type="file" name="doc">

這個元素會創建一個文件輸入控件，允許你選擇一個文件，表單提交時，文件的內容會隨其余的表單數據一同發送給服務器。使用這個元素的前提時必須使用POST方法。

<input type="text" placeholder="Buckaroo Banzai">

placeholder屬性允許你提供一個提示，使用戶了解你希望表單的這一部分需要怎樣的內容。

<input type="text" placeholder="Buckaroo Banzai" required>

required屬性指示一個輸入域是必要的，要讓表單成功提交，這個輸入域中必須有值。

<input type="button">

button值表示定義可點擊按鈕

<label for="wenben">用戶名</label> <input type="text" id="wenben">

label標簽為input元素定義標注
label標簽用于綁定一個表單元素，當點擊label標簽內的文本時，瀏覽器就會自動將焦點（光標）轉到或者選擇對應的表單元素上，用來增加用戶體驗

input標簽除type外，還有其他很多屬性，其常用屬性如下：
name 定義input元素的名稱
value規定input元素的值
checked規定此input元素首次加載時應當被選中，是布爾屬性


多行文本溢出顯示省略號

總結

以上是生活随笔為你收集整理的HTML+CSS自学笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。