Python-CSS入門

時間 2019-11-09

標籤 python css 入門欄目 Python 简体版

原文原文鏈接

一.架構分析

頁面 => div的層級結構 => 具備採用哪些功能標籤顯示內容
結構層 > 位置層(佈局層) > 內容層css

二.css引入

- 行間式 
<div style="width: 100px; height: 100px"></div>
- 內聯式 
<head><style>
選擇器 {width: 100px;height: 100px;}
</style></head>
- 外聯式 /* 適合團隊高效率開發, 耦合性低, 複用性強 */
<link rel='stylesheet' type='text/css' href='./index.css'>html

三.三種引入"優先級"分析

1.沒有優先級
2.不一樣的屬性樣式協同操做,相同的樣式採用覆蓋機制,選擇邏輯最下方的
3.行間式必定是邏輯最下方的樣式瀏覽器

四選擇器

選擇器:css鏈接html標籤的橋樑,創建鏈接後就能夠控制標籤樣式
* | div | . | #
標籤: 通常用於最內層樣式修飾
類:使用範圍最廣,佈局的主力軍
id:惟一標識的佈局,不能重複
優先級:!important> id >類[屬性] >標籤> 通配 (優先級:同一標籤同一屬性)
<style>span{font-size:20px!important;}</style>(儘可能不要使用!important)架構

組合選擇器權重(同類型個數比較)
僞類選擇器工具

1.組合選擇器

- 羣組選擇器

/* 每一個選擇器位能夠位三種基礎選擇器的任意一個, 用逗號隔開, 控制多個 */
div, #div, .div {color: red}佈局

- 後代(子代)選擇器

.sup .sub {
後代,sup必定是sub的父代(不必定是父集,sub就是被sup直接嵌套)
}
.sup > .sub {子代}post

- 兄弟(相鄰) 選擇器

.up ~ .down {兄弟}
.up + .down {相鄰}性能

- 交集選擇器

section.ss#s {標籤類名id名綜合修飾}字體

2.複雜選擇器的優先級

1. 越靠近標籤的優先級越高(就近原則)
2. 權重的計算
　　1. 內聯樣式1000
　　2. ID選擇器100
　　3. 類選擇器10
　　4. 元素選擇器1

div#d1(101)/div.c1(11)/div .c1url

3.僞類選擇器

a連接標籤四大僞類
:link 初始狀態
:hover(鼠標懸浮!!!!!!)
:active(鼠標點擊中)
:visited
:focus(input標籤獲取光標焦點)
位置相關
:nth-child() | :last-child |:first-child先肯定位置再匹配類型
:nth-of-type() 先匹配類型再肯定位置
取反
選擇器:not(修飾詞) | div:not(:nth-child(2))
僞元素
:before (盒子渲染前)
:after (盒子渲染後)
:focus (表單標籤獲取焦點)
:blur

五 CSS屬性

0. 高度和寬度,標籤的分類

1. 標籤的分類(標籤默認是否獨佔一行)
1. 塊級標籤
div p h1~h6 hr ul>li table>tr
2. 行內標籤
span a input img i...
2. 塊級標籤才能設置寬和高
3. max-width: 100%
- max-width --> 最大的寬度
- 100% --> 全部涉及到%都是指佔父標籤的百分比

1. 字體相關

1. 字體 --> font-family：「」
/*字族*/ font-family: "STSong", "微軟雅黑";
/*STSong做爲首選字體, 微軟雅黑做爲備用字體*/
2. 字體大小 --> font-size: 40px;
3. 字體粗細 --> font-weight: 900;
4. 字體顏色 --> color
- red 直接寫英文名字
- #FFFFFF
- rgb(255,255,255)
- rgba(255,255,255,0.6)

2. 文本屬性

1. text-align:center 對齊方式
2. text-indent: 28px 首行縮進
3. line-height：父標籤的高度（實現單行文本的垂直居中）
4. text-decoration 裝飾 (去除a標籤的下劃線(text-decoration: none))

3. 背景background

1. background-color:red
2. background-image 背景圖片(九宮格涮葫蘆娃) url() no-repeat 50% 50%
3. background: url() no-repeat center
4. background-attachment: fixed 背景不動的實例

4. 邊框

1. border-width (邊框寬度)
2. border-style (邊框樣式)
3. border-color (邊框顏色)
簡寫:border: 1px solid red;
border-radius: 50%; --> 畫圓

5. CSS盒子

內容(content)-->內填充(padding)-->邊框(border)-->外邊距(margin)
1. content (內容) 提供給內容(文本,圖片,子標籤整個盒子)的顯示區域
2. padding (內填充) 介於border與content之間的區域
想讓標籤撐起來（內容和邊框之間的距離變大）設置padding
3. border (邊框) 寬度顏色自身定義,padding和content顏色有背景色填充
4. margin (外邊距) 多用於調整調整標籤之間的距離 (注意兩個挨着的標籤margin取最大值)
控制盒子位置==>盒模型佈局,不參與盒子顯示,其餘都參與盒子顯示

