div+css小案例

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

上載者：User

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

demo.html

<html><head><title>這是個css體驗例子</title><!--引入CSS--><link rel = "stylesheet" type = "text/css" href = "my.css"/></head><div class = "style"><img src = "2.png"></div></html>

my.css

.style{/*寬度*/width:400px;/*一定要有分號*/height:300px;background-color: silver;border:1px solid red;margin-left:400px;margin-top:250px;padding-top:20px;padding-left:40px;}

為了讓欄目一到欄目五格式統一，只需要修改class對應的名字。

demo2.html

<html><!--css部分可以單寫一個檔案，然後引用，也可以直接嵌入到html檔案中--><link rel = "stylesheet" type = "text/css" href = "demo2.css"/><body><!--通常用於存放小塊內容--><span class = "s1">欄目一</span><span class = "s1">欄目二</span><span class = "s1">欄目三</span><span class = "s1">欄目四</span><span class = "s1">欄目五</span></body></html>

demo2.css

/*s1 類別選取器*/.s1{color:blue;font-size:30px;font-style:italic;text-decoration:underline;}.s2{color:yellow;font-size:12px;}.s3{color:blue;font-style:italic;}.s4{color:green;font-weight:bold;}.s5{color:#F89582;}

如何在html中直接嵌入css，圖片使用濾鏡效果。

<html><head><!--如何把css直接嵌入到html檔案內--><style type = "text/css">a:link img{filter:gray;}a:hover img{filter:"";}</style></head><body><a href = "3"><img src = "跑車.jpg" width = "200px"/></a><a href = "3"><img src = "2.png"/></a><a href = "3"><img src = "3.png"/></a></body></html>

類別選取器格式：

.類別選取器名{

屬性名稱：屬性值；

……

}

id選取器

#id{

屬性名稱：屬性值；

……

}

html選取器

html元素{

屬性名稱：屬性值；

……

}

萬用字元選取器（用星號表示），作用於所有的html元素，但是優先順序別最低

屬性名稱：屬性值;

……

}

四個選取器優先順序別：

id選取器 > class選取器 > html選取器 > 萬用字元選取器

select.css

.s1{background-color:pink;font-weight:bold;font-size:30px;color:black;}/*id*/#id1{background-color:silver;font-size:40px;color:black;}/*html選取器*/body{color:orange;}

select.html

<html><link rel = "stylesheet" type = "text/css" href = "select.css"><body>北京您好。<span class = "s1">新聞一</span><span class = "s1">新聞二</span><span class = "s1">新聞三</span><span class = "s1">新聞四</span><br/><br/><span id = "id1">這是一則非常重要的新聞</span></body></html>

html選取器的優先順序低於類別選取器和id選取器

假如對於兩個不同段落需要不同的格式，但是都用同樣的元素<p></p>

在CSS裡面用p.類名來區分，在html裡面用class = “類名” 來引用格式

p.cls1{color:blue;font-size:30px;}p.cls2{color:red;font-size:20px;}

<p class = "cls1">hellow world</p><p class = "cls2">hello world</p>

父子選取器：

1 可以有多級（實際中最多不超過三級）

2 父子選取器有嚴格的層級關係

css

/*父子選取器*/#id1 span{color:red;font-style:italic;}#id1 span span{color:green;}#id1 span span a{color:blue;}

html

<span id = "id1">這是一則<span>非常<span>重<a href = "http://www.baidu.com">連結到百度</a></span>要</span>的新聞</span><br/>

本文章原先以中文撰寫並發佈於 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