前端學習之-Css

時間 2019-11-19
標籤前端學習 css 欄目 CSS 简体版
原文原文鏈接
CSS是Cascading Style Sheets的簡稱，中文稱爲層疊樣式表，用來控制網頁數據的表現，                                可使網頁的表現與數據內容分離。css的四種引入方式:1.行內式<p style="hello yuan</p>2.嵌入式<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        p{            font-style:italic;">#2b99ff;        }    </style></head>3.連接式<link href="mystyle.css" rel="stylesheet" type="text/css"/>4.導入式< styletype = "text/css" >@import"mystyle.css";此處要注意.css文件的路徑< / style >　css的選擇器（Selector）1 基礎選擇器＊ :通用元素選擇器，匹配任何元素   * { margin:0; padding:0; }E  :標籤選擇器，匹配全部使用E標籤的元素   p { color:green; }.info和E.info: class選擇器，匹配全部class屬性中包含info的元素   .info { background:#ff0; }#info和E#info  id選擇器，匹配全部id屬性等於footer的元素         #info { background:#ff0; }2 組合選擇器div,p  多元素選擇器div p 後代選擇器div>p 子代選擇器div+p 毗鄰選擇器3 屬性選擇器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;}4 僞類(Pseudo-classes)a:link（沒有接觸過的連接）,用於定義了連接的常規狀態。a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接。a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態。僞類選擇器 : 僞類指的是標籤的不一樣狀態:           a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態CSS的經常使用屬性 :1  顏色屬性< div style = "color:blueviolet" > ppppp < / div >< div style = "color:#ffee33" > ppppp < / div >< div style = "color:rgb(255,0,0)" > ppppp < / div >< div style = "color:rgba(255,0,0,0.5)" > ppppp < / div >2  字體屬性font - size: 20px / 50 % / largerfont - family:'Lucida Bright'font - weight: lighter / bold / border /< h1 style = "font-style: oblique" > 老男孩 < / h1 >3  背景屬性font-weight:bold;">'1.jpg');background-repeat: no-repeat;(repeat:平鋪滿)background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)4  文本屬性font-size: 10px;text-align: center;   橫向排列line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比vertical-align:－4px  設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效text-indent: 150px;   首行縮進letter-spacing: 10px;word-spacing: 20px;text-transform: capitalize;5  邊框屬性border - style: solid;border - color: chartreuse;border - width: 20px;簡寫：border: 30px rebeccapurple solid;6   列表屬性ul,ol{   list-style: decimal-leading-zero;         list-style: none; <br>         list-style: circle;         list-style: upper-alpha;         list-style: disc; }7  dispaly屬性dispaly:none        block        inline        inline-block8  外邊距和內邊margin border padding left right bottom topmargin:            用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。padding:           用於控制內容與邊框之間的距離；Border(邊框)       圍繞在內邊距和內容外的邊框;Content(內容)      盒子的內容，顯示文本和圖像。9 float屬性clear語法：clear : none | left | right | both取值：   none : 默認值。容許兩邊均可以有浮動對象        left : 不容許左邊有浮動對象        right : 不容許右邊有浮動對象        both : 不容許有浮動對象可是須要注意的是：clear屬性只會對自身起做用，而不會影響其餘元素。若是一個元素的右側有一浮動對象，而這個元素設置了不容許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。10 position(定位)1 staticstatic 默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的的。2  position: relative／absolute             relative 相對定位。相對定位是相對於該元素在文檔流中的原始位置，即以本身原始位置爲參照物。             absolute 絕對定位。其層疊經過z-index屬性定義。3  position:fixed            在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，            它都會固定在這個位置。