溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“CSS基礎知識以及常用樣式”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
什么是CSS
在HTML頁面中嵌套使用CSS的兩種方式
三種方式代碼展示
鏈入外部樣式表文件
以下是常用的樣式
CSS(Cascading Style Sheet):層疊樣式表語言。
CSS的作用是：
修飾HTML頁面，設置HTML頁面中的某些元素的樣式，讓HTML頁面更好看。
第一種方式：在標簽內部使用style屬性來設置元素的CSS樣式，這種方式稱為內聯定義方式。語法格式：
<標簽 style=“樣式名:樣式值;樣式名:樣式值;樣式名:樣式值;…”></標簽>
第二種方式：鏈入外部樣式表文件，這種方式最常用。（將樣式寫到一個獨立的xxx.css文件當中，在需要的網頁上直接引入css文件，樣式就引入了）語法格式：
這種方式易維護，維護成本較低。 xxx.css文件 1.html中引入了 2.html中引入了 3.html中引入了 4.html中引入了
內聯定義方式
<!doctype html> <html> <head> <title>HTML中引入CSS樣式的第一種方式：內聯定義方式</title> <head> <body> <!-- width 寬度樣式 heght 高度樣式 background-color 背景顏色樣式 display 布局樣式（none表示隱藏，block表示顯示） --> <div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block; border-color: red;border-width: 3px;border-style: solid"></div> <!--樣式還可以這樣寫 border: width style color --> <div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block; border: thick double yellow; "></div> </body> </html>
樣式塊方式
<!doctype html>
<html>
<head>
<title>HTML中引入樣式的第二種方式：樣式塊方式</title>
<style type="text/css">
/*
這是CSS的注釋
*/
/*
id選擇器
#id{
樣式名: 樣式值；
樣式名: 樣式值；
樣式名: 樣式值；
........
}
*/
#usernameErrorMsg{
font-size: 12px;
color: red;
}
/*
標簽選擇器
標簽名{
樣式名: 樣式值;
樣式名: 樣式值;
樣式名: 樣式值;
}
*/
div{
background-color: black;
border: 1px solid red;
width: 100px;
height: 100px;
}
/*
類選擇器
.類名{
樣式名: 樣式值;
樣式名: 樣式值;
樣式名: 樣式值;
}
*/
.myclass{
border: 2px double blue;
width: 400px;
height: 30px
}
</style>
</head>
<body>
<!--
設置樣式字體大小12px,顏色為紅色
-->
<!--<span id="usernameErrorMsg" >對不起，用戶名不能為空！</span>-->
<span id="usernameErrorMsg"">對不起，用戶名不能為空！</span>
<div></div>
<div></div>
<div></div>
<!--class相同的可以認為是同一類標簽。-->
<br><br><br><br>
<input type="text" class="myclass"/>
<br><br><br><br><br>
<select class="myclass">
<option>專科</option>
<option>本科</option>
<option>碩士</option>
</select>
</body>
</html>css文件
a{
text-decoration: none;
}
#baiduSpan{
text-decoration: underline;
cursor: wait;
}<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML中引入CSS樣式的第三種方式：鏈入外部樣式表文件</title> <!--引入css--> <link type="text/css" rel="stylesheet" href="css/1.css"/> </head> <body> <a href="http://www.baidu.com">百度</a> <span id="baiduSpan">點擊我鏈接百度</span> </body> </html>
邊框
（1）
div{ border : 1px solid red; }（2）
div{ border-width : 1px; border-style : solid; border-color : red; }隱藏
div{ display : none; }字體
div{ font-size : 12px; color : red; }文本裝飾
a{ text-decoration : none; }a{ text-decoration : underline; }列表
ul{ list-style-type : none; }設置鼠標懸停效果
:hover
定位
div{ position : absolute; left : 100px; top : 100px; }鼠標小手
div{ cursor : pointer; }“CSS基礎知識以及常用樣式”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
