学起来 —— CSS 入门基础
生活随笔
收集整理的這篇文章主要介紹了
学起来 —— CSS 入门基础
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Hello,大家好！
小女來更博啦！CSS福利送上~~~
首先給大家介紹一下CSS到底是什么？
一、CSS概念
? ? ? ??W3C規范中，要求有三條：一 為“兩個分離”，二 為語言遵循語義化，三 為代碼書寫規范性。其中要求的第一條“兩個分離”指的是內容與表現分離以及內容與行為分離，而其中的“表現”指的就是CSS。CSS全稱Cascading Style Sheets，中文名為層疊樣式表，是一種用來表現HTML等文件樣式的計算機語言，可以給HTML帶來更多更精彩的表現形式。
二、CSS引入的三種方式
1、行內樣式表
? ? ? 直接在HTML標簽中，使用style=""的方式引用；
? ? ? eg.?<div style="height: 30px;"></div>
? ? ? 優點：優先級最高；使用靈活。?缺點：不符合W3C關于內容與表現分離的要求，不利于樣式復用；
2、內部樣式表
? ? ? 在 <head></head>標簽中，使用style標簽包裹CSS代碼。
<head><style type="text/css" ></style> </head>? ? ? ?特點：一定程度上實現了HTML與CSS的分離。但是分離不夠徹底，沒辦法實現多頁面共用樣式。
3、外部樣式表：
? ? ?將css單獨寫入css文件中，并與HTML文件關聯。
? ? 【導入CSS文件的兩種方式】? ? ?① 在head標簽中，使用link鏈接。
? ? ? ? ???eg. <link rel="stylesheet" type="text/css" href="css/01-CSS.css" />
? ? ?② 在style標簽中，使用@import 導入。 ? ? ? ? ? ?eg.?@import url("css/02-CSS導入方式和優先級");? ? ? ? ?優點：徹底實現HTML與CSS 的分離，符合W3C的規范，有利于多頁面復用，統一樣式。常用link方式引入。?
?三、CSS常用選擇器
?<1> 通用選擇器
? ? ? ? 1.寫法：*{} ? ? ? ? 2.優先級：最低 <2> 標簽選擇器 ? ? ? ? 1.寫法：標簽名{} ? ? ? ? 2.作用：根據選擇器名稱，選中頁面中所有的HTML標簽。 <3> 類選擇器（class選擇器） ? ? ? ? 1.寫法：.class名{} ? ? ? ? ? ?調用：在HTML標簽中，使用class="class名稱"調用選擇器； ? ? ? ? 2.優先級: class選擇器 > 標簽選擇器; <4> ID選擇器 ? ? ? ? 1.寫法：#ID名{} ? ? ? ? ? ?調用：在HTML標簽中，使用id="id名"調用選擇器； ? ? ? ? 2.優先級：ID > class > 標簽選擇器 ; ? ? ? ? 3.同名id只能有一個； <style type="text/css" > *{color: pink;background-color: darkgrey;} li{color: red;}.li01{color: blue;}#first{color: green;} </style> <5> 交集選擇器 ? ? ? ? 1.寫法：選擇器1選擇器2選擇器3......{} ? ? ? ? ? ? ? ? ? ? 多個選擇器之間緊挨著，沒有任何分隔； ? ? ? ? 2.生效規則：一個標簽要滿足交集選擇器，則必須滿足交集選擇器中出現的所有選擇器； <6> 并集選擇器 ? ? ? ? 1.寫法：選擇器1,選擇器2,選擇器3,...,選擇器n{} ? ? ? ? ? ? ? ? ? ? ?選擇器之間，用 逗號 分割 ? ? ? ? 2.生效規則：只要滿足并集選擇器中的任何一個，就能生效。 <7> 后代選擇器 ? ? ? ? 1.寫法： 選擇器1 選擇器2 ... 選擇器n{} ? ? ? ? ? ? ? ? ? ? ? 選擇器之間，用 空格 分割 ? ? ? ? 2.生效規則：必須滿足后一個選擇器是前一個選擇器的后代，才會生效。 <8> 子代選擇器 ? ? ? ? 1.寫法：選擇器1>選擇器2>...選擇器n{} ? ? ? ? ? ? ? ? ? ? ?選擇器之間，用 > 分割 ? ? ? ? 2.必須滿足后一個選擇器是前一個選擇器的直接子代，才會生效。不能隔代，即中間包含其他標簽，不會生效。 #first.li01{color: deepskyblue;} #first,.li01{color: deeppink;} ul li{color: darkorange;} div>ul>.li01{background-color: deepskyblue;} <9> 選擇器的命名規則 ? ? ? ? ① 只能由字母、數字、下劃線、減號組成； ? ? ? ? ② 開頭不能是數字；減號也不能單個獨立存在，多個減號可以。 <10> 選擇器的優先級 ? ? ? ? 1. 第一原則：近者優先。作用于最里層的選擇器，生效； ? ? ? ? 2. 當作用于同一層時， ? ? ? ? ? ?每一種選擇器所占優先級，可以進行運算獲得： ? ? ? ? ? ?標簽選擇器占權重為1 ? ? ? ? ? ?class選擇器占比重為10 ? ? ? ? ? ?id選擇器占比重為100 ? ? ? ? ? ?行內樣式表 style=""占權重為1000 ? ? ? ? ? ?eg. ?.div1 #div2 div .div4 #li{} ? ? ? ? ? //221 ? ? ? ? ? ? ? ? ? .div1 .div2 #div #div4 #li{} ? ? ? //320 ? ? ? ? ? 【注】只有交集、后代、子代選擇器才參與權重的累加！而并集選擇器相當于寫了多個選擇器，沒有總優先級！ ? ? ? ? ? ? eg. ? ?#div，.div{} 并集選擇器相當于兩個選擇器，分別是10,100? ?? ? ? ? ?3. 如果計算出的優先級完全相同，則后寫的選擇器生效； ? ? ? ? ? ?eg. ?#div.div{} ? ? ? ? ? ? ? ? ? .div#div{} ? ? ? ? ? ? ? ? ? 兩者的優先級都是110，所有后寫的選擇器生效。 四、 CSS常用文本屬性 1. 字體、字號類 ? ? ? ? ? ? font-style: 設置斜體; italic傾斜 normal正常； ? ? ? ? ? ? font-weight: 字體粗細; bold加粗、normal正常、lighter變細；也可以通過100~900數值設置； ? ? ? ? ? ? font-size: 字體大小; 可以使用像素（px）、 百分比（%）或者 em，其中瀏覽器默認16px； ? ? ? ? ? ? ? ? ? ? ? ? ? ? 字號： 200% 表示 瀏覽器默認大小(16px)的兩倍= 32px ? ? ? ? ? ? font-family: "微軟雅黑" ,"幼圓", "隸書" ,"宋體", "黑體" ,sans-serif; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 設置字體，多個字體之間用逗號分隔。 ? ? ? ? ? ? font-variant: small-caps; 大寫變大，小寫變小。 <style type="text/css"> .div{width: 500px;height: 500px;color: #000000;background-color: rgba(255,0,222,0.3);} .div{font-weight: lighter;font-style: italic;font-size: 30px;font-family:"宋體","黑體","微軟雅黑","幼圓","隸書",sans-serif;font-variant: small-caps;font:75%/1.5 arial "微軟雅黑",sans-serif; } </style> 2. 字體顏色類 ? ?（1） color：字體顏色； ? ?（2） opacity：透明度，可選值0-1；1-不透明。0-全透明。 ? ?【CSS中的顏色單位】? ? ? ? ? ① 使用顏色英文表示：red/green/blue 紅綠藍 ? ? ? ? ② 使用十六進制表示：#ffffff #000 #000000 黑色 ? ? ? ? ③ 使用rgb（255,255,0）三個數值分別表示red、green、blue，范圍是0~255 ? ? ? ? ? ? ? ? ? ? rgba 第四位表示透明度，范圍0~1 其中0-全透明；1-不透明 ? ?【rgba和opacity的區別】 ? ? ? ? ?rgba本身可以設置顏色，而opacity必須配合其他顏色屬性使用 ? ? ? ? ?rgba 僅僅讓當前元素設置的顏色透明；而opacity會讓當前元素里面的所有文字、背景、子元素都透明。 3、行距、對齊類 ? ? ?（1）line-height：行高；可以寫px單位、可以直接寫數字（表示默認行距的幾倍）、可以寫%（表示默認行距的百分比）； ? ? ? ? ? ? ? 行高的作用：讓單行文字在div中垂直居中，設置行高=div的高度，可以使單行文字垂直居中； ? ? ?（2）text-align：設置區域內的行級元素的水平對齊方式（left、right和center） ? ? ?（3）letter-spacing：字符間距，字與字之間的距離。 ? ? ?（4）text-decoration: 下劃線 ? ? ? ? ? ? ?去掉超鏈接的下劃線： text-decoration: none; ? ? ?（5）overflow: 設置超出區域的文字顯示方式；? ? ? ? ? ?（6）text-overflow： 設置行末多余文字的顯示方式 （不能單獨用）需配合 white-space: nowrap; （文字不斷行）一起使用！ ?（7）white-space: nowrap; 設置中文行末，不斷行顯示。 ? ? ?（8）text-indent: ?首行縮進 ? ? ?（9）-webkit-text-stroke: 1px; 文字描邊 ? ? ? ? ? ? 【注】-webkit ：表示只有webkit內核瀏覽器上 才能生效。如chrome； ? ? （10） text-shadow 陰影 text-shadow:5px 10px 0px yellow ; 五、CSS 常用背景屬性 ? ? ? ?1、background-color：背景色 ? ? ? ?2、background-image：背景圖 兩者同時存在。背景圖覆蓋背景色。 ? ? ? ?3、background-repeat: repeat：平鋪； no-repeat：不平鋪； repeat-x：x軸 平鋪（一行） repeat-y：y軸 平鋪（一列） ? ? ? ?4、background-size:背景圖大小； ? ? ? ? ? 【指定寬度高度】 可以寫px，也可以寫%（父容器寬高的百分比）當寫兩個屬性時：表示寬和高當寫一個屬性時：表示寬度，高度將會等比縮放。 ? ? ? ?5、background-position: right bottom; 背景圖片偏移量 ? ? ? ? ? ? ?eg. background-position: right bottom; eg. background-position: 50px 50px; ? /*與左上角位置比較, 圖片向右移50px/向下移50px*/ ?左負右正、上負下正 ? ? ? ? ? ? ?eg.background-position: 30%; ? ?水平方向去掉圖片寬度，剩余區域 左邊：右邊 = 3:7 六、CSS盒模型 ? ? ?<1> margin: 200px;外邊距 ? ? ? ? ? ? ① 只寫一個值：表示四周外邊距均為指定值。 ? ? ? ? ? ? ② 寫兩個值：第一個數上下外邊距，第二個數左右外邊距。 ? ? ? ? ? ? ③ 寫三個值：表示上右下，左邊默認等于右邊。 ? ? ? ? ? ? ④ 寫四個值：表示上右下左四條邊順時針方向。 ? ? ? ? ? ? ⑤ margin:0 auto;設置塊級元素在父容器中水平居中。 ? ? ? ? ? ? ? 【區別】text-align: center; 是將塊級div中的文字關于該塊級div標簽水平居中。 ? ? ? <2> padding: 100px; 內邊距 ??設置方式與margin完全相同。 ? ? ? ? ? ? 【注】但是，使用內邊距會把div區域撐大，使用時必須注意div實際寬高為多大！ ? ? ? <3> border: 10px solid #0000FF;邊框 dotted - 虛線 solid - 實線 ? ? ? ? ? ? ? ① 設置邊框需要三個屬性：原則上三個屬性缺一不可，順序不可隨意修改 ? ? ? ? ? ? ? ② 可以使用top、right、bottom、left分別設置四個邊！ ? ? ? <4> border-radius 圓角 eg. ?border-radius: 20px 50px 20px 50px/20px 50px 20px 50px; ? ? ? <5> border-image 圖片邊框 ?eg. ?-webkit-border-image: url(img/008.png) 27/27px stretch; 拉伸 ? ? ? ? ? ? 【注意】第二個值圖片的切片寬度寫的時候不能帶px單位！第三個值邊框的寬度寫的時候必須帶px單位，與切片寬度用 / 分隔！類似于 font-size/line-height ? ? ? <6> box-shadow 盒子陰影 ?eg. ?box-shadow:20px 20px 20px 10px red inset ; 內陰影 ? ? ? <7> outline 外圍線 ?顯示在border外面， 并且不會占據空間。可能會覆蓋四周內容。 ? ? ? <8> 手動設置盒子類型? ? ? ? ? ? ? ? ? ? ? ? ? ? ? box-sizing: border-box; 怪異(IE)盒子[ 設置的寬度和高度，包含content+padding+border ]；? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? box-sizing: content-box; 標準盒子[設置的寬度和高度，僅僅包含content部分]； 默認效果。 七、CSS定位 ? ? ?<1> 相對定位 ? ? ? ? 1、使用position: relative ;設置元素為相對定位元素 ? ? ? ? ? ? ? 使用top right bottom left調整元素的位置 ? ? ? ? 2、當left 和right同時存在時，left生效； 當top 和bottom同時存在時，top生效 。 <head><meta charset="UTF-8"><title>CSS 定位</title><style type="text/css">#div1-1{width: 200px;height: 200px;background-color: red;position: relative ;top: 100px; /*距離原來位置的上邊100px top生效*/bottom: 200px;right: 200px; left: 100px; /*距離原來位置的左邊100px left生效*/z-index: -1;} #div1-2{width: 200px;height: 200px;background-color: yellow;position: relative; z-index: 0;}</style> </head> ? ? ? ? 3、定位機制： ? ? ? ? ? ? ? ① 相對定位是相對于自己原來的位置定位，當top等屬性不指定時，元素位置不發生改變； ? ? ? ? ? ? ? ② 相對定位不會釋放元素在原有文檔流中的位置，也不會影響其他文檔流元素位置。 ? ? ? ? 4、關于元素z軸重疊： ? ? ? ? ? ? ? ① 定位元素，默認的z軸高于普通文檔流元素。 ? ? ? ? ? ? ? ② 同為定位元素，后來者居上，即后面蓋住前面。 ? ? ? ? ? ? ? ③ 使用 z-index 手動調節定位元素的上下層z軸順序。z-index 默認0，而且只能作用于定位元素 ? ? ?<2> 絕對定位 ? ? ? ? 1、使用 position: absolute; 設置元素為絕對定位 ? ? ? ? 2、定位機制： ? ? ? ? ? ? ?① 相對于第一個使用了relative、absolute、fixed（進行了定位的）定位的祖先元素進行定位 ? ? ? ? ? ? ?② 如果所有的祖先元素都未定位，則相對于瀏覽器左上角進行定位。 ? ? ? ? ? ? ?③ 使用absolute的元素，會從文檔類中完全刪除，原有空間會被釋放。 #div2{width: 500px;height: 500px;background-color: blue; margin: 0 auto;position: relative; /* 目的:將絕對定位div2-1的位置限制于div2中*/}#div2-1{width: 200px;height: 200px;background-color: red;position: absolute;left: 100px;top: 100px;} ? ? ?<3> 固定定位? ? ? ? ? 1、固定定位使用 position=fixed; 設置固定位置 ? ? ? ? 2、固定定位，是一種特殊的絕對定位！只是祖先元素無法使用定位鎖住； ? ? ? ? 3、定位機制:?永遠相對于瀏覽器左上角進行定位，而且不隨滾動條的滾動而滾動。 ? ? ?<4> z-index 屬性 ? ? ? ? 1、作用：根據其設置的數值，決定元素在z軸方向上的層疊次序； ? ? ? ? 2、使用要求： ? ? ? ? ? ? （1）z-index 只能給 定位元素（relative、absolute、fixed）調整層疊次序； ? ? ? ? ? ? （2）z-index 要考慮父容器的 z-index 的約束， ? ? ? ? ? ? ? ? ? ? ① 如果父容器設置的 z-index 的屬性，則子容器的所有元素，將不能脫離父容器層次的約束。（即，父容器設置了z-index，則子容器只能以父容器的數值為準； 再給子容器設置z-index，只能調整子容器在父容器之內的層疊順序） ? ? ? ? ? ? ? ? ? ? ② 如果父容器沒有設置z-index，或者設置為z-index：auto；則子容器調整z-index將不受父容器層次約束。 ? ? ? ? 3、【 z-index：auto；和z-index：0；異同 】 ? ? ? ? ? ? ? ? ?① z-index: auto;是默認值，與 z-index: 0;處于同一平面； ? ? ? ? ? ? ? ? ?② z-index: 0;會約束子元素必須與父元素在同一平面；z-index: auto; 不會約束子元素層次。 #div3{width: 200px;height: 200px;background-color: red;position: relative;top: 150px;left: 100px;/*z-index: auto; */ /*設置 auto與設置為數值的區別*/z-index: 0;} #div3-1{width: 100px;height: 100px;background-color: yellow;position: relative;z-index: 10;} #div3-2{width: 150px;height: 150px;background-color: blue;position: relative;}效果圖附上
? ? ? <5> clip 屬性 ? ? ? ? ?1、作用：用于裁切圖片標簽，顯示圖片指定區域； ? ? ? ? ?2、使用要求： 只能作用于有 absolute 或 fixed 定位的圖片標簽上； ? ? ? ? ?3、clip屬性，接受一個rect（）函數，函數傳入四個值，分別表示上右下左四條切線位置； ? ? ? ? ? ? 【注意】 與其他屬性不同的是，rect中的四個值，上下兩個值的距離都是從上邊量取的，左右兩個值的距離都是從左邊量取的 ? ? ? <6> CSS 負邊距的使用 ? ? ? ? ? 1、實現塊級元素在父容器中水平垂直居中 【如何實現定位元素居中】 ? ? ? ? ? ? ? ? ① 設置子容器為定位元素； ? ? ? ? ? ? ? ? ② left: 50%; margin-left: -width/2; ? ? ? ? ? ? ? ? ? ? ?top: 50%; margin-top:-height/2; ? ? ? ? ? 2、使用負邊距增大元素寬度 ? ? ? ? ? ? ? ? ① 子容器的寬度，不指定；只指定高度、或者有內容撐開高度； ? ? ? ? ? ? ? ? ② margin: 0px -50px;可以使左右兩邊超出父容器50px。 八、后記 ? ? ? ? 今天的CSS內容就更新到這里了~~~這些都是CSS最基礎的內容~~~大家有需要可以收藏呦~ ? ? ? ? ?? ?
轉載于:https://www.cnblogs.com/Tracey-1023/p/7291937.html
總結
以上是生活随笔為你收集整理的学起来 —— CSS 入门基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PHPstorm相同变量标识
- 下一篇： CSS 选择器 :last-child