css 層疊樣式表(一)
阿新 • • 發佈：2019-01-11
1.格式:
選擇器{屬性:值;屬性1:值1;}
例如：
p
{
color:red;
text-align:center;
}
<body>
<p>
此處為css樣式
</p>
<body>2. 字尾名
.css 獨立的css(樣式)檔案
3. 和HTML 整合
方式1:內聯樣式表 通過標籤的style屬性設定樣式
方式2:內部樣式表 在當前頁面中使用的樣式.
<head>
<style>
#divId2 方式3:外部樣式表 有獨立的css檔案，通過head標籤的link子標籤匯入。
<link rel="stylesheet" href="css/1.css" type="text/css"/>4、選擇器☆
- id 選擇器
要求：html元素必須有id屬性且有值<xxx id="id1"></xxx>
css中通過”#”引入,後面加上id的值 #id1{…} - class選擇器
要求:
html元素必須有class屬性且有值<xxx class="cls1"/>
css中通過”.”引入,後面加上class的值 .cls1{…} 元素選擇器
直接用元素(標籤)名即可 xxx{…}派生的選擇器
屬性選擇器
html元素必須有一個屬性不論屬性是什麼且有值<xxx nihao="wohenhao"/>
css中通過下面的方式使用 ：元素名[屬性=”屬性值”]{….}
例如： xxx[nihao=”wohenhao”]{….}
選擇器使用小結:
id選擇器:一個元素(標籤) class選擇器:一類元素 元素選擇器:一種元素 屬性選擇器:元素選擇器的特殊用法 使用的時候注意:(瞭解) 若多個樣式作用於一個元素的時候 不同的樣式,會疊加 相同的樣式,最近原則 若多個選擇器作用於一個元素的時候 越特殊優先順序越高 id優先順序最高
常用屬性
字型
font-family:設定字型(隸書) 設定字型家族
font-size:設定字型大小
font-style:設定字型風格
文字
color:文字顏色
line-height:設定行高
text-decoration: 向文字新增修飾。 none underline
text-align:對齊文字
列表:
list-style-type:設定列表項的型別 例如:a 1 實心圓
list-style-image:設定圖片最為列表項型別 使用的時候使用 url函式 url("/i/arrow.gif");
背景:
background-color:設定背景顏色
background-image:設定圖片作為背景 url
尺寸:
width:
height:
浮動:
float: 可選值 left right
分類:
clear:設定元素的兩邊是否有其他的浮動元素
值為:both 兩邊都不允許有浮動元素
display:設定是否及如何顯示元素。
none 此元素不會被顯示。
block 此元素將顯示為塊級元素，此元素前後會帶有換行符。
inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符。