css樣式介紹
1 css之選擇器
1.1 基本選擇器
1.2 組合選擇器
E,F 多元素選擇器,同時匹配所有E元素或F元素,E和F之間用逗號分隔:div,p { color:#f00; }
E F 後代元素選擇器,匹配所有屬於E元素後代的F元素,E和F之間用空格分隔 :li a { font-weight:bold;}
E > F 子元素選擇器,匹配所有E元素的子元素F :div > p { color:#f00; }
E + F 毗鄰元素選擇器,匹配所有緊隨E元素之後的同級元素F :div + p { color:#f00; }
E ~ F 普通兄弟選擇器(以破折號分隔) :.div1 ~ p{font-size: 30px; }
1.3 屬性選擇器
E[att] 匹配所有具有att屬性的E元素,不考慮它的值。(註意:E在此處可以省略。 比如“[cheacked]”。以下同。) p[title] { color:#f00; }
E[att=val] 匹配所有att屬性等於“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素 td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配屬性值以指定值開頭的每個元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}
示例
<style> /* 屬性選擇器 */ [city="bj"]{ color:red; } div[ft="pro"]{ color: yellow; font-size: 20px; } </style> <p city="bj">歡迎來到北京...</p> <div ft="pro">前端的屬性選擇器</div> <div>屬性選擇器</div>
2 偽類
偽類,就是樣式中帶冒號
2.1 anchor偽類
專用於控制鏈接的顯示效果
‘‘‘
a:link(沒有接觸過的鏈接),用於定義了鏈接的常規狀態。
a:hover(鼠標放在鏈接上的狀態),用於產生視覺效果。
a:visited(訪問過的鏈接),用於閱讀文章,能清楚的判斷已經訪問過的鏈接。
a:active(在鏈接上按下鼠標時的狀態),用於表現鼠標按下時的鏈接狀態。
偽類選擇器 : 偽類指的是標簽的不同狀態:
a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; }
‘‘‘
2.2 before after偽類
:before p:before 在每個<p>元素之前插入內容
:after p:after 在每個<p>元素之後插入內容
例:
p:before{content:"hello";color:red;display: block;}
3 選擇器的優先級
3.1 優先級
所謂CSS優先級,即是指CSS樣式在瀏覽器中被解析的先後順序。
樣式表中的特殊性描述了不同規則的相對權重,它的基本規則是:
1 內聯樣式表的權值最高
2 統計選擇符中的id屬性個數
3 統計選擇符中的class屬性個數
4 統計選擇符中的html標簽名個數
註意:
1、文內的樣式優先級為,所以始終高於外部定義。
2、有!important聲明的規則高於一切。
示例:
.content{
color:blue !important;
}
3.2 繼承
繼承是CSS的一個主要特征,它是依賴於祖先-後代的關系的。繼承是一種機制,它允許樣式不僅可以應用於某個特定的元素,還可以應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。
body{color:red;} <p>helloyuan</p>
這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的,是比普通元素的權重還要低。
p{color:green}
發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見:任何顯示申明的規則都可以覆蓋其繼承樣式。
此外,繼承是CSS重要的一部分,我們甚至不用去考慮它為什麽能夠這樣,但CSS繼承也是有限制的。有一些屬性不能被繼承,如:border, margin, padding, background等。
div{ border:1px solid #222 } <div>hello <p>yuan</p> </div>
4 css 文本樣式
4.1 文本顏色
顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定:
十六進制值 - 如: #FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red
p { color: rebeccapurple; }
4.2 水平對齊方式
text-align 屬性規定元素中的文本的水平對齊方式。
left 把文本排列到左邊。默認值:由瀏覽器決定。
right 把文本排列到右邊。
center 把文本排列到中間。
justify 實現兩端對齊文本效果。
4.3 文本其他屬性
/*
font-size: 10px;
line-height: 200px; 文本行高 通俗的講,文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比
vertical-align:-4px 設置元素內容的垂直對齊方式 ,只對行內元素有效,對塊級元素無效
text-decoration:none text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除鏈接的下劃線
font-family: ‘Lucida Bright‘
font-weight: lighter/bold/border/
font-style: oblique
text-indent: 150px; 首行縮進150px
letter-spacing: 10px; 字母間距
word-spacing: 20px; 單詞間距
text-transform: capitalize/uppercase/lowercase ; 文本轉換,用於所有字句變成大寫或小寫字母,或每個單詞的首字母大寫
*/
4.4 文本垂直居中
文本垂直居中,是通過文本的line-height來實現的
示例:
.city{ width:100%; height: 200px; background-color: #bdbdbd; text-align: center; line-height: 200px; } <div class="city"> <h1>中國</h1> </div>
5 背景屬性
5.1 屬性介紹
background-color
background-image
background-repeat
background-position
background-color: cornflowerblue
background-image: url(‘1.jpg‘);
background-repeat: no-repeat;(repeat:平鋪滿)
background-position: right top(20px 20px);
5.2 簡寫形式
background:#ffffff url(‘1.png‘) no-repeat right top;
6 display屬性
6.1 none隱藏標簽
p{display:none;}
註意與visibility:hidden的區別:
visibility:hidden可以隱藏某個元素,但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說,該元素雖然被隱藏了,但仍然會影響布局。
display:none可以隱藏某個元素,且隱藏的元素不會占用任何空間。也就是說,該元素不但被隱藏了,而且該元素原本占用的空間也會從頁面布局中消失。
6.2 block:內斂標簽設置為塊級標簽
span {display:block;}
註意:一個內聯元素設置為display:block是不允許有它內部的嵌套塊元素。
6.3 inline:塊級標簽設置為內斂標簽
li {display:inline;}
6.4 inline-block
display:inline-block可做列表布局,其中的類似於圖片間的間隙小bug可以通過如下設置解決:
#outer{
border: 3px dashed;
word-spacing: -5px;
}
7 浮動
7.1 介紹
先來了解一下block元素和inline元素在文檔流中的排列方式。
block元素通常被現實為獨立的一塊,獨占一行,多個block元素會各自新起一行,默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性;
inline元素不會獨占一行,多個相鄰的行內元素會排列在同一行裏,直到一行排列不下,才會新換一行,其寬度隨元素的內容而變化。inline元素設置width、height屬性無效
常見的塊級元素有 div、form、table、p、pre、h1~h5、dl、ol、ul 等。
常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文檔流,指的是元素排版布局過程中,元素會自動從左往右,從上往下的流式排列。
脫離文檔流,也就是將元素從普通的布局排版中拿走,其他盒子在定位的時候,會當做脫離文檔流的元素不存在而進行定位。
7.2 解決父級塌陷
推薦方法是:清除浮動
clear語法:
clear : none | left | right | both
取值:
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
但是需要註意的是:clear屬性只會對自身起作用,而不會影響其他元素。
把握住兩點:1、元素是從上到下、從左到右依次加載的。
2、clear: left;對自身起作用,一旦左邊有浮動元素,即切換到下一行來保證左邊元素不是浮動的,依據這一點解決父級塌陷問題。
‘‘‘
.clearfix:after { <----在類名為“clearfix”的元素內最後面加入內容;
content: "."; <----內容為“.”就是一個英文的句號而已。也可以不寫。
display: block; <----加入的這個元素轉換為塊級元素。
clear: both; <----清除左右兩邊浮動。
visibility: hidden; <----可見度設為隱藏。註意它和display:none;是有區別的。
visibility:hidden;仍然占據空間,只是看不到而已;
line-height: 0; <----行高為0;
height: 0; <----高度為0;
font-size:0; <----字體大小為0;
}
.clearfix { *zoom:1;} <----這是針對於IE6的,因為IE6不支持:after偽類,這個神
奇的zoom:1讓IE6的元素可以清除浮動來包裹內部元素。
整段代碼就相當於在浮動元素後面跟了個寬高為0的空div,然後設定它clear:both來達到清除浮動的效果。
之所以用它,是因為,你不必在html文件中寫入大量無意義的空標簽,又能清除浮動。
<div class="head clearfix"></div>
‘‘‘
8 position
8.1 介紹
fixed:完全脫離文檔流;參照物是可視窗口;可以設置top left right bottom
relative:不脫離文檔流;參照物是自己原來的位置;可以設置top left right bottom
absolute:完全脫離文檔流;參照物是已定位的父級標簽;可以設置top left right bottom
一般:
給某些元素進行定位:設置absolute
已定位標簽的父元素設置相對定位。
8.2 遮罩層
設置遮罩層,通過position的fixed設置上下左右全為0,進而占滿整個屏幕。
position:fixed 設置top bottom left right為0,占滿整個屏幕
css樣式介紹