id與class的區(qū)別
- id：一對一 先找到結(jié)構(gòu)與內(nèi)容渴逻，再給其定義樣式
- class：一對多 先定義好一種樣式，再套給多個結(jié)構(gòu)/內(nèi)容
背景樣式
背景屬性：
- background-color：規(guī)定要使用的背景顏色音诫。
- background-position：規(guī)定背景圖像的位置惨奕。
- background-size：規(guī)定背景圖片的尺寸。
- background-repeat：規(guī)定如何重復(fù)背景圖像竭钝；默認值repeat梨撞。
- background-origin：規(guī)定背景圖片的定位區(qū)域，position的位置及背景圖片的相對基點由該屬性決定香罐。默認值為padding-box卧波；如果背景圖像的 background-attachment 屬性為 "fixed"，則該屬性沒有效果
- background-clip：規(guī)定背景顏色的繪制區(qū)域庇茫，不改變position與背景圖片的位置相對起始點（由background-origin屬性決定）港粱。默認值為border-box
-
background-attachment：規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動。
- 固定的情況下：background-position會根據(jù)瀏覽器定位
- 非固定的情況下：background-position會根據(jù)元素本身定位
- fixed(固定)情況下旦签，背景圖像超出元素范圍不顯示*/
-
background-image：規(guī)定要使用的背景圖像查坪；多張圖片可通過
,隔開，其他屬性按圖片順序依次匹配宁炫，同樣按,隔開偿曙。
屬性代碼示例1：
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bgcolor {
width: 1000px;
height: 1000px;
background-color: #ccc;
}
.bgimage {
margin-left: 50px;
padding: 100px;
width: 1000px;
height: 500px;
background-color: #ffc;
/* 背景圖片 */
background-image: url('submit.gif');
/* 不允許重復(fù)，默認值是允許重復(fù) */
background-repeat: no-repeat;
/* 背景圖片顯示的位置淋淀，圖片顯示在范圍內(nèi)的右邊，從圖片的頂部開始顯示(可以將height設(shè)置小一點看效果) */
/* background-position: right center; */
/* background-position也可以通過像素覆醇、百分比實現(xiàn)朵纷，從bgimage容器中的100(從左到右，百分比也是同理),20(從上到下永脓，百分比也是同理)像素處開始顯示 */
background-position: 100px 20px;
/* 背景圖像固定袍辞，不隨內(nèi)容滾動,直到被其他容器覆蓋 */
background-attachment: fixed;
/* CSS3新增屬性 規(guī)定背景圖片的尺寸 200寬 100高*/
background-size: 200px 100px;
/* CSS3新增屬性 規(guī)定 background-position 屬性相對于什么位置來定位 */
/* 如果背景圖像的 background-attachment 屬性為 "fixed"，則該屬性沒有效果常摧。 */
/* 該屬性沒有繼承性 */
/* background-origin: padding-box相對于內(nèi)邊距|border-box相對于border外邊距|content-box相對于內(nèi)容框; */
/* 因為有padding: 100px的屬性搅吁，所以實際的position為200px 120px; */
/* 效果查看：http://www.w3school.com.cn/tiy/c.asp?f=css_background-origin */
background-origin: content-box;
/* CSS3新增屬性 規(guī)定背景的繪制區(qū)域 */
/* 屬性值與origin一樣威创；無繼承性;有attachment屬性也一樣有效*/
background-clip: content-box;
}
</style>
</head>
<body>
<div class="bgcolor">
<div class="bgimage">
<p>隨意輸入的內(nèi)容</p>
<p>隨意輸入的內(nèi)容</p>
<p>隨意輸入的內(nèi)容</p>
<p>隨意輸入的內(nèi)容</p>
<p>隨意輸入的內(nèi)容</p>
<p>隨意輸入的內(nèi)容</p>
<p>隨意輸入的內(nèi)容</p>
<p>隨意輸入的內(nèi)容</p>
<p>隨意輸入的內(nèi)容</p>
</div>
</div>
</body>
代碼示例2：clip、origin谎懦、size
<head>
<meta charset="UTF-8">
<title>背景相關(guān)屬性clip-origin-size</title>
<style>
* {
margin: 0px;
padding: 0px;
}
strong {
color: #ff0000;
display: block;
margin: 0.8em 0em;
}
.inline_block {
display: inline-block;
/*inline-block的對齊方式vertical-align是根據(jù)默認baseline來排列的肚豺，
baseline是通過vertical-align來設(shè)置的，如top bottom middle等*/
/*如果不添加該屬性界拦，inline-block的元素排列有時候會出現(xiàn)上下不一致*/
vertical-align: top;
/*display:inline-block元素間會有間隙吸申，所以使用-margin解決；
或者不使用inline-block享甸，直接用float解決*/
margin-left: -9px;
margin-right: 1em;
background-color: yellow;
padding: 5px;
}
/*第一個inline-block元素不需要添加-margin截碴，因沒有間隙*/
.first_inline_block {
margin-left: 0px;
}
.background_clip div, .background_origin div {
background: url("../public/img/2.jpg") #333333 no-repeat;
color: #ffff00;
width:200px;
height: 100px;
text-align: center;
border: 1em dashed #0000ff;
/*規(guī)定背景圖像的大小*/
background-size: 50px;
padding: 1em;
}
/*若下方選擇器存在統(tǒng)一的樣式，如.background_clip div蛉威；
這個統(tǒng)一樣式前面跟了父元素日丹，那么下方的選擇器也需要跟上父元素，否則無效蚯嫌；
若.background_clip div修改為.border_box,.padding_box,.content_box哲虾，那么下方只需寫.border_box即可，
不需要加上父元素*/
.background_clip .border_box {
-webkit-background-clip: border-box;
background-clip: border-box;
}
.background_clip .padding_box {
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.background_clip .content_box {
-webkit-background-clip: content-box;
background-clip: content-box;
}
.background_origin .border_box {
-webkit-background-origin: border-box;
background-origin: border-box;
}
.background_origin .padding_box {
-webkit-background-origin: padding-box;
background-origin: padding-box;
}
.background_origin .content_box {
-webkit-background-origin: content-box;
background-origin: content-box;
}
</style>
</head>
<body>
<h2>background-clip 規(guī)定背景顏色繪制范圍的屬性</h2>
<strong>該屬性不改變背景繪制起始點齐帚，只規(guī)定背景繪制的范圍</strong>
<div class="background_clip">
<section class="inline_block first_inline_block">
<h3>background-clip:border-box</h3>
<div class="border_box">背景繪制區(qū)域包含border</div>
</section>
<section class="inline_block">
<h3>background-clip:padding-box</h3>
<div class="padding_box">背景繪制區(qū)域包含padding妒牙，不包含border</div>
</section>
<section class="inline_block">
<h3>background-clip:content-box</h3>
<div class="content_box">背景繪制區(qū)域包含content，不包含border对妄、padding</div>
</section>
</div>
<br/>
<hr/>
<h2>background-origin 規(guī)定背景圖片從相對位置開始繪制的屬性</h2>
<strong>該屬性規(guī)定背景圖片繪制的相對起始點</strong>
<div class="background_clip background_origin">
<section class="inline_block first_inline_block">
<h3>background-clip:border-box</h3>
<h3>background-origin:border-box</h3>
<div class="border_box">背景圖片繪制起始點從border邊緣開始</div>
</section>
<section class="inline_block">
<h3>background-clip:padding-box</h3>
<h3>background-origin:padding-box</h3>
<div class="padding_box">背景圖片繪制起始點從padding外沿開始</div>
</section>
<section class="inline_block">
<h3>background-clip:content-box</h3>
<h3>background-origin:content-box</h3>
<div class="content_box">背景圖片繪制起始點從content外沿開始</div>
</section>
</div>
</body>
代碼示例2效果圖
文本樣式
文本屬性
- color：文本顏色
- line-height：文本行高
- letter-spacing：字符間距
- word-spacing：單詞間距
- text-align：文本水平對齊方式
- text-decoration：文本修飾湘今，如下劃線、刪除線等剪菱；多屬性值可同時使用摩瞎，即同時擁有多種修飾
- text-indent：文本首行縮進
-
text-transform：文本大小寫轉(zhuǎn)化
- capitalize：每個單詞首字母大寫
- uppercase：所有字母都為大寫
- lowercase：所有字母都為小寫
-
direction：文本的書寫方向，默認為ltr(從左到右)孝常；當(dāng)文檔中使用
lang="ar" (即語言設(shè)置為阿拉伯語)時旗们，無需搭配unicode-bidi屬性即可實現(xiàn)direction指定的文字書寫方向；其他語言中构灸，若沒有unicode-bidi配合上渴，則與text-align顯示的效果一樣 -
unicode-bidi：unicode-bidi 屬性與direction屬性一起使用，來設(shè)置或返回文本是否被重寫喜颁，以便在同一文檔中支持多種語言稠氮。該屬性為不可動畫屬性<small>(即不可在動畫屬性中使用該屬性)</small>
- normal：對象不打開附加的嵌入層，對于內(nèi)聯(lián)元素半开，隱式重排序跨對象邊界進行工作隔披。
- embed：創(chuàng)建一個附加的嵌入層，direction屬性的值指定嵌入層寂拆，在對象內(nèi)部進行隱式重排序奢米。
- bidi-override：創(chuàng)建一個附加的嵌入層抓韩，嚴格按照direction屬性的值重排序。忽略隱式雙向運算規(guī)則鬓长。
如在unicode-bidi:bidi-override屬性的元素下讓對象內(nèi)部進行隱式重排序(即按輸入的文本排序)谒拴，可以通過給該子元素添加unicode-bidi:embed屬性值完成
- white-space：設(shè)置如何處理元素內(nèi)的空白
- word-wrap：屬性允許長單詞或 URL 地址換行到下一行
- word-break：屬性規(guī)定自動換行的處理方法
- text-shadow：設(shè)置文本陰影效果，4個參數(shù)x,y,blur,color
white-space痢士、word-wrap彪薛、word-break的區(qū)別（代碼示例）：
<head>
<meta charset="UTF-8">
<title>white-space、word-wrap怠蹂、word-break的區(qū)別</title>
<style>
p.test1 {
/*單詞級：先根據(jù)瀏覽器默認的方式處理換行善延，
再根據(jù)單詞的換行方式進行處理*/
word-wrap: break-word;
}
p.test2 {
/*瀏覽器級*/
word-break: break-all;
}
p.test3 {
/*瀏覽器級*/
white-space: nowrap;
}
p {
width: 11em;
border: 1px solid #000000;
}
</style>
</head>
<body>
<h3>word-wrap:break-word; </h3>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<h3>word-break:break-all; </h3>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<h3>white-space:nowrap;</h3>
<p class="test3">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<h3>默認情況</h3>
<p>This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p><b>注釋：</b>目前 Opera 不支持 word-break 屬性。</p>
</body>
上述代碼示例效果圖
direction城侧、text-aligin與unicode-bidi的用法（代碼示例）
<head>
<meta charset="UTF-8">
<title>direction與unicode-bidi用法</title>
<style>
section {
border: 1px solid;
margin-top: 10px;
}
.direction {
/*規(guī)定文字方向為從右到左*/
direction: rtl;
}
.align {
/*設(shè)置文本水平對齊方式為left*/
text-align: left;
}
.bidi-override {
/*創(chuàng)建一個附加的嵌入層易遣，并嚴格按照direction屬性值排序*/
unicode-bidi: bidi-override;
}
.embed {
/*創(chuàng)建一個附加的嵌入層，并將對象進行隱式重排序*/
unicode-bidi: embed;
color: #f00;
}
</style>
</head>
<body>
<section>
<h3>阿拉伯語言與非阿拉伯語言下的direction屬性：
<small>下方 1 2 3 4 5 6 為阿拉伯語</small>
</h3>
<p class="direction">
1 2 3 4 5 6 阿拉伯語自動根據(jù)direction指定方向排序嫌佑，其他語言內(nèi)部進行隱式重排序豆茫；
若沒有設(shè)置水平對齊方向，則根據(jù)direction設(shè)置水平對齊
</p>
<p class="direction align">
1 2 3 4 5 6 阿拉伯語自動根據(jù)direction指定方向排序屋摇，其他語言內(nèi)部進行隱式重排序揩魂；
若設(shè)置了水平對齊方向，則根據(jù)text-align設(shè)置水平對齊
</p>
</section>
<section>
<h3>非阿拉伯語情況下通過unicode-bidi實現(xiàn)根據(jù)direction屬性排序</h3>
<p class="direction">只有direction:rtl的情況</p>
<p class="direction align">只有direction:rtl與text-align:left的情況</p>
<p class="direction bidi-override">direction:rtl與unicode-bidi:bidi-override的情況</p>
<p class="direction bidi-override">direction:rtl與unicode-bidi:bidi-override的情況,<span
class="embed">這部分文字按代碼書寫順序排序</span></p>
</section>
</body>
上述代碼示例效果圖
文本樣式綜合代碼示例
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
height: 40px;
margin-top: 20px;
background-color: #ccc;
width: 380px;
}
.color {
color: #ff0;
}
.direction {
direction: rtl;
}
.direction span {
display: inline-block;
}
.textAlign {
text-align: right;
}
.lineHeight {
line-height: 40px;
}
.letterSpacing {
letter-spacing: 1em;
}
.wordSpacing {
word-spacing: 1em;
}
.decoration {
/*多屬性值可同時使用*/
text-decoration: line-through overline;
}
.textIndent {
text-indent: 1em;
}
.textTransform {
text-transform: uppercase;
}
.whiteSpace {
/* 多的空格合并炮温，但不換行;默認會換行 */
white-space: nowrap;
}
.textShadow {
/*設(shè)置文本陰影效果火脉，x、y坐標偏移量柒啤、模糊程度倦挂，陰影顏色*/
text-shadow: 0.3em 0.3em 0.1em #f00;
}
.overflowWrap {
overflow-wrap: break-word;
}
</style>
</head>
<body>
<div>
<section>
<h2>CSS文本</h2>
<p class="color">color</p>
<p class="direction">
<span>direction:rtl</span><span>下</span><span>塊</span><span>元</span><span>素</span><span>從</span><span>右</span><span>向</span><span>左</span>
</p>
<p class="textAlign">text-align 文本整體位于右側(cè)</p>
<p class="lineHeight">line-height=height的效果</p>
<p class="letterSpacing">letter spacing 字符間距</p>
<p class="wordSpacing">word spacing 單詞間距</p>
<p class="decoration">text-decoration </p>
<p class="textIndent">text-indent 首行縮進</p>
<p class="textTransform">text-transform，原小寫全轉(zhuǎn)換為大寫</p>
<p class="whiteSpace">white-space nowrap 空白處理方式 這里不換行這里不換行這里不換行這里不換行這里不換行</p>
<p class="textShadow">CSS3新增屬性 text-shadow</p>
<p class="overflowWrap">werwerjlsdjfksjkdlfjsldjfksdlfjksdfjwerwerjlsdjfksjkdlfjsldjfksdlfjksdfj當(dāng)一個不能被分開的字符串太長而不能填充其包裹盒時担巩，為防止其溢出方援，瀏覽器是否允許這樣的單詞中斷換行</p>
</section>
</div>
</body>
上述代碼示例效果圖
自定義字體
使用@font-face定義自定義字體，請看如下代碼示例：
<style>
@font-face {
/*定義自定義字體名稱為myfont*/
font-family: myfont;
/*自定義字體源 local表示客戶端字體*/
src: local("Arial111"),
/*local可以存在多個涛癌，也可以不存在犯戏；不存在的情況下直接調(diào)用服務(wù)端字體*/
local("Verdana111"),
/*url表示自定義(服務(wù)端)字體地址*/
url("../public/font/myfont.ttf"),
/*url可以存在多個，1是考慮到字體不存在可以引用下一個拳话，2是考慮到瀏覽器不兼容的情況可以使用下一個*/
url("../public/font/myfont.otf");
}
p{
/*使用自定義的字體myfont*/
font-family:myfont;
}
</style>
鏈接樣式
鏈接的四種狀態(tài)：
- a:link 未被訪問過的鏈接先匪，鏈接的原始狀態(tài)
- a:visited 已經(jīng)被訪問過的鏈接狀態(tài)
- a:hover 鼠標移動到鏈接上時的狀態(tài)
- a:active 鼠標移動到鏈接上并按下時(未抬起)的狀態(tài)
列表樣式與表格樣式
列表樣式屬性
- list-style: 簡寫列表項樣式
- list-style-image: 列表圖標的圖片，無法設(shè)置大小假颇，只占默認空間大小
- list-style-position: 列表圖標位置胚鸯，指定列表圖標放置的位置(inside:在內(nèi)容區(qū)域內(nèi)骨稿，outside[默認]:在內(nèi)容區(qū)域外)
- list-style-type: 列表圖標的形狀笨鸡，存在list-style-image時姜钳，此屬性無效
list-style-image不可以設(shè)置圖片大小，但是css3中background-image可以設(shè)置大小形耗，所以可以將list-style設(shè)置為none哥桥，通過背景樣式來實現(xiàn)列表項圖像標志的大小
表格樣式屬性
-
border-collapse：折疊表格邊框的屬性，若值為collapse激涤，則table拟糕、tr、td的邊框合并倦踢，合并后的border樣式?jīng)Q定關(guān)系如下：
- table送滞、tr、td都設(shè)置border樣式辱挥，外邊框和橫線由tr決定犁嗅，內(nèi)豎線由td決定
- 只有table和td設(shè)置了border樣式，外邊框由table決定晤碘，其他都由td決定
- 只有td設(shè)置了border樣式褂微，全有td決定表格邊框樣式
代碼示例：
table, th, td { padding: 5px; text-align: center; } td, th { border: 1px dotted #ff0000; } tr { /*未折疊狀態(tài)下，tr的border不會顯示*/ border: 1px solid #0000FF; } table { border: 1px solid #000; } table { /* 折疊border园爷，table宠蚂、tr、td的邊框折疊成一條 * 折疊后的border樣式： * 1.table童社、tr求厕、td都設(shè)置border樣式，外邊框和橫線由tr決定叠洗，內(nèi)豎線由td決定 * 2.只有table和td設(shè)置了border樣式甘改，外邊框由table決定，其他都由td決定 * 3.只有td設(shè)置了border樣式灭抑，全有td決定表格邊框樣式*/ border-collapse: collapse; }
##輪廓樣式outline
該樣式在盒子模型成位于最外層十艾，即在border之外，且不會被文檔流計入寬高腾节。在chrome中忘嫉，當(dāng)搜索欄處于獲取焦點的狀態(tài)時，可見外面的一個輪廓就是chrome針對input獲取焦點時默認的outline樣式
#####代碼示例
```html
<head>
<meta charset="UTF-8">
<title></title>
<style>
p {
/* 輪廓outline 屬性值依次為顏色 線條樣式 線條寬度(粗) */
outline: #ff0 dashed 10px;
border: #000 dotted 10px;
}
input {
border: 5px solid;
/*獲取焦點后案腺，input會被渲染上瀏覽器默認的輪廓樣式庆冕，通過自定義輪廓樣式取消*/
outline: none;
}
input:focus {
outline: #ff0000 dotted 5px;
}
</style>
</head>
<body>
<p>輪廓:輪廓的粗細不影響元素的寬高，而border會影響元素的寬高劈榨；輪廓在border之外</p>
<input type="text" placeholder="獲取焦點后顯示輪廓">
</body>
上述代碼示例效果圖
input獲取焦點時的效果圖
