css、類別選取器、id選取器、html選取器

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一、使用CSS

1、為什麼要使用css:統一網站風格

csss使用文法：

選取器{

屬性1:屬性值;

屬性2:屬性值;

}

dome1.html 檔案：

css檔案：

.css1{
font-size:14px;
color:red;
}
.css2{
font-size:20px;
color:green;
font-style:italic;
}
.css3{
font-size:30px;
color:silver;
font-weight:bold;
}
.css4{
font-size:25px;
color:yellow;
text-decoration:underline;
}
.css5{
font-size:20px;
background-color:blue;
}

效果：

2、css使用濾鏡效果：

代碼如下：

<html>
<head>
<title>css濾鏡效果以及css內部連結的使用</title>

<style type="text/css">
/*這裡用到偽類展示移動過程中的效果*/
a:link img{ /*a:link:設定 a 對象在未被訪問前的樣式。*/
filter:gray;
}
a:hover img{/*a:hover:設定對象在其滑鼠移至上方時的樣式。*/
filter:"";
}
</style>
</head>
<body>
<a href="#"><img src="1.jpg"/></a>
<a href="#"><img src="1.jpg"/></a>
<a href="#"><img src="1.jpg"/></a>
</body>
</html>

二、常用4中選取器

1、類別選取器(class選取器)

基本使用

.類別選取器{

屬性名稱：屬性值;

.........

} 如：

.style1{

/*css檔案是通過這樣定義注釋的*/
width:400px;
height:350px;/*特別要注意分號不能少，一定要寫一個分號，少了分號後面就有問題了*/
border:1px solid red;
background-color:silver;
margin-left:100px;
margin-top:50px;
padding-top:20px;
padding-left:30px;
}

2、id選取器

基本使用

#id選取器{

屬性名稱：屬性值;

.........

}

如：

#mid{

font-size:12px;

color:red;

}

3、html元素選取器

使用方法

html元素{

屬性名稱：屬性值;

.........

}

如

background-color:red;

font-size:14px;

}

table{

border:1 solid;

}

小技巧：對html元素樣式分類：在2個p標籤中的內容顯示方式不一樣。下面看看是怎麼實現的（注意看標有紅顏色字型）？

<html>
<head>
<title>使用html選取器對2個p元素內容不同處理方法</title>

<style type="text/css">
p.num{
font-size:14px;
color:red;
text-decoration:underline;
}
p.num1{
font-size:16px;
color:green;

}
</style>
</head>
<body>
他說，對這個事，重慶市委態度是鮮明的，措施是堅決的，就是要依法辦事
他強調，對涉及不雅視頻的幹部，要深入調查，切實以事實為依據，以法律為準繩，去依法依紀處理，最後的處理結果，有關部門會適時向外界公布
</body>
</html>

：

4、萬用字元選取器

該選取器可以用到所有的html元素,但是其優先權最低

優先順序表現：Id選取器> class選取器> html選取器> 萬用字元選則器

css 檔案可以使用在各種檔案(如html，php，…)

屬性名稱：屬性值;

.........................

}

小技巧：讓body內容在網頁一直置中顯示：

body{
border:1px solid red;
width:500px;/*高與寬自己需求設定*/
height:500px;
margin:0px auto;
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More