前端CSS樣式操做
目錄css
字體和文字
設置標籤的寬高
只有塊級標籤才能夠設置寬高。html
行內標籤設置長寬以後不生效，取決於內部文本值。瀏覽器
/*塊級標籤設置寬度、高度*/
div {
width: 200px;
height: 400px;
}
/*行內標籤設置寬度、高度無效*/
字體屬性
/*給字體設置屬性*/
p {
font-family: "KaiTi", "微軟雅黑", "Arial", sans-serif;
font-size: 24px;
font-weight: lighter;
color: red;
color:#352AFF;
color: rgb(185,126,255);
color: rgba(185,126,255,0.5);
}
font-family：設置字體樣式，若是瀏覽器不支持第一個字體，則會嘗試下一個字體樣式佈局
font-size：設置字體大小字體
font-weight：設置字體的字重（粗細）網站
color：設置字體顏色，能夠有三種方法獲取顏色url
一、打開Pycharm畫板選中想要的顏色，直接寫十六進制。翻譯
二、直接寫顏色的英文3d
三、寫rgb值：軟件截圖下面有rgb值。code
四、rgba值：也是rgb值，四個參數，最後一個參數寫對比度（0~1）0是透明，1是不透明
字重（粗細）：
font-weight 用來設置字體的字重（粗細），有以下參數：
| 值 | 描述 |
|---|---|
| normal | 默認值，標準粗細 |
| bold | 粗體 |
| bolder | 更粗 |
| lighter | 更細 |
| 100~900 | 設置具體的粗細，400=normal，700=bold |
文字的屬性
<style>
p {
font-weight: bolder;
font-size: 30px;
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
text-indent: 48px;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;
}
a {
text-decoration: none;
}
a:hover {
color: black;
}
</style>
文字對齊 text-align
text-align： 屬性規定元素中的文本的水平對齊方式。
| 值 | 描述 |
|---|---|
| left | 左對齊，默認值 |
| right | 右對齊 |
| center | 居中對齊 |
| justify | 兩端對齊 |
文字裝飾 text-decoration
text-decoration屬性用來給文字添加特殊效果
| 值 | 描述 |
|---|---|
| none | 默認的文本 |
| underline | 文本下劃線 |
| overline | 文本上劃線 |
| line-through | 文本刪除線 |
經常用於去掉 a標籤默認的下劃線。
a {text-decoration: none;}
首行縮進 text-indent
將段落的第一行縮進 32像素
p {text-indent: 48px;}
背景屬性
背景圖片
<style>
div {
width: 1000px;
height: 1000px;
background-color: orange;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-position: 10px 50px;
background-position: center center;
background: url("111.jpg") red no-repeat center right;
}
</style>
background-color：背景色，能夠填顏色英文單詞、十六進制、rgb、rgba
background-image：
url()填寫圖片的路徑background-position：定義圖片的位置。
background-repeat：定義圖片平鋪方式
repeat：默認值，背景圖片平鋪整個背景。
repeat-x：背景圖片在水平方向上平鋪
repeat-y：背景圖片在垂直方向上平鋪
no-repeat：背景圖片不平鋪，只顯示一張
支持簡寫：圖片地址、背景色、平鋪方式、圖片位置
background: url("111.jpg") red no-repeat center right;
背景圖片應用場景：
全部瀏覽器你可以看到的都是走網路請求傳輸過來的
當你的網站須要用到不少小圖標的時候，能夠將全部的小圖片放在一張圖片上，而後經過背景圖片的位置來控制顯示哪個小圖片，從而節省加載資源
如今，通常直接將圖片轉化爲文字代碼來傳輸，再將文字代碼翻譯爲圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
}
.box {
width: 100%;
height: 500px;
background: url("111.jpg") red no-repeat center center;
background-attachment: fixed;
}
.d1 {
height: 500px;
background-color: tomato;
}
.d2 {
height: 500px;
background-color: steelblue;
}
.d3 {
height: 500px;
background-color: mediumaquamarine;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="box"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
邊框
邊框 border 後面寫三個參數：
- border-color：邊框的顏色
- border-style：邊框的樣式
- border-width：邊框的寬度
屬性能夠簡寫，位置無順序
border: 3px solid black
也能夠以單獨設置樣式、顏色、粗細
p {
border-left: 3px solid red;
border-bottom: 5px dotted green;
border-top: 1px dashed orchid;
border-right: 10px solid dimgrey;
border-style: dot-dash;
border-color: red;
}
邊框的樣式：
| 值 | 描述 |
|---|---|
| none | 無邊框 |
| dotted | 點狀虛線邊框 |
| dashed | 矩陣虛線邊框 |
| solid | 實線邊框 |
畫圓
畫圓：先畫邊框，其次調整圓角度數。
border-radius：50% 能夠經過這個參數來控制圓角的度數
若是寬和高同樣，那麼就是個圓形
若是不同，那麼不必定是橢圓。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 1px solid black;
background-color: red;
height: 400px;
width: 400px;
/*border-radius: 20px;*/
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
display屬性
display屬性用於控制HTML元素的顯示效果
| 值 | 描述 |
|---|---|
| none | 隱藏元素 |
| block | 將行內標籤變成塊級標籤 |
| inline | 將塊級標籤變成行內標籤 |
| inline-block | 既能夠設置長寬，又能夠在一行裏面展現 |
| visibility:hidden | 隱藏元素 |
雖說none參數能夠隱藏某個元素，另一個選擇器也能夠隱藏屬性：
visibility: hidden：隱藏某個元素以後，元素所佔的空間不會被釋放
display：none：隱藏某個元素以後，元素所佔的空間會被釋放，下面的元素會頂替，可能會影響佈局
盒子模型
首先說一下谷歌瀏覽器 有一個特色，body內默認有8px的外邊距，咱們能夠寫在css樣式中通用的樣式：
body {margin:0}
以快遞盒爲例 形容一下盒子模型：
- 外邊距（margin）：快遞盒與快遞盒之間的距離，用於控制標籤與標籤之間的距離
- 邊框（border）：快遞盒的厚度
- 內邊距（padding）：快遞盒內物品與快遞盒子之間的距離，用於控制文字內容與標籤之間的距離
- 內容（content）：快遞內容，顯示的文本和圖像
外邊距 margin
上下左右外邊距
margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0;
推薦使用簡寫：
body {
margin: 0; 只寫一個參數，上下左右外邊距所有調整
margin: 10px 15px; 寫兩個參數，第一個參數控制的上下，第二個參數控制左右
margin: 10px 20px 30px; 寫三個參數，1：上，2：左右，3：下
margin: 10px 20px 30px 40px; 寫四個參數，順時針，上右下左所有控制
}
內邊距 padding
上下左右內邊距
padding-bottom: 100px; padding-top: 100px; padding-left: 100px; padding-right: 100px;
推薦使用簡寫
padding: 0; 只寫一個參數，上下左右外邊距所有調整 padding: 10px 15px; 寫兩個參數，第一個參數控制的上下，第二個參數控制左右 padding: 10px 20px 30px; 寫三個參數，1：上，2：左右，3：下s padding: 10px 20px 30px 40px; 寫四個參數，順時針，上右下左所有控制
浮動
在CSS中，任何元素均可以浮動，主要用於頁面佈局。
浮動是脫離文檔流的，不會遵循塊級獨佔一行的特色。
浮動元素會生成一個塊級框，不論它自己是什麼元素。
關於浮動的兩個特色：
浮動的框是能夠向左 或 向右移動，知道它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
因爲浮動框不在文檔的普通流中，因此文檔的普通流中的快框表象的就像浮動框不存在同樣，也就是說浮動會形成父標籤塌陷。
請看下圖，當把框 1 向右浮動時，它脫離文檔流而且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看下圖，當框 1 向左浮動時，它脫離文檔流而且向左移動，直到它的左邊緣碰到包含框的左邊緣。由於它再也不處於文檔流中，因此它不佔據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
若是把全部三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
以下圖所示，若是包含框太窄，沒法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。若是浮動元素的高度不一樣，那麼當它們向下移動時可能被其它浮動元素「卡住」：
浮動有三種方式：
- left：向左浮動
- right：向右浮動
- none：默認值，不浮動
clear清除浮動
clear屬性規定元素的哪一側不容許其餘浮動元素。
clear屬性只對自身起做用，不會影響其餘元素。
| 值 | 描述 |
|---|---|
| left | 在左側不容許浮動元素 |
| right | 在右側不容許浮動元素 |
| both | 在左右兩側不容許浮動元素 |
| none | 默認值，容許浮動元素出如今兩側 |
清除浮動有三種方式：
- 固定高度僞
- 元素清除法（使用較多）
overflow:hidden
.clearfix:after {
content: ' ';
clear: both;
display: block;
}
哪裏塌陷了，就給那個標籤加一個clearfix類屬性便可。
若是給當前標籤加沒有效果，那麼能夠考慮給目標標籤外層再套一個div，而後給這個新的div加。
浮動的應用場景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.c1 {
float: left;
width: 20%;
height: 1000px;
background-color: red;
}
.c2 {
float: right;
width: 80%;
height: 1000px;
background-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
overflow溢出屬性
div {
height: 50px;
width: 50px;
border: 3px solid black;
/*overflow: hidden;*/
overflow: auto;
}
| 值 | 描述 |
|---|---|
| visible | 默認值，內容不會被修剪，呈如今元素框以外 |
| hidden | 超出的內容會隱藏（能夠作圓形頭像） |
| scroll | 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容 |
| auto | 若是內容被修剪， |
- overflow（水平和垂直均設置）
- overflow-x （設置水平方向）
- overflow-y （設置垂直方向）
作圓形頭像例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color:#418899 ;
}
.c1 {
width: 400px;
height: 400px;
border: 3px solid white;
overflow: hidden;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="c1">
<img src="111.jpg" alt="">
</div>
</body>
</html>
定位 position
全部的標籤默認都是靜態的，沒法直接經過 （top:10px; right:10px; bottom, left）調節位置，須要將其設置成可定位狀態。
- 默認無定位
- 相對定位：至關於標籤自身原來的位置，即靜態下的位置。
- 絕對定位：子標籤至關於已經定位過的父標籤
- 固定定位：相對於瀏覽器窗口，固定在某個位置，好比回到頂部。
無定位 static
static 默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的top：10px ;right:10px，bottom，left等值並無毛用
相對定位 relative
position:relative;
相對定位是相對於該元素在文檔流中的原始位置，即以本身原始位置（無定位時位置，上圖爲原始位置）爲參照物
有趣的是，即便設定了元素的相對定位以及偏移值，元素還佔有着原來的位置，即佔據文檔流空間。
對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
.c1 {
width: 100px;
height: 100px;
background-color: gold;
position: relative;
left: 100px;
top: 100px;
}
絕對定位 absolute
position:absolute;
定義：設置爲絕對定位的元素框從文檔流徹底刪除，並相對於最近的已定位祖先元素定位（必須是祖先，通常是父標籤）
若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）
元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：若是父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角爲原始點進行定位。這樣能很好的解決自適應網站的標籤偏離問題，即父級爲自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，而後Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。
.c2 {
position: relative;
height: 500px;
width: 200px;
background-color: black;
}
.c3 {
position: absolute;
height: 200px;
width: 800px;
top: -50px;
left: 200px;
background-color: pink;
}
固定定位 fixed
fixed：對象脫離正常文檔流，
使用top，right，bottom，left（不配合使用沒毛用）等屬性以整個窗口爲參考點進行定位，如：position:fixed;bottom:10px; right:10px;即爲當前頁面右下角
當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性 定義。
注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。
在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。
示例代碼：（網頁返回頂部按鈕樣式）
.c2 {
border: 5px solid black;
background-color: pink;
position: fixed;
bottom: 50px;
right: 50px;
}
是否脫離文檔流？
脫離文檔流的
絕對定位
固定定位
浮動
不脫離文檔流的
相對定位
z-index
#i2 {z-index: 999;}
設置對象的層疊順序
- z-index 值表示誰壓着誰，數值大的壓着數值小的。
- 只有定位了的元素，纔能有z-index，也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index
- z-index值沒有單位，就是一個正整數。默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在html後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
- 從父現象：父親慫了，兒子再牛逼也沒用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover {
background-color: rgba(128,128,128,0.4);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
.modal {
background-color: white;
z-index: 1000;
position: fixed;
height: 200px;
width: 400px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
</style>
</head>
<body>
<div>我是最底下的被壓着那個</div>
<div class="cover"></div>
<div class="modal">
<form action="">
<p>
username：<input type="text">
</p>
<p>
password：<input type="text">
</p>
<p>
提交：<input type="submit">
</p>
</form>
</div>
</body>
</html>
透明度
用來定義透明效果，取值範圍是0~1，0是徹底透明，1是徹底不透明
比背景色透明度更牛逼。
- 1. CSS 樣式背景操做
- 2. 前端基礎-JQuery操做樣式
- 3. 【Web 前端】CSS樣式
- 4. 前端css公共樣式
- 5. Python 前端CSS樣式
- 6. 前端之css樣式01
- 7. ［前端］HTML樣式----CSS
- 8. JQuery中操做Css樣式的方法
- 9. CSS樣式之操做屬性一
- 10. jquery操做css樣式的方法
- 更多相關文章...
- • Web 品質 - 樣式表 - 網站品質教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 委託模式
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS 樣式背景操做
- 2. 前端基礎-JQuery操做樣式
- 3. 【Web 前端】CSS樣式
- 4. 前端css公共樣式
- 5. Python 前端CSS樣式
- 6. 前端之css樣式01
- 7. ［前端］HTML樣式----CSS
- 8. JQuery中操做Css樣式的方法
- 9. CSS樣式之操做屬性一
- 10. jquery操做css樣式的方法