前端基礎之css復習
阿新 • • 發佈：2017-07-22
play 平鋪 city port 空格 ul li input 現實 進行
!/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、文內的樣式優先級為1, 0, 0, 0，所以始終高於外部定義。
#
# 2、有!important聲明的規則高於一切。
#
# 3、如果!important聲明沖突，則比較優先權。
#
# 4、如果優先權一樣，則按照在源碼中出現的順序決定，後來者居上。
#
# 5、由繼承而得到的樣式沒有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～h5、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>
前端基礎之css復習