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