CSS經常使用樣式
一、CSScss
層疊樣式表，用於對頁面進行美化。html
在HTML中的方式有三種：元素內聯、頁面嵌入、外部引入。ssh
(1)、元素內聯：對其特定標籤的樣式進行設置；ide
(2)、頁面嵌入：在其<style>...</style>中寫入樣式，對其整個頁面內的標籤都可設置；ui
(3)、外部引入：就是寫到了一個文件中(.css)，對須要這種樣式時引入文件便可。url
二、常見樣式spa
(1)、標籤選擇器htm
含義：其後出現的全部這種標籤都是這種樣式
blog
div{
color: red;
}
(2)、class選擇器圖片
.logo{
background-color: red;
font-size: 18px;
border: 1px;
}
後面調用：<div class = 'logo'></div>
(3)、id選擇器
注意：每一個標籤的id號是惟一的。
#logo{
background-color: red;
font-size: 18px;
border: 1px;
}
後面調用：<div id = 'logo'></div>
(4)、關聯選擇器(以空格分開)
div p{
}
後面調用：<div><p></p></div> :就是div標籤下面的p標籤是這個樣式
(5)、組合選擇器(以,分開)
p, div{
color: red;
}
：後面出現p/div標籤的都是這個樣式
(6)、屬性選擇器
input[type = 'text']{
}
使用：凡是出現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>
三、背景圖片
(1)、原生的引入圖片
<p_w_picpath src = '1.png'> #雙引號中寫的是當前路徑下的圖片
(2)、背景圖片的引入：background;
注意：使用background時，要注意將背景圖片放到盒子中，就是必須指明寬、高。
<div style="background:url('1.png');width:100px;height:100px;"></div>
運行結果
四、邊框
border：線的寬度 實/虛(solid/dotted) 顏色；後面能夠設置邊框的寬度和高度;
margin：與外邊框的距離；裏面的邊框相距外邊框的距離;
padding：與內邊框的距離；裏面的文字距離本身裏面邊框的距離;
<!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>
運行結果
五、display
常見的就三種形式：
(1)、display:none; #隱藏顯示
(2)、display:block; #以塊級標籤的形式顯示
(3)、display:inline; #之內聯標籤的形式打印
<!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;'>不會出現的</span>
<span style = 'display:block;'>內聯標籤</span>
<div style = 'display:inline;'>塊級標籤</div>
<div style = 'display:inline;'>塊級標籤</div>
</body>
</html>
運行結果
六、cursor
使用目的：在鼠標到達這個位置時，鼠標會出現不一樣的風格形式；
<!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>
這個截圖看不出效果，就是不一樣的形式展示，鼠標在不一樣的文字上出現時;
七、float
通常使用left和right;
使用目的：劃分區域，可使之飄起來，是以堆疊的形式展示；
<!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出現時，標籤就會出現堆疊
<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>
運行結果
八、position
經常使用的就三種：
(1)、position:fixed 固定的位置，不在改變
(2)、position:relative
(3)、position:absolute relative和absolute通常聯合使用；
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>頁面一</title> </head> <body> <!-- relative absolute fixed固定 有position出現時,塊級標籤再也不佔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所規劃的範圍裏面 --> </div> </body> </html>
分別看幾種運行結果
九、opacity(透明度)
使用目的：通常設置圖片/背景顏色的亮度；
.p_w_picpath{
opacity:0.4;
}
十、模擬一個對話框
寫一個小例子，就是出現對話框，讓咱們本身選擇的那種；
<!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>
<!-- 遮罩層結束-->
<!-- 刪除層開始-->
<div class = 'delete'>
<div>提示</div>
<div>肯定要刪除嗎?</div>
<div>
<input type = 'button' value = '取消' />
<input type = 'button' value = '肯定' />
</div>
</div>
<!-- 刪除層結束-->
</body>
</html>
運行結果
相關文章
- 1. 經常使用css樣式
- 2. CSS 經常使用樣式
- 3. css經常使用樣式
- 4. Css 經常使用樣式
- 5. css 經常使用樣式
- 6. 經常使用CSS樣式
- 7. 經常使用css 樣式整理
- 8. css入門二-經常使用樣式
- 9. 經常使用css樣式(佈局)
- 10. 經常使用css樣式問題
- 更多相關文章...
- • 使用 CSS 顯示 XML - XML 教程
- • Web 品質 - 樣式表 - 網站品質教程
- • 常用的分佈式事務解決方案
- • Composer 安裝與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 經常使用css樣式
- 2. CSS 經常使用樣式
- 3. css經常使用樣式
- 4. Css 經常使用樣式
- 5. css 經常使用樣式
- 6. 經常使用CSS樣式
- 7. 經常使用css 樣式整理
- 8. css入門二-經常使用樣式
- 9. 經常使用css樣式(佈局)
- 10. 經常使用css樣式問題