CSS中常用的屬性設定
CSS中常用的屬性設定
css格式:
選擇器{
css屬性名稱:屬性值；
}
選擇器–從htm檔案中選中自己需要新增樣式的html元素。
1.元素選擇器—根據html元素的名稱選中被控制的html標記。
2.id選擇器–根據給html標記設定的id屬性來選中被控制的html標記。
如果要使用id選擇器那麼首先需要給html標記去設定id屬性。
3.類【class】選擇器—根據給html標記設定的class屬性來選中被控制的html標記。
如果要使用類【class】選擇器那麼首先需要給html標記去設定class屬性。
4.包含選擇器–選擇所有被父元素包含的子元素。
5.屬性選擇器–根據html標記的屬性來選中被控制的元素
（1） 元素 [屬性名稱] { sRules }：選擇具有某個屬性的元素
（2） 元素 [屬性名稱 = value【屬性值】 ] { sRules }：選擇具有某個屬性且屬性值等 於 value 的元素
6. 子元素選擇器—選擇所有作為E1子物件的 E2 。
7. 選擇器分組----將同樣的樣式應用於多個選擇器選中的元素上。不同的選擇器之間使用 “，”分割。
注意:css的選擇器在使用的時候，不是單一去應用，而是通過不同的組合形式來使用。
1.1 關於字型的css屬性設定
（1）color–設定字型顏色[顏色單詞/顏色碼【#0000ff】]
（2）font-family—設定字型名稱[黑體…]
（3）font-size --設定字型大小【數字px】
（4）font-style–設定字型傾斜【normal | italic | oblique 】
（5）font-weight–設定字型粗細【整百的數字【100~900】】
（6）text-decoration–設定字型的修飾線【none || underline下劃線 || overline上劃線 || line-through貫穿線 】
（7）text-shadow–文字的文字是否有陰影及模糊效果
（8）text-transform–文字的大小寫轉換【none | capitalize | uppercase | lowercase 】
（9）line-height–行高【數字px】
（10）letter-spacing–文字之間的間隔 normal | length 【數字px】
（11）word-spacing–單詞之間插入的空隔normal | length 【數字px】
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>關於字型的css屬性設定</title>
<style>
p{
color:red;
font-family:楷體;
font-size:30px;
font-style:italic;
font-weight:900;
text-decoration:underline;
text-transform:uppercase;
letter-spacing:10px;
word-spacing:20px;
text-shadow:10px 10px 20px red;
line-height: 30px;
}
</style>
</head>
<body>
<h1>關於字型的css屬性設定</h1>
<h2 >color--設定字型顏色[顏色單詞/顏色碼【#0000ff】]</h2>
<h2>font-family---設定字型名稱[黑體.....]</h2>
<h2>font-size --設定字型大小【數字px】</h2>
<h2>font-style--設定字型傾斜【normal | italic | oblique 】</h2>
<h2>font-weight--設定字型粗細【整百的數字【100~900】】</h2>
<h2>text-decoration--設定字型的修飾線【none || underline下劃線
|| overline上劃線 || line-through貫穿線 】</h2>
<h2>text-shadow--文字的文字是否有陰影及模糊效果</h2>
<h3>text-shadow:10px 0px 0px red;</h3>
<h3>第一個值:水平移動距離 0px 0px red;</h3>
<h3>第二個值:前後移動距離 0px 0px red;</h3>
<h3>第三個值:模糊效果</h3>
<h3>第四個值:陰影顏色</h3>
<h2>text-transform--文字的大小寫轉換【none |
capitalize | uppercase | lowercase 】</h2>
<h2>line-height--行高【數字px】</h2>
<h2>letter-spacing--文字之間的間隔 normal | length 【數字px】</h2>
<h2>word-spacing--單詞之間插入的空隔normal | length 【數字px】</h2>
<p>測試關於字型的test css屬性設定</p>
<p>測試文字是否有陰影及模糊效果</p>
<p>測試文字是否有陰影及模糊效果測試文字是否有陰影及模糊效果測試文字是否
有陰影及模糊效果測試文字是否有陰影及模糊效果測試文字是否有陰影及模糊效果
測試文字是否有陰影及模糊效果測試文字是否有陰影及模糊效果測試文字是否有陰影及模糊效果
測試文字是否有陰影及模糊效果測試文字是否有陰影及模糊效果測試文字是否有陰影及模糊效果
測試文字是否有陰影及模糊效果測試文字是否有陰影及模糊效果</p>
</body>
</html>
1.2關於文字屬性設定
（1）text-indent :文字的縮排 length 【數字px】
（2）vertical-align：垂直對齊方式top middle bottom
（3）text-align :水平對齊方式left | right | center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>關於文字屬性設定</title>
<style>
#p1{
font-size: 20px;
text-indent:30px;
}
#p2{
font-size: 20px;
text-indent:50px;
}
tr{
text-align:right;
vertical-align:bottom;
}
</style>
</head>
<body>
<h1>關於文字屬性設定</h1>
<h2>text-indent :文字的縮排 length 【數字px】</h2>
<h2>vertical-align：垂直對齊方式top middle bottom </h2>
<h2>text-align :水平對齊方式left | right | center </h2>
<p id="p1">關於文字屬性設定關於文字屬性設定關於文字屬性設定</p>
<p id="p2">關於文字屬性設定關於文字屬性設定關於文字屬性設定</p>
<table border="1px" width="600px" height="200px">
<tr>
<td>text-align</td>
<td>水平對齊方式left | right | center</td>
</tr>
<tr>
<td>vertical-align</td>
<td>垂直對齊方式top middle bottom</td>
</tr>
</table>
</body>
</html>
1.3關於背景的設定
1.整個網頁的背景設定
（1） 整個網頁的背景顏色【在body元素中設定bgcolor】
（2）整個網頁的背景圖片【在body元素中設定background】
2.Html元素的背景設定
（1） Html元素的背景顏色【background-color】
（2）Html元素的背景圖片【background-image:url(“imgs/banner1.png”);】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>關於背景的設定</title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
}
p{
font-size: 40px;
color: yellow;
background-color: blue;
}
table{
background-image:url("imgs/banner1.png");
}
tr{
font-size: 20px;
color: #FFFF00;
}
</style>
</head>
<body background="imgs/timg.jpg">
<h1>關於背景的設定</h1>
<h2>1. 整個網頁的背景顏色【在body元素中設定bgcolor】</h2>
<h2>2. 整個網頁的背景圖片【在body元素中設定background】</h2>
<h1>關於HTML元素背景的設定</h1>
<div></div>
<p>關於HTML元素背景的設定--背景顏色</p>
<table border="1px" width="600px" height="200px">
<tr>
<td colspan="2">關html元素的背景設定</td>
</tr>
<tr>
<td>HTML元素的背景顏色</td>
<td>background-color:顏色單詞/顏色碼</td>
</tr>
<tr>
<td>HTML元素的背景圖片</td>
<td>background-image:url("圖片路徑")</td>
</tr>
</table>
</body>
</html>
1.4關於html元素的尺寸設定
width : 設定元素的寬度 auto | length
height : 設定元素的高度auto | length
1.5關於邊框設定
（1）border-color : 邊框顏色
（2）border-style ：邊框樣式
（3）border-width：邊框粗細
上面這三個屬性可以分為4組
border-top-color，border-right-color，border-bottom-color，border-left-color
border-top-style，border-right-style，border-bottom-style，border-left-style
border-top-width，border-right-width，border-bottom-width，border-left-width
我們可以通過border屬性設定4邊的邊框
border:粗細 樣式 顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>關於邊框設定</title>
<style>
div{
width: 200px;
height: 200px;
border: 10px solid red;
}
#img1{
border-top-width:5px ;
border-top-style: double;
border-top-color: black;
border-right-width:10px ;
border-right-style: solid;
border-right-color: blue;
border-bottom-width:15px ;
border-bottom-style: dashed;
border-bottom-color: red;
border-left-width:20px ;
border-left-style: dotted;
border-left-color: green;
}
#img2{
border-top:5px double black;
border-right:10px solid blue;
border-bottom:15px dashed red;
border-left:20px dotted green;
}
</style>
</head>
<body>
<h1>關於邊框設定</h1>
<div></div>
<br>
<img id="img1" src="imgs/avatar2.png" />
<br>
<img id="img2" src="imgs/avatar2.png" />
</body>
</html>
1.6 關於列表的設定
（1）有序列表 ：ol和li標籤
（2）無序列表 ：ul和li標籤
（3）自定義列表：dl,dt,dd標籤
列表的設定就是改變一下列表的前面的標識。
list-style-image : 設定標識圖示none | url ( url )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>關於列表的設定</title>
<style>
ul li a{
font-size: 50px;
text-decoration: none;
color: black;
}
ul{
list-style-image:url("imgs/home.PNG");
}
</style>
</head>
<body>
<h1>關於列表的設定</h1>
<h2>list-style-image : 設定標識圖示none | url ( url ) </h2>
<ul>
<li><a href="#">使用者資訊管理</a></li>
<li><a href="#">部門資訊管理</a></li>
<li><a href="#">職位資訊管理</a></li>
</ul>
</body>
</html>
1.7 關於表格的設定
（1）border-collapse :設定表格單元格之間的邊框合併[ separate | collapse相鄰邊被合併]
（2）border-spacing :表格邊框獨立時，行和單元格的邊在橫向和縱向上的間距。 【數字px】
（3）empty-cells :當單元格中沒有內容時,單元格的邊框是否顯示 show | hide
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格屬性設定</title>
<style>
table{
width: 800px;
height: 400px;
border-collapse:separate;
border-spacing:10px;
empty-cells:show;
}
table tr{
font-size: 20px;
text-align: right;
vertical-align: bottom;
}
</style>
</head>
<body>
<h1>表格屬性設定</h1>
<h2>border-collapse :設定表格單元格之間的邊框合併[ separate | collapse相鄰邊被合併] </h2>
<h2>border-spacing :表格邊框獨立時，行和單元格的邊在橫向和縱向上的間距。 【數字px】</h2>
<h2>empty-cells :當單元格中沒有內容時,單元格的邊框是否顯示 </h2>
<table border="1px">
<tr>
<td colspan="3"><h1>表格屬性設定</h1></td>
</tr>
<tr>
<td>border-collapse</td>
<td>設定單元格是否合併</td>
<td>separate | collapse相鄰邊被合併</td>
</tr>
<tr>
<td>border-spacing</td>
<td>框獨立時，單元格之間的間距</td>
<td>數字px</td>
</tr>
<tr>
<td>empty-cells</td>
<td>當單元格中沒有內容時,單元格的邊框是否顯示</td>
<td></td>
</tr>
</table>
</body>
</html>
1.8 關於補丁的設定
補丁–子元素和父元素之間的距離
如果設定的是父元素—內補丁【padding】
如果設定的是子元素—外補丁【margin】
padding:12px 15px 28px 35px
四個引數值，將按上－右－下－左的順序作用於四邊。
padding:12px
提供一個，將用於全部的四邊
padding:12px 15px
兩個，第一個用於上－下，第二個用於左－右
padding:12px 15px 28px
提供三個，第一個用於上，第二個用於左－右，第三個用於下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>補丁設定</title>
<style>
div{
width: 500px;
height: 400px;
background-color: black;
}
#div1{
padding: 50px;
}
#img2{
margin: 50px;
}
</style>
</head>
<body>
<div id="div1">
<img id="img1" src="imgs/avatar2.png" />
</div>
<br>
<div id="div2">
<img id="img2" src="imgs/avatar5.png" />
</div>
</body>
</html>
相關文章
- CSS 常用文字屬性CSS
- css常用文字屬性CSS
- CSS3常用屬性CSSS3
- CSS的常用屬性速查表CSS
- CSS 與 canvas 屬性設定畫布尺寸CSSCanvas
- CSS與canvas屬性設定畫布尺寸CSSCanvas
- Echarts中Option屬性設定Echarts
- CSS內聯樣式的使用,設定字型屬性CSS
- python中__setattr__的屬性設定Python
- 關於CSS中設定overflow屬性的值為hidden的相關理解CSS
- delphi 常用控制元件屬性設定說明控制元件
- HTML中設定多個class屬性css的優先順序,css樣式覆蓋HTMLCSS
- CSS中content屬性的妙用CSS
- 表屬性設定
- 舉例說明photoshop中的設定與css哪些屬性是對應的呢？CSS
- Xcode設定自己的個性屬性XCode
- css3中的animation屬性CSSS3
- 好程式設計師web前端分享css常用屬性縮寫程式設計師Web前端CSS
- css屬性與js中style物件的屬性對應表CSSJS物件
- Qt QTableWidget 設定列寬行高大小的幾種方式及其他常用屬性設定QT
- jQuery設定disabled屬性與移除disabled屬性jQuery
- AppTheme屬性設定集合APP
- Cookie設定HttpOnly屬性CookieHTTP
- css的background屬性CSS
- Python的tkinter獲取元件屬性和設定元件屬性Python元件
- （八）Mybatis當中#{}常用屬性的用法MyBatis
- CSS 屬性篇(七)：Display屬性CSS
- 行內元素屬性設定
- 執行緒屬性設定執行緒
- css中sticky屬性是什麼CSS
- CSS grid屬性的使用CSS
- css屬性的可繼承性CSS繼承
- css display 屬性CSS
- CSS perspective 屬性CSS
- CSS transform 屬性CSSORM
- CSS 一些個人不常用屬性總結CSS
- C#反射設定屬性值和獲取屬性值C#反射
- jQuery - 設定內容和屬性jQuery