溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“CSS語(yǔ)法、選擇器、聲明的方法”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS語(yǔ)法、選擇器、聲明的方法”吧！
一、HTML表單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 1.表單元素
用來(lái)聲明數(shù)據(jù)提交的范圍
只有在此元素內(nèi)的數(shù)據(jù)可以提交給服務(wù)器 -->
<!-- action屬性用來(lái)聲明數(shù)據(jù)提交的目標(biāo) -->
<form action="http://www.baidu.com">
<!-- 2.表單控件
用來(lái)讓用戶輸入數(shù)據(jù)的
1）input元素（9個(gè) ），它們之間用type元素區(qū)分-->
<!-- 文本框
value:設(shè)置默認(rèn)值 maxlength:設(shè)置最大長(zhǎng)度 readonly:設(shè)置只讀 -->
<p>
賬號(hào):<input type="text" value="lcz" maxlength="10"/>
</p>
<!-- 密碼框 屬性同上 -->
<p>
密碼:<input type="password">
</p>
<!-- 單選框 name:組名。同一組名互相排斥
checked設(shè)置默認(rèn)選中-->
<p>
性別:
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</p>
<!-- 多選框 checked:設(shè)置默認(rèn)選中 -->
<p>
興趣愛(ài)好:
<input type="checkbox" checked="checked"/>音樂(lè)
<input type="checkbox" checked="checked"/>看書
<input type="checkbox"/>打球
</p>
<!-- 文件框 -->
<p>
頭像上傳:<input type="file"/>
</p>
<!-- 隱藏框 -->
<p>
<input type="hidden" value="abc"/>
</p>
<!-- 按鈕
submit：提交表單中的數(shù)據(jù)
reset：將表單中的數(shù)據(jù)重置為初始值
button:沒(méi)有任何功能，需通過(guò)js定義功能 -->
<p>
<!-- 提交按鈕 -->
<input type="submit" value="注冊(cè)">
<!-- 重置按鈕 -->
<input type="reset" value="重置">
<!-- 普通按鈕 -->
<input type="button" value="按鈕">
</p>
<!--2)其他元素（3個(gè)） -->
<!-- label：用來(lái)管理表單中的文本 id:是元素的唯一標(biāo)志，相當(dāng)于元素的身份證號(hào)，任何元素都可以由id，程序員有義務(wù)保證元素的id不重復(fù)
可以將文本與空間綁定在一起，從而增加了控件的受力面積。-->
<p>
<input type="checkbox" id="xieyi"/>
<label for="xieyi">我已閱讀并且自愿遵守此協(xié)議！</label>
</p>
<!-- select:下拉選 selected:設(shè)置默認(rèn)選中 -->
<p>
城市:
<select>
<option>請(qǐng)選擇</option>
<option selected="selected">北京</option>
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
<option>杭州</option>
</select>
</p>
<!-- textarea:文本域 -->
<p>
簡(jiǎn)介：<br>
<textarea rows="10" cols="100">這是文本域的默認(rèn)值</textarea>
</p>
</form>
</body>
</html>
二、CSS
CSS指層疊樣式表，樣式定義如何顯示HTML元素，樣式通常存儲(chǔ)在樣式表中。
三、CSS如何使用
內(nèi)聯(lián)方式：樣式定義在單個(gè)的HTML元素中
內(nèi)部樣式表：樣式定義在HTML頁(yè)的頭元素中
外部樣式表：將樣式定義在一個(gè)外部的CSS文件中（.css）由HTML頁(yè)面引用樣式表文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css樣式演示</title>
<!-- 2.內(nèi)部樣式：在head元素里style標(biāo)簽里寫樣式，此樣式可以被當(dāng)前頁(yè)面上眾多元素復(fù)用 -->
<style type="text/css">
/*css的注釋*/
h3{color:red;}
</style>
<!-- 3.外部樣式：在單獨(dú)的css文件中寫的樣式，哪個(gè)網(wǎng)頁(yè)引用該文件，這個(gè)網(wǎng)頁(yè)就能復(fù)用這些樣式 -->
<link rel="stylesheet" href="my.css">
</head>
<body>
<!-- 1.內(nèi)聯(lián)樣式：在元素的style屬性內(nèi)直接寫樣式，此樣式 無(wú)法復(fù)用 -->
<h2 style="color: #00bcd4;">CSS</h2>
<h3>CSS有三種樣式</h3>
<p>1.內(nèi)聯(lián)樣式</p>
<p>2.內(nèi)部樣式</p>
<p>3.外部樣式</p>
</body>
</html>
四、CSS規(guī)則特性
繼承性：父元素的聲明可以被子元素繼承，如字體、顏色等。
層疊性：同一個(gè)元素若存在多個(gè)css規(guī)則，對(duì)于不沖突的聲明可以疊加
優(yōu)先級(jí)：同一個(gè)元素若存在多個(gè)css規(guī)則，對(duì)于沖突的聲明以優(yōu)先級(jí)高著為準(zhǔn)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css優(yōu)先級(jí)演示</title>
<style type="text/css">
/*1.繼承性：父元素的樣式可以被子元素繼承（顏色、字體）*/
body{
font-family:"楷體","微軟雅黑";
}
/*2.層疊性：給一個(gè)元素設(shè)置不同的聲明，其效果會(huì)疊加*/
h2{
color:red;
}
h2{
font-size:50px;
}
/*3.優(yōu)先級(jí):給同一個(gè)元素設(shè)置相同的聲明，效果以后者為準(zhǔn)，即就近原則*/
h3{
color:green;
}
/*.....*/
h3{
color:yellow;
}
</style>
</head>
<body>
<h2>HELLO WORLD!</h2>
<h3>你好，世界！</h3>
</body>
</html>
五、CSS選擇器
元素選擇器：通過(guò)元素名來(lái)選擇css作用的目標(biāo) 比如<p>、<h2>等
類選擇器：允許以一種獨(dú)立于文檔元素的方式來(lái)指定樣式 語(yǔ)法為:.className{}
id選擇器：選擇id等于某值的唯一元素。以一種獨(dú)立于文檔元素的方式來(lái)指定樣式，它僅作用于id屬性的值*/
選擇器組：寫出一組選擇器選中每個(gè)選擇器所對(duì)應(yīng)目標(biāo)的并集
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器演示</title>
<style type="text/css">
/*2.類選擇器：選擇class等于某值的所有元素，class是程序員根據(jù)邏輯自己給元素增加的分類*/
.day{
color: blue;
}
/*3.id選擇器：選擇id等于某值的唯一元素。以一種獨(dú)立于文檔元素的方式來(lái)指定樣式，它僅作用于id屬性的值*/
#fighting{
color:red;
}
/*4.選擇器組：寫出一組選擇器選中每個(gè)選擇器所對(duì)應(yīng)目標(biāo)的并集*/
.day,#fighting{
font-weight: bold;
}
/*5.派生選擇器*/
/*5.1選擇某元素的子孫*/
#p5 b{
color:red;
}
/*5.2選擇某元素的兒子*/
#p5>b{
font-size: 30px;
}
/*6.偽類選擇器：根據(jù)元素的狀態(tài)選擇選擇器*/
/*6.1選擇未訪問(wèn)過(guò)的超鏈接*/
a:link{
color:green;
}
/*6.2選擇已訪問(wèn)過(guò)的超鏈接*/
a:visited {
color: red;
}
/*6.3選擇激活態(tài)（正在點(diǎn)）的按鈕*/
#i1:active{
background-color: blue;
}
/*6.4選擇有焦點(diǎn)的文本框、密碼框、文本域*/
#i2:focus {
background-color: green;
}
/*6.5選擇鼠標(biāo)懸停態(tài)（觸碰）的圖片*/
img:hover{
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<p class="day">昨天又是忙碌的一天</p>
<p>今天也是忙碌的一天</p>
<p class="day">后天又是忙碌的一天</p>
<p id="fighting">不管怎么樣，生活還得繼續(xù)呀</p>
<p id="p5">
北京市<u>海淀區(qū)<b>200號(hào)5號(hào)樓</b></u><b>5號(hào)房</b>
</p>
<p>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.taobao.com">淘寶</a>
<a href="http://error.com">錯(cuò)誤的網(wǎng)站</a>
</p>
<p>
<input type="button" value="按鈕" id="i1">
</p>
<p>
<input type="text" id="i2">
</p>
<p>
<img alt="" src="../images/lcz.jpg">
</p>
</body>
</html>
邊框：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type="text/css">
/*1.四個(gè)邊設(shè)置相同的邊框*/
p{
border:1px dashed red;
}
/*2.單個(gè)邊設(shè)置邊框*/
/*left/right/top/bottom*/
h2{
border-left: 10px solid blue;
}
/*3.塊元素一般寬度默認(rèn)是100%，高度為自適應(yīng)，內(nèi)容越多，它越高。當(dāng)給他固定高度時(shí)，可能會(huì)導(dǎo)致內(nèi)容溢出，*/
p{
width: 300px;
height: 60px;
/*溢出時(shí)的處理*/
overflow:auto;
}
</style>
<body>
<h2>李白</h2>
<p>
李白（701年－762年） ，字太白，號(hào)青蓮居士，又號(hào)“謫仙人”，是唐代偉大的浪漫主義詩(shī)人，
被后人譽(yù)為“詩(shī)仙”，與杜甫并稱為“李杜”，為了與另兩位詩(shī)人李商隱與杜牧即“小李杜”區(qū)別，
杜甫與李白又合稱“大李杜”。據(jù)《新唐書》記載，李白為興圣皇帝（涼武昭王李暠）九世孫，
與李唐諸王同宗。其人爽朗大方，愛(ài)飲酒作詩(shī)，喜交友。
</p>
</body>
</html>
邊距：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border:1px solid red;
width:100px;
height:100px;
}
/*1.四個(gè)邊設(shè)置相同的邊距()*/
#d1{
padding:20px;
margin:30px;
}
/*2.四個(gè)邊設(shè)置不同的邊距（上右下左）*/
#d2{
padding:10px 20px 30px 40px;
margin:40px 30px 20px 10px
}
/*3.單個(gè)邊設(shè)置邊距
left/right/top/bottom*/
#d3{
padding-left: 20px;
margin-bottom: 40px;
}
/*4.對(duì)邊設(shè)置相同的邊距*/
/*先上下 后左右*/
#d4{
padding:20px 40px;
margin:30px 10px;
}
/*5.對(duì)邊設(shè)置邊距的特例*/
/*在設(shè)置外邊距時(shí)，若左右外邊距值為auto，則該元素水平居中*/
#d5{
margin:20px auto;
}
</style>
</head>
<body>
<div id="d0">d0</div>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div id="d4">d4</div>
<div id="d5">d5</div>
</body>
</html>
感謝各位的閱讀，以上就是“CSS語(yǔ)法、選擇器、聲明的方法”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS語(yǔ)法、選擇器、聲明的方法這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
