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
- CSS 常用文字屬性CSS
- CSS3常用屬性CSSS3
- css常用屬性彙總CSS
- HTML5中div常用屬性設定（外鏈式）HTML
- CSS的常用屬性速查表CSS
- Echarts中Option屬性設定Echarts
- Css 中的position屬性CSS
- css中的display屬性CSS
- CSS中的margin屬性CSS
- CSS1&2常用屬性CSS
- CSS與canvas屬性設定畫布尺寸CSSCanvas
- CSS 與 canvas 屬性設定畫布尺寸CSSCanvas
- CSS內聯樣式的使用,設定字型屬性CSS
- jQuery使用css()方法設定元素的display屬性值jQueryCSS
- sping中 schemaLocation 屬性設定
- css3中的zoom屬性以及jquery中css()方法操作元素的屬性CSSS3OOMjQuery
- python中__setattr__的屬性設定Python
- HTML中設定多個class屬性css的優先順序,css樣式覆蓋HTMLCSS
- delphi 常用控制元件屬性設定說明控制元件
- 關於CSS中設定overflow屬性的值為hidden的相關理解CSS
- WPF中Dependency屬性設定順序的心得
- 表屬性設定
- JavaScript設定屬性JavaScript
- CSS中content屬性的妙用CSS
- css3中的animation屬性CSSS3
- css的border屬性預設值CSS
- 如何為要被列印的內容設定CSS樣式屬性CSS
- css的屬性CSS
- css屬性與js中style物件的屬性對應表CSSJS物件
- 好程式設計師web前端分享css常用屬性縮寫程式設計師Web前端CSS
- js如何獲取樣式表中定義的css屬性值JSCSS
- jQuery css()設定和獲取元素css屬性值程式碼例項jQueryCSS
- CSS border屬性預設值CSS
- 深入理解css中的margin屬性CSS
- CSS中屬性的書寫順序CSS
- （八）Mybatis當中#{}常用屬性的用法MyBatis