初探css,了解個大概，本文主要是對"zhaolion: CSS入門筆記 － 初識CSS"的簡要記錄
CSS的好處
－ 避免重復(fù)
－ 更容易維護(hù)
－ 為不同的目的，使用不同的樣式而內(nèi)容相同
基本用法
ｈ1 {color:red;font-size:14px}
選擇器｛聲明１（屬性：值）; 聲明２｝
CSS樣式的引入
- 內(nèi)嵌式
- 嵌入式
- 外部式
- 三種方式優(yōu)先級
內(nèi)嵌式
<p style="color:red">這里的文字為紅色</p>
嵌入式
一般嵌在<head></head>標(biāo)簽內(nèi)
<head>
<style type="text/css">
p{
color:red
}
</style>
</head>
外部式
獨立一個類似"main.css"的文件存儲一些基本信息
p {color:red;}
a {color:green;}
...
然后在<head>標(biāo)簽內(nèi)引入
<head >
<link href="main.css" rel="stylesheet" type="text/css">
</head>
三種引入方式的優(yōu)先級
內(nèi)嵌式＞嵌入式＞外部式
另外：如果嵌入式和外部式同時使用，外部式＂link＂標(biāo)簽要在內(nèi)嵌式標(biāo)簽"style"前面
CSS選擇器
- 標(biāo)簽選擇器
- 類選擇器
- ID選擇器
- 通配符選擇器
- 屬性選擇器
標(biāo)簽選擇器
標(biāo)簽選擇器是對于"HTML"標(biāo)簽進(jìn)行選擇設(shè)置樣式．比如標(biāo)簽"p"和"h1"
p{color:red;}
h1{color:green;}
類選擇器
.className定義一個類別以英文"."開頭，進(jìn)行區(qū)分選擇，在合適的位置引用
<head>
<style>
.stress{color:red;}
</style>
</head>
...
<p class="stress">這里是紅色</p>
...
ID選擇器
#idNameID選擇器，以"#"開頭定義一個格式，在合適的位置使用id="idName"引用，ID選擇器在一個"html"文檔中只能使用一次，類選擇器可多次使用
通配符選擇器
使用通配符選擇特定的標(biāo)簽，設(shè)置樣式．比如*{color:red}，所有的標(biāo)簽原色字體都會變成紅色
屬性選擇器
為指定屬性的元素設(shè)置樣式
[stitle]{color:red;}
字體設(shè)置
字號
字體
加粗
傾斜
行距
字母距
顏色
字號
font-size:<absolute-size>|<relative-size>|<length>|<percentage>|<inherit>
<absolute-size>: small large medium
<relative-size>: smaller larger
一般直接使用14px,2em,`200%
字體
font-family:[<family-name>][<generic-family>][genric-family]
加粗字體
font-weight:norml|bold|bolder|lighter|100|200|300|400|500|600|700|800|900
傾斜字體
font-style:norml|italic|oblique|inhert
oblique：在沒有斜體字體時，強(qiáng)制傾斜
更改行距
line-height:normal|<number>|<length>|<percentage>
字間距
letter-spacing: normal|<length>
改變文字顏色
color: <color>
對齊方式
文字對齊
文本垂直對齊
文本縮進(jìn)
文字對齊
text-align:start|end|left|right|center|justify|match-parent|start end
默認(rèn)文本左對齊
文本垂直對齊
vertical-align:baseline|sub|super|text-top|text-bottom|middle|top|bottom|<percentage>|<length>
<percentage>的參照物為line-height
文本縮進(jìn)
text-indent:<length>|<percentage>&&[haning||each-line]
縮進(jìn)兩個字可使用text-indent:2em
格式處理
保留空格格式
white-space:normal|pre|nowrap|pre-wrap|pre-line
文字換行
word-wrap:normal|break-word
允許長單詞自動換行
word-break:normal|break-all|keep-all
break-all單詞間的任意字母都可以換行