注意:
當兩個標籤之間的外邊距有重疊的話，會按照最大的外邊距來顯示
要習慣看瀏覽器console窗口那個盒子模型

# 總體設置 padding: 上右下左 (無值邊取對邊)
# 總體設置 border: 10px solid black;

邊界圓角: border-radius:50%; 圓形

坑1:父子聯動;
解決方案1:子級裏放個浮動 ,後再margin佈局
float:left;
margin-top:30px;
解決方案2:position:relative;
top:30px;
坑2:上兄弟下margin和下兄弟上margin重疊取大值

6. 顯示效果display

脫離文檔流 ,其中就是產生了BFC

display:
- none 不顯示(不讓標籤顯示,不佔位)
- block 按照塊級標籤來顯示
- inline 按照行內標籤來顯示
- inline-block 既有塊級又有行內的效果

/* inline */
/*1.同行顯示, 就至關於純文本, 當一行顯示不下, 如就是一個字顯示不下,那麼顯示不下的那一個字就會自動換行,和純文本的區別就是有標籤總體的概念,標籤與標籤間有一個空格的隔斷*/
/*2.支持部分css樣式, 不支持寬高 | 行高(行高會映射到父級block標籤) | margin上下*/
/*3.content由文本內容撐開*/
/*4.inline標籤只嵌套inline標籤*/
/* inline-block */
/*1.同行顯示, 當一行顯示不下, 標籤會做爲一個總體換行顯示*/
/*2.支持全部css樣式*/
/*3.content默認由文本(圖片)內容撐開,也能夠自定義寬高, 當自定義寬高後,必定採用自定義寬高(顯示區域不足,內容會在標籤內容換行顯示,可能超出顯示區域)*/
/*4.inline-block標籤不建議嵌套任意標籤*/
/* block */
/*1.異行顯示, 無論自身區域多大, 都會獨佔一行*/
/*2.支持全部css樣式*/
/*3.width默認繼承父級,height由內容(文本,圖片,子標籤)撐開, 當設置自定義寬高後,必定採用自定義寬高*/
/*4.block能夠嵌套任意標籤*/

7. float(浮動)

1. 多用於實現佈局效果
1. 頂部的導航條
2. 頁面左右分欄 (博客頁面:左邊20%,右邊80%)
2. float取值:
1. left
2. right
3. none
3. 浮動的特色
1. 任何標籤均可以浮動
2. 一個標籤浮動以後都變成塊級標籤（能夠設置寬和高）
a標籤float以後就能夠設置高和寬
3. 浮動的標籤脫離文檔流（它的位置會被下面的標籤擠佔）

8 .overflow

/*overflow: 處理內容超出盒子顯示區域*/
overflow: auto | scroll | hidden
/*auto: 自適應, 內容超出, 滾動顯示超出部分, 不超出則正常顯示*/
/*scroll: 一直採用滾動方式顯示*/
/*hidden: 隱藏超出盒子顯示範圍的內容*/

9. clear 清除浮動

--> 清除浮動的反作用(內容飛出,父標籤撐不起來)
1. 定義一個用於清除浮動的工具樣式類,結合僞元素來實現
.clearfix:after {
content: "",
display: "block",
clear: both;
}

2. clear取值:
1. left
2. right
3. both

10. 溢出

1. 標籤的內容放不下(溢出)
2. 取值:
1. hidden --> 溢出的部分隱藏起來
2. scroll --> 出現滾動條
3. auto 根據內容自行調整
4. scroll-x
5. scroll-y
例子:
圓形頭像的例子
1. overflow: hidden
2. border-radius: 50% (圓角)

11. 定位postion

0. static(默認)
1. 相對定位---相對本身原本應該在的位置
佈局後不影響自身原有位置,不脫離文檔流
postion: relative;
left: 100px;
2. 絕對定位---相對已經定位過的父標籤
父級必須本身設置寬高,徹底脫離文檔流
position：absolute;
left: 100px;
3. 固定定位---相對瀏覽器窗口
相對於頁面窗口是靜止的,徹底脫離文檔流
postion: fixed;
right: 50px;
bottom: 50px;

補充:
脫離文檔流的3種方式
float
absolute
fixed

12. opacity (不透明度)

1. 取值0~1
2. 和rgba()的區別:
1. opacity改變元素\子元素的透明度效果
2. rgba()只改變背景顏色的透明度效果

13. z-index

1. 數值越大,越靠近你
2. 只能做用於定位過的元素

3. 自定義的模態框示例

14. 精靈圖:

<head>
<style type="text/css">
.lt1 {
width: 155px;
height: 48px;
background: url('img/bg.png') no-repeat;
background-position:0 0;
}
.lt1:hover {
cursor: pointer;
background: url('img/bg.png') no-repeat 0 -48px;
}
/*1.顯示區域必定要與精靈圖目標小圖大小一致*/
/*2.經過背景圖片定位方式將目標小圖移至顯示位置*/
background-position裏一般是寫負值
</style>
</head>
<body>


<div class="box"></div>
<div class="lt1"></div>
</body>