溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“CSS常用樣式有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS常用樣式有哪些”這篇文章吧。
1、CSS
層疊樣式表，用于對頁面進行美化。
在HTML中的方式有三種：元素內(nèi)聯(lián)、頁面嵌入、外部引入。
(1)、元素內(nèi)聯(lián)：對其特定標簽的樣式進行設置；
(2)、頁面嵌入：在其<style>...</style>中寫入樣式，對其整個頁面內(nèi)的標簽均可設置；
(3)、外部引入：就是寫到了一個文件中(.css)，對需要這種樣式時引入文件即可。
2、常見樣式
(1)、標簽選擇器
含義：其后出現(xiàn)的所有這種標簽都是這種樣式
div{
color: red;
}(2)、class選擇器
.logo{
background-color: red;
font-size: 18px;
border: 1px;
}
后面調(diào)用：<div class = 'logo'></div>(3)、id選擇器
注意：每個標簽的id號是唯一的。
#logo{
background-color: red;
font-size: 18px;
border: 1px;
}
后面調(diào)用：<div id = 'logo'></div>(4)、關聯(lián)選擇器(以空格分開)
div p{
}
后面調(diào)用：<div><p></p></div> :就是div標簽下面的p標簽是這個樣式(5)、組合選擇器(以,分開)
p, div{
color: red;
}
：后面出現(xiàn)p/div標簽的都是這個樣式(6)、屬性選擇器
input[type = 'text']{
}
使用：凡是出現(xiàn)input標簽中帶有type='text'的都使用這個樣式(7)、需要注意的：
<style>
.logo{
background-color:#EEAD0E;font-size:18px;border:1px;
}
.logo a,.logo p{
font-size:56px;
}
以上的含義：在logo下的a/p標簽使用這個樣式
.logo a,p{
font-size:56px;
}
這個的含義是：在logo下的a標簽或所有的p標簽使用這個樣式
</style>關于以上樣式的完整代碼：
<!DOCTYPE html>
<html>
<head>
<title>頁面一</title>
<link rel = 'stylesheet' href = 'conmon.css' />
<style>
.logo{
background-color: red;
font-size: 18px;
border: 1px;
}
.logo a{
}
#logo{
background-color: red;
font-size: 18px;
border: 1px;
}
div{
color: red;
}
a{
color: red;
}
a, div{
color: red;
}
a div{
}
input[type = 'text']{
}
</style>
</head>
<body>
<div class = 'logo'>
<a></a>
</div>
<div style = 'background-color: red;'>123</div>
<div class = 'logo'>123</div>
<div id = 'logo'>123</div>
<a>
<input />
<div></div>
</a>
</body>
</html>
///////////////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html>
<head>
<title>頁面一</title>
<style>
.logo{
background-color:#EEAD0E;font-size:18px;border:1px;
}
.logo a,.logo p{
font-size:56px;
}
<!--
.logo a,p{
font-size:56px;
}
-->
</style>
</head>
<body>
<p>p標簽</p>
<div class='logo'>
<div>div標簽</div>
<a>a標簽</a>
<p>p標簽</p>
</div>
</body>
</html>3、背景圖片
(1)、原生的引入圖片
<p_w_picpath src = '1.png'> #雙引號中寫的是當前路徑下的圖片
(2)、背景圖片的引入：background;
注意：使用background時，要注意將背景圖片放到盒子中，就是必須指明寬、高。
<div ></div>
運行結(jié)果
4、邊框
border：線的寬度 實/虛(solid/dotted) 顏色；后面可以設置邊框的寬度和高度;
margin：與外邊框的距離；里面的邊框相距外邊框的距離;
padding：與內(nèi)邊框的距離；里面的文字距離自己里面邊框的距離;
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>頁面一</title> <style> </style> </head> <body> <div style = 'border:1px solid red;height:49px;border-top-style:dotted; border-right-style; border-bottom-style; border-left-style'> </div> <div style = 'border:1px solid red;height:200px;'> <div style = 'height:30px;background-color:#999;margin-top:20px; margin-left:20px;margin-right:20px;padding-top:120px;padding-left:250px; padding-bottom:20px'>西安市</div> </div> </body> </html>
運行結(jié)果
5、display
常見的就三種形式：
(1)、display:none; #隱藏顯示
(2)、display:block; #以塊級標簽的形式顯示
(3)、display:inline; #以內(nèi)聯(lián)標簽的形式打印
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>頁面一</title>
<style>
.logo{
display:none;
display:block;
display:inline;
}
</style>
</head>
<body>
<span style = 'display:none;'>不會出現(xiàn)的</span>
<span style = 'display:block;'>內(nèi)聯(lián)標簽</span>
<div style = 'display:inline;'>塊級標簽</div>
<div style = 'display:inline;'>塊級標簽</div>
</body>
</html>運行結(jié)果
6、cursor
使用目的：在鼠標到達這個位置時，鼠標會出現(xiàn)不同的風格形式；
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>頁面一</title> </head> <body> <span style = 'cursor:pointer;'>小手</span> <span style = 'cursor:wait;'>1</span> <span style = 'cursor:move;'>2</span> <span style = 'cursor:crosshair;'>3</span> <span style = 'cursor:mine;'>4</span> #可以自定義形式(小圖標) </body> </html>
這個截圖看不出效果，就是不同的形式展現(xiàn)，鼠標在不同的文字上出現(xiàn)時;
7、float
一般使用left和right;
使用目的：劃分區(qū)域，可以使之飄起來，是以堆疊的形式展現(xiàn)；
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>頁面一</title>
<style>
.clearfix:after{ #在父標簽的下面，子標簽有float，使用這個class可以讓其子標簽使用父標簽的樣式(方法1)
content:'.';
display:block;
height:0;
clear:both;
visibility:hidden;
}
</style>
</head>
<body>
<!-- float出現(xiàn)時，標簽就會出現(xiàn)堆疊
<div style = 'background-color:red;float:left;width:50%;height:120px'>
div1
</div>
<div style = 'background-color:#999;float:right:width:50%;height:120px'>
div2
</div>
-->
<div style = 'background-color:red;' class = 'clearfix'>
<!--只要子類里邊哪個有float,哪個就飄起來了,此時你的父標簽對其就不起作用了 -->
<div style = 'float:left'>div1</div>
<div style = 'float:left'>div2</div>
<div style = 'clear:both'></div> #解決子標簽有float,還能使用父標簽樣式的方法2
</div>
</body>
</html>運行結(jié)果
8、position
常用的就三種：
(1)、position:fixed 固定的位置，不在改變
(2)、position:relative
(3)、position:absolute relative和absolute一般聯(lián)合使用；
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>頁面一</title> </head> <body> <!-- relative absolute fixed固定 有position出現(xiàn)時,塊級標簽不再占100%,得自己指定寬度 relative absolute 這2個一般一起用,一個距一個有多遠 <div style = 'position:fixed;height:45px;width:100%;background-color:#333;top:0px'></div> <div style = 'height:1000px'></div> <div style = 'margin-top:16px;'> <div style = 'float:left;width:20%;background-color:#666;'>left</div> <div style = 'float:left;width:80%;'> <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p> <p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p> <p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p> </div> <div style = 'margin-top:16px;'> <div style = 'width:200px;background-color:#666;position:fixed;top:60px;bottom:0px'>left</div> <div style = 'margin-left:200px'> <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p> <p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p> <p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p> </div> </div> <div style = 'width:200px;position:fixed;top:0;left:0;bottom:0;background-color:red;'></div> <div style = 'width:200px;position:absolute;top:0;left:0;bottom:0;background-color:red;'></div> --> <div style = 'position:relative;width:500px;height:200px;background-color:#ddd'> <div style = 'width:20px;height:20px;position:absolute;top:0;left:0;bottom:0;background-color:red;'></div> <!--此時,absolute只占relative所規(guī)劃的范圍里面 --> </div> </body> </html>
分別看幾種運行結(jié)果
9、opacity(透明度)
使用目的：一般設置圖片/背景顏色的亮度；
.p_w_picpath{
opacity:0.4;
}10、模擬一個對話框
寫一個小例子，就是出現(xiàn)對話框，讓我們自己選擇的那種；
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>頁面一</title>
<style>
.shade{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color:#333;
opacity:0.6;
<!-- z-index:20; 就是看層疊的樣式,哪個在上邊,通過這個可以自己設置 -->
}
.delete{
position:fixed; <!-- fixed永遠是當前頁面占50%-->
top:50%;
left:50%;
width:400px;
height:300px;
background-color:white;
margin-left:-200px;
margin-top:150px;
<!-- z-index:10;-->
}
.hide{
display:none;
}
</style>
</head>
<body>
<table>
<tr>
<th>IP</th>
<th>編輯</th>
</tr>
<tr>
<td>11.11.11.11</td>
<td>刪除</td>
</tr>
<tr>
<td>11.11.11.12</td>
<td>刪除</td>
</tr>
</table>
<!-- 遮罩層開始-->
<div class = 'shade'></div>
<!-- 遮罩層結(jié)束-->
<!-- 刪除層開始-->
<div class = 'delete'>
<div>提示</div>
<div>確定要刪除嗎?</div>
<div>
<input type = 'button' value = '取消' />
<input type = 'button' value = '確定' />
</div>
</div>
<!-- 刪除層結(jié)束-->
</body>
</html>運行結(jié)果
以上是“CSS常用樣式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
