前端基礎之css複習
!/usr/bin/env python# -*- coding: utf-8 -*-#前端基礎之CSS#CSS 語法#CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。''' selector { #選擇器 property: value; #屬性：值 property: value; ... property: value }'''#例如：#h1 {color:red; font-size:14px;}# css的四種引入方式#1.行內式# 行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，不推薦使用#<p style="hello yuan</p>#2.嵌入式#嵌入式是將CSS樣式集中寫在網頁的 < head > < / head > 標籤對的 < style > < / style > 標籤對中。格式以下：# <head># <meta charset="UTF-8"># <title>Title</title># <style># p{# # }# </style># </head>#3 連接式#將一個.css文件引入到HTML文件中#引入姿式#<link href="mystyle.css" rel="stylesheet" type="text/css"/>#4.導入式# 將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法以下：# < style# type = "text/css" >### @### import## "mystyle.css";# 此處要注意.css文件的路徑## < / style ># 注意：## 導入式會在整個網頁裝載完後再裝載CSS文件，所以這就致使了一個問題，若是網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用連接式時與導入式不一樣的是它會以網頁文件主體裝載前裝載CSS文件，所以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，而後再顯示有樣式的網頁，這是連接式的優勢#css選擇器#基本選擇器## 標籤選擇器 p {color:green;}# id選擇器 #info {font-size:30px}## 基本選擇器## class選擇器 .info {background：#ffo}# 通配選擇器 * { maggin:0; padding:0;}#組合選擇器# E, F# 多元素選擇器，同時匹配全部E元素或F元素，E和F之間用逗號分隔: div, p# {color: # f00; }## E F 後代元素選擇器，匹配全部屬於E元素後代的F元素，E和F之間用空格分隔: li# a# {font - weight: bold;｝## E > F# 子元素選擇器，匹配全部E元素的子元素F: div > p# {color: # f00; }## E + F 毗鄰元素選擇器，匹配全部緊隨E元素以後的同級元素F: div + p# {color: # f00; }## E ~ F 普通兄弟選擇器（以破折號分隔）:.div1# ~ p# {font - size: 30px;}# 注意，關於標籤嵌套：## 通常，塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。須要注意的是，p標籤不能包含塊級標籤。#屬性選擇器# E[att]# 匹配全部具備att屬性的E元素，不考慮它的值。（注意：E在此處能夠省略。# 好比「[cheacked]」。如下同。） p[title]# {color: # f00; }### E[att = val] 匹配全部att屬性等於「val」的E元素# div[### class =」error」] {color: # f00; }### E[att# ~ = val] 匹配全部att屬性具備多個空格分隔的值、其中一個值等於「val」的E元素# td[### class ~=」name」] {color: # f00; }### E[attr ^= val] 匹配屬性值以指定值開頭的每一個元素# div[### class ^="test"]{background: # ffff00;}### E[attr$=val] 匹配屬性值以指定值結尾的每一個元素# div[### class $="test"]{background: # ffff00;}### E[attr *= val] 匹配屬性值中包含指定值的每一個元素# div[### class *="test"]{background: # ffff00;}#僞類#anchor僞類：專用於控制連接的顯示效果''' a:link（沒有接觸過的連接）,用於定義了連接的常規狀態。 a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。 a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接。 a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態。 僞類選擇器 : 僞類指的是標籤的不一樣狀態: a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態 a:link {color: #FF0000} /* 未訪問的連接 */ a:visited {color: #00FF00} /* 已訪問的連接 */ a:hover {color: #FF00FF} /* 鼠標移動到連接上 */ a:active {color: #0000FF} /* 選定的連接 */ 格式: 標籤:僞類名稱{ css代碼; }'''#樣例# <!DOCTYPE html># <html lang="en"># <head># <meta charset="UTF-8"># <title>Title</title>## <style>## .top{# # width: 100px;# height: 100px;# }# .bottom{# # width: 100px;# height: 100px;# }## .outer:hover .bottom{# # }## 注意:必定是outer:hover 控制outer裏某一個標籤,不然無效## .top:hover .bottom{# # }# </style># </head># <body>### <div class="outer"># <div class="top">top</div># <div class="bottom">bottom</div># </div>##### </body># </html>#before after僞類# :before p:before 在每一個<p>元素以前插入內容# :after p:after 在每一個<p>元素以後插入內容## 例：p:before{content:"hello";color:red;display: block;}#選擇器的優先級 #css的繼承#繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。#body{color:red;} <p>helloyuan</p>#這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0。#p{color:green}#發現只須要給加個顏色值就能覆蓋掉它繼承的樣式顏色。因而可知：任何顯示申明的規則均可以覆蓋其繼承樣式。 # 此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。#div{# border:1px solid #222# }## <div>hello <p>yuan</p> </div>#css的優先級# 所謂CSS優先級，便是指CSS樣式在瀏覽器中被解析的前後順序。## 樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：### 1 內聯樣式表的權值最高 style=""－－－－－－－－－－－－1000；## 2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－－100## 3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10## 4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-－1## 按這些規則將數字符串逐位相加，就獲得最終的權重，而後在比較取捨時按照從左到右的順序逐位比較。# 一、文內的樣式優先級爲1, 0, 0, 0，因此始終高於外部定義。## 二、有!important聲明的規則高於一切。## 三、若是!important聲明衝突，則比較優先權。## 四、若是優先權同樣，則按照在源碼中出現的順序決定，後來者居上。## 五、由繼承而獲得的樣式沒有specificity的計算，它低於一切其它規則(好比全局選擇符 * 定義的規則)。#css屬性操做#css text#文本顏色：color# 顏色屬性被用來設置文字的顏色。## 顏色是經過CSS最常常的指定：## 十六進制值 - 如: ＃FF0000# 一個RGB值 - 如: RGB(255,0,0)# 顏色的名稱 - 如: red#p { color: rebeccapurple; }#水平對齊方式# text-align 屬性規定元素中的文本的水平對齊方式。## left 把文本排列到左邊。默認值：由瀏覽器決定。# right 把文本排列到右邊。# center 把文本排列到中間。# justify 實現兩端對齊文本效果。# <!DOCTYPE html># <html># <head># <meta charset="utf-8"># <title>css</title># <style># h2 {text-align:center;}# p.publish_time {text-align:right;}# p.content {text-align:justify;}# </style># </head>## <body># <h1>CSS text-align 水平居中</h1># <p class="publish_time">2017 年 5 月 17 號</p># <p class="content"># 有個落拓不得志的中年人每隔三兩天就到教堂祈禱，並且他的禱告詞幾乎每次都相同。第一次他到教堂時，# 跪在聖壇前，虔誠地低語：「上帝啊，請念在我多年來敬畏您的份上。讓我中一次彩票吧！阿門。」# 幾天後，他又垂頭喪氣回到教堂，一樣跪着祈禱：「上帝啊，爲什麼不讓我中彩票？我願意更謙卑地來# 服侍你，求您讓我中一次彩票吧！阿門。」又過了幾天，他再次出如今教堂，一樣重複他的祈禱。如此周而# 復始，不間斷地祈求着。到了最後一次，他跪着：「個人上帝，爲什麼您不垂聽個人祈求？讓我中一次彩票吧！# 只要一次，讓我解決全部困難，我願終身奉獻，專心侍奉您……」就在這時，聖壇上發出一陣宏偉莊嚴的聲# 音：「我一直垂聽你的禱告。但是最起碼？你也該先去買一張彩票吧!」</p># <p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工做的。</p># </body>## </html>#文本其它屬性# /*### font-size: 10px;## line-height: 200px; 文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比## vertical-align:－4px 設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效### text-decoration:none text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除連接的下劃線## font-family: 'Lucida Bright'## font-weight: lighter/bold/border/## font-style: oblique## text-indent: 150px; 首行縮進150px## letter-spacing: 10px; 字母間距## word-spacing: 20px; 單詞間距## text-transform: capitalize/uppercase/lowercase ; 文本轉換，用於全部字句變成大寫或小寫字母，或每一個單詞的首字母大寫### */#背景屬性#屬性介紹# background-color# background-image# background-repeat# background-position# background - color: cornflowerblue## background - image: url('1.jpg');## background - repeat: no - repeat;# (repeat: 平鋪滿)## background - position: right# top（20# px# 20# px）;#簡寫# background:#ffffff url('1.png') no-repeat right top;#邊框屬性#屬性介紹#border-width# border-style (required)# border-color# border - style: solid;## border - color: chartreuse;## border - width: 20px;#簡寫 # 簡寫：border: 30px rebeccapurple solid;#框-單獨設置各邊# border-top-style:dotted;# border-right-style:solid;# border-bottom-style:dotted;# border-left-style:none;# 列表屬性# list - style - type# 設置列表項標誌的類型。# list - style - image# 將圖象設置爲列表項標誌。# list - style - position# 設置列表中列表項標誌的位置。## list - style# 簡寫屬性。用於把全部用於列表的屬性設置於一個聲明中#外邊距(margine)和內邊距(padding)# margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。# padding: 用於控制內容與邊框之間的距離；# Border(邊框): 圍繞在內邊距和內容外的邊框。# Content(內容): 盒子的內容，顯示文本和圖像。#margine(外邊距)# 單邊外邊距屬性：# margin-top:100px;# margin-bottom:100px;# margin-right:50px;# margin-left:50px;# 簡寫屬性# margin:10px 20px 20px 10px；## 上邊距爲10px# 右邊距爲20px# 下邊距爲20px# 左邊距爲10px## margin:10px 20px 10px;## 上邊距爲10px# 左右邊距爲20px# 下邊距爲10px## margin:10px 20px;## 上下邊距爲10px# 左右邊距爲20px## margin:25px;## 全部的4個邊距都是25px# 居中應用# margin: 0 auto;#padding(內邊距)# 單獨使用填充屬性能夠改變上下左右的填充。縮寫填充屬性也可使用，一旦改變一切都改變。## 設置同margine；# <!DOCTYPE html># <html lang="en"># <head># <meta charset="UTF-8"># <title>Title</title>## <style># .outer{# margin: 0 auto;# width: 80%;## }## .content{# # height: 500px;## }## a{# text-decoration: none;# }## .page-area{## text-align: center;# padding-top: 30px;# padding-bottom: 30px;# ## }## .page-area ul li{# display: inline-block;# }### .page-area ul li a ,.page-area ul li span{## display: inline-block;# color: #369;# height: 25px;# width: 25px;# text-align: center;# line-height: 25px;## padding: 8px;# margin-left: 8px;## border: 1px solid #e1e1e1;# border-radius: 15%;## }## .page-area ul li .page-next{# width: 70px;# border-radius:0# }### .page-area ul li span.current_page{# border: none;# color: black;# font-weight:900;# }## .page-area ul li a:hover{## color: #fff;# # }### </style># </head># <body>## <div class="outer">## <div class="content"></div>## <div class="page-area">## <ul>## <li><span class="current_page">1</span></li># <li><a href="#" class="page-a">2</a></li># <li><a href="#" class="page-a">3</a></li># <li><a href="#" class="page-a">4</a></li># <li><a href="#" class="page-a">5</a></li># <li><a href="#" class="page-a">6</a></li># <li><a href="#" class="page-a">7</a></li># <li><a href="#" class="page-a">8</a></li># <li><a href="#" class="page-a">9</a></li># <li><a href="#" class="page-a">10</a></li># <li><a href="#" class="page-a page-next">下一頁</a></li>## </ul>## </div>## </div>### </body>#</html>#float屬性# 先來了解一下block元素和inline元素在文檔流中的排列方式。## block元素一般被現實爲獨立的一塊，獨佔一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素能夠設置width、height、margin、padding屬性；## inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效## 常見的塊級元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。# 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等# 所謂的文檔流，指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。## 脫離文檔流，也就是將元素從普通的佈局排版中拿走，其餘盒子在定位的時候，會當作脫離文檔流的元素不存在而進行定位。## 假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)；若是A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部老是和上一個元素的底部對齊。此外，浮動的框以後的block元素元素會認爲這個框不存在，但其中的文本依然會爲這個元素讓出位置。 浮動的框以後的inline元素，會爲這個框空出位置，而後按順序排列。## 示例代碼：# <!DOCTYPE html># <html lang="en"># <head># <meta charset="UTF-8"># <title>Title</title># <style># *{# margin: 0;# }## .r1{# width: 300px;# height: 100px;# # float: left;# }# .r2{# width: 200px;# height: 200px;# # /*float: left;*/## }# .r3{# width: 100px;# height: 200px;# # float: left;# }# </style># </head># <body>## <div class="r1"></div># <div class="r2"></div># <div class="r3"></div>#### </body># </html>
相關文章
- 1. 前端之基礎複習
- 2. 前端基礎之CSS（1）
- 3. 前端基礎之CSS
- 4. 前端基礎之css
- 5. 前端之基礎css
- 6. 前端基礎之---css
- 7. 系統學習前端之CSS 基礎
- 8. 前端之CSS基礎學習
- 9. 前端基礎HTML基礎之CSS
- 10. 前端複習之JavaScript基礎
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端之基礎複習
- 2. 前端基礎之CSS（1）
- 3. 前端基礎之CSS
- 4. 前端基礎之css
- 5. 前端之基礎css
- 6. 前端基礎之---css
- 7. 系統學習前端之CSS 基礎
- 8. 前端之CSS基礎學習
- 9. 前端基礎HTML基礎之CSS
- 10. 前端複習之JavaScript基礎