python-day52--前端html、css
阿新 • • 發佈:2017-09-22
gree size day5 20px text posit for cal stat
一、html需掌握的:
1. img標簽 屬性:src alt title width height 2. a標簽 屬性:href target 3. ul 標簽及li 標簽,二者都是塊級標簽 ul 屬性(type:disc circle square none) 4. table 標簽及 tr 標簽 和 td 標簽和 th 標簽 屬性:border cellpadding cellspacing width rowspan colspan 5. form 表單 input 標簽 :type類型 6. select 標簽 option 標簽 屬性:multiple 及 selected7. lable 標簽 屬性:for
二、css需要掌握的第一部分:查找標簽
1.css三種導入方式:
1.行內式:常用在網站頁面最下端,網站的介紹中
缺點:html與css代碼雜糅在一起,耦合性太強
2.嵌入式:<style></style>
3.鏈接式:<link rel="stylesheet" href=""/>
2.css選擇器:
一 基本選擇器 1 標簽選擇器 div{ color: red; } 2 id選擇器#p2{ color: red; } 3 class選擇器 .c1{ color: red; } 4 通配選擇器(了解) * { color: red; } 二 組合選擇器 1 後代選擇器 .c2 p{ color: red; } 2 子代選擇器 .c2>p{ color: red; }3 毗鄰選擇器 (了解) .c2+p{ color: red; } 4 兄弟選擇器 (了解) .c2~p{ color: red; } 5.多元素選擇器 .c2 .c3,.c2~.c3{ color: red; background-color: green; font-size: 15px; } 6. p.c1{ color: red; } 表示的是選擇一個既是p標簽並且是c1類標簽的 7. class=‘s1 c1‘ 標簽可以有多個類名 8.屬性選擇器: (可以自定義屬性) 1. [egon] { color: red; } 2. [egon=‘dog‘] { color: red; } 3. p[egon] { color: red; } 選擇的是p標簽中屬性是egon的 如:<p egon="dog">asd</p>
3.偽類: 偽類都是通過: 實現的 偽類的目的:解耦
anchor偽類: 一般和a標簽連用
屬性:
:link {color: red;} 沒有接觸過的 鏈接是 紅色
:hover {color: gray;} 鼠標懸浮在鏈接上 是 灰色
:active {color: green;} 訪問時 是 綠色
:visited {color: gold;} 訪問完 是 黃色
.outer:hover .inner1{color: gold;}
表示的是 懸浮在outer位置時 outer的後代inner1區域變化顏色
這種情況,只能是後代,其他情況不行
before after 偽類 例:p:before{content:"hello";color:red;}
4.選擇器優先級:
三、css需要掌握的第二部分:屬性操作
1.文本:
1.顏色:十六進制/red/RGB 2.位置: 水平:text-align:left / right / center / justify 垂直:line-height=行高 3.間距:line-height:10px; 4.文本與圖片對齊:vertical-align:middle / top / ±數字(+下移,-上移) 註意:動的是圖片 5.對 a 標簽操作時 一定要定位到 a 標簽:text-decoration:none; 去掉a 標簽的下劃線 6.font-size:10px; 字體大小 7.font-weight:light / bold / broder 調字體粗細 8.font-style:oblique/italic 斜體 9.text-indext:30px; 首行縮進
10.letter-spacing:10px; 字母間距
11.word-spacing:20px; 單詞間距
2.內外邊距 padding 與margin
padding 內邊距 加上padding後盒子區域會變大 padding 簡寫: padding:50px 上下左右都是50 :50px 20px 上下50 :50px 20px 10px 上 50 左右 20 下 10 :50px 20px 10px 10px 上 50 右 20 下 10 左 10 margin:盒子與盒子的距離(外邊距) {width:80%; margin: 0 auto; } 0 表示上下距離,auto 是左右居中
3.邊框屬性border
border 加上border後盒子區域會變大 屬性: 1.border-width 2.border-style 3.border-color 4.簡寫: border:3px solid red;
4.背景屬性
1. background-color: red; 2.background-image: url(""); 3.background-repeat: no-repeat / repeat-x / repeat-y; 圖片重復 4.background-position: center; (與background-position:center center一樣) background-position: 400px 200px; 背景圖片距離左邊界400px,上邊界200px 5.簡寫:background:url("") no-repeat center; 圖片居中不重復 6.窗口小圖片大時,移動圖片,在瀏覽器中調尺寸
5.display 屬性
dispaly:inline-block 變成內聯塊級標簽---可以解決塊級在一行顯示問題
dispaly:none 隱藏盒子
三個盒子,如果中間的盒子設置了dispaly:none ,並且它是三無屬性(無邊框、無padding、無文本),那麽下方盒子就會頂上來
6.overflow 屬性
overflow:hidden / auto / scroll
overflow:hidden 解決溢出問題
7.position 定位
1. position:static 默認位置 2. position:fixed 固定位置 例子: position:fixed; top / left / bottom / right :20px (相對可視窗口的距離) 3. position:relative; 相對自己的位置,並且原位置保存 例子: position:relative; top:20px; left:200px; 4. position:absolute; 相對已定位的父級,並且原位置不保存 例子: position:absolute; top:200px; left:200px;
8.float 浮動屬性: 解決多個塊級標簽在一行顯示
1.浮動布局的位置:看上一個元素是不是浮動元素,如果是就挨著放,如果不是就另起一行放
2.清除浮動:
1 clear:left; 清除自身左側不能有浮動元素
2 clear:right; 清除自身右側不能有浮動元素
3 clear:both; 清除自身左右兩側不能有浮動元素(按照先後順序判斷)
4 父級塌陷問題
python-day52--前端html、css