Css 基礎

文章目錄

• Css 基礎
• • 一、Css是什么
  • 二、基本語法規則
  • • 2.1 css的注釋
    • 2.2 格式規范
  • 三、選擇器的種類
  • 四、基礎選擇器
  • • 4.1 標簽選擇器
    • 4.2類選擇器 （常用選擇器）
    • 4.3 id 選擇器
    • 4.4 通配符選擇器
  • 五、復合選擇器
  • • 5.1 后代選擇器
    • 5.2 子選擇器
    • 5.3 并集選擇器
    • 5.4 偽類選擇器
  • 六、字體屬性
  • 七、文本屬性
  • 八、背景屬性
  • 九、圓角矩形
  • 十、元素的顯示模式
  • 十一、盒模型
  • 十二、彈性布局

一、Css是什么

層疊樣式表：同一個元素上可以應用多種樣式。這些樣式之間會產生疊加，從而實現頁面變得更好看效果。

CSS 就是 “東方四大邪術” 之化妝術 .

東方四大邪術 :中國的ps，日本的化妝，泰國人妖，韓國整容

二、基本語法規則

選擇器{N條聲明 }

1、style標簽本身放在頁面的哪里都可以，一般放在head標簽中

2、選擇器是針對那個標簽元素設置樣式—（找誰）

3、{ }里面的值進行軀體設定。

2.1 css的注釋

/*這是注釋*/

快捷鍵：ctrl+/

2.2 格式規范

1、css不區分大小寫，一般都是小寫

2、如果屬性由多個單詞構成，使用 - 來作為分割—— font-size（脊柱命名法）

3、冒號后面帶空格

4、選擇器和‘{’ 之間帶空格

三、選擇器的種類

1、基礎選擇器：單個選擇器構成

標簽選擇器，類選擇器，id選擇器，通配符選擇器

2、符合選擇器：把多種基礎選擇器綜合運用起來

后帶選擇器，子選擇器，并集選擇器，偽類選擇器

四、基礎選擇器

4.1 標簽選擇器

能夠吧一類標簽全都給選出來

<style>/*選出所有p標簽，進行設置*/p {color: blue;font-size: 30px;} </style><p>這是一段文字</p><p>這是一段文字</p><span>這是另一段文字</span> <br><span>這是另一段文字</span>

優點：能快速為同一類型的標簽都選擇出來

缺點：不能差異化選擇

4.2類選擇器 （常用選擇器）

可以選中一類元素，也可以進行差異設置

<style>/*選出所有p標簽，進行設置*/p {color: blue;font-size: 30px;}/* css 中的類需要前面價格 . 后面是類名，這樣就創造了一個類 */.green {color: green;}</style><p>這是一段文字</p><!-- 在標簽中通過class屬性引入類名 --><p class="green">這是一段文字</p><span>這是另一段文字</span> <br><span>這是另一段文字</span>

1、優點：

• 差異化表示不同標簽
• 一個類名可以被多個標簽引入
• 一個標簽也可以引入多個類名（同時也引用了多種樣式）

<style>.red {background-color: red;}.box {/*設置范圍，高度和寬度*/width: 200px;height: 150px;}.blue {background-color: blue;} </style><!-- 一個類名可以被多個標簽引入--><!-- 一個標簽也可以引入多個類名（同時也引用了多種樣式） --><div class="box red"></div><div class="box blue"></div><div class="box red"></div>

2、類名的命名模式：

• 不能帶中文，純數字，標簽名
• 類名長可以用脊柱命名法

4.3 id 選擇器

和html中的id舒心相關聯，由于html中的id是唯一的，通過id選擇器那么也就只能選中一個元素。

/* # 號開頭表示是id選擇器*/ # id的值 {CSS的屬性和值 }<style>#one {color: red;}.green {color: green;}div {color: blue;} </style> <!-- 多種選擇器進行設置一個元素，最后id選擇器優先級最高 --> <div id="one" class="green">這是一段文字</div>

問題：如果多種選擇器對同一個元素進行樣式設置會發生什么？？

答：這種屬于優先級，經過操作，id的優先級最高，其次是類型選擇器，最后是標簽選擇器。

4.4 通配符選擇器

使用 * 的定義，選取所有的標簽

* {/*css 的屬性和值*/ }* 的效果就是報頁面上的所有標簽元素都選中，不需要頁面結構調用，通配符選擇器，最常用的用法，就是用來清楚瀏覽器的默認樣式。。

五、復合選擇器

5.1 后代選擇器

又叫包含選擇器. 選擇某個父元素中的某個子元素，也能選擇孫子，還可以選擇id選擇器/類選擇器。

元素1 元素2 {樣式聲明}

• 元素 1 和 元素 2 要使用空格分割
• 元素 1 是父級, 元素 2 是子級, 只選元素 2 , 不影響元素 1

示例：

<style>ol li {color:red;} </style><ul><li>這是一段文字</li><li>這是一段文字</li><li>這是一段文字</li></ul><ol><li>這一是一段文字</li><li>這一是一段文字</li><li>這一是一段文字</li></ol>

• 元素2位孫子，還可以選擇id選擇器/類選擇器。

  <ul><li>這是一段文字</li><li>這是一段文字</li><li>這是一段文字</li> </ul><ol class="one"><li>這一是一段文字</li><li>這一是一段文字</li><li><a href="#">這一是一段文字</a></li> </ol>

5.2 子選擇器

只能選擇子標簽

元素1>元素2 { 樣式聲明 }

• 只能選擇兒子，不能選擇孫子
• 使用大于分割

示例：

<style>.one > a {color:red;} </style><ul><li>這是一段文字</li><li>這是一段文字</li><li>這是一段文字</li></ul><ol class="one"><li>這一是一段文字</li><li>這一是一段文字</li><li><a href="#">這一是一段文字</a></li></ol>

這里并不會生效，class類的子標簽是 li 直接跳過兒子是不行的！！

5.3 并集選擇器

用于選擇多組標簽. (集體聲明)

元素1, 元素2 { 樣式聲明 }

• 并集選擇器建議豎著寫. 每個選擇器占一行. (最后一個選擇器不能加逗號)

• 中間是通過逗號隔開

• 任何基礎選擇器都可以使用并集選擇器

• 表示同時選中元素 1 和 元素 2

  <h2>橙子</h2> <div>蘋果</div> <ul><li>香蕉</li> </ul>

5.4 偽類選擇器

通常使用鏈接，或者按鈕

a:link 未訪問過的鏈接 a:visited 訪問之后的情況 a:hover 鼠標懸停 a:active 鼠標按下未放<style>ab:link {color: black;}ab:visited {color:green;}ab:hover {color:aquamarine;}ab:active {color:blue;} </style><ab href="#">這是一個鏈接</a>

六、字體屬性

• font-family (字體類型)

  <div class="one">微軟雅黑</div>

1、設置的字體必須是電腦上面有的

• font-size （字體大小）

  <div class="one">字體粗細設置</div>

注意：字體數字沒有單位，設置的值是固定選項 100-900 而且是整數，不能設置為750.

• font-style （字體的傾斜）

  <div class="one">字體傾斜設置</div>

七、文本屬性

• 設置文本顏色

color屬性來設置顏色；

color屬性的值，可以使用一些表示顏色的單詞來說進行設置，

世界上的顏色一共有多少種？？？用這些單詞能否把所有的顏色都羅列出來？

答：顏色在世界上有無數種

那么計算機是怎么表示顏色的尼？

答：計算機是通過RGB的方式來表示顏色的；

三原色，R紅，G綠，B藍（色光三原色）

色深是表示一個顏色，使用幾個bit位表示？？

答：典型的實現是使用8個bit為表示

綜上所述：RGB三個顏色就是3個字節。

在css中設置顏色，就是通過RGB的方式來設置的，每個分量按照一個字節（8位色深）來設置。

---

表示方式有3種：

color: red; color: #ff0000; color: rgb(255, 0, 0);1 、直接寫單詞 2 、采用十六進制方式 3 、RGB方式

• 文本對齊

  text-align: [值];

  1、left，左對齊
  2、center：居中對齊
  3、right：右對齊

  <div class="one">下劃線</div> <div class="two">上劃線</div> <div class="three">刪除線</div> <a href="#" class="four">只是一個鏈接</a>

• 文本縮進

控制段落的首行縮進

text-indent:[值]；1、使用px作為單位不合適； 2、先使用em為單位，1 個 em 就是當前元素的文字大小。 3、縮進可以是負數，表示向左縮進（就會導致文字不見）<style>.one {text-indent: 2em;}.two {text-indent: -2em;}</style><div class="one">文本縮進</div> <div class="two">反向縮進</div>

• 行高

上下文本行之間的基線距離

行高=文字自身高度 + 行間距

line-height: [值];<style>p { line-height: 50px;}</style><p>..................</p>

八、背景屬性

• 背景顏色

  background-color: [指定顏色]

  <div class="one">紅色背景</div> <div class="two">藍色背景</div>

• 背景圖片

  background-image: url(圖片路徑);

  <div class="one">帥哥</div>

但是這里面的背景圖是會一直平鋪將整個頁面鋪滿，不想鋪滿就設計到下面的背景平鋪

• 背景平鋪

  background-repeat: [平鋪方式]

  1、on-repeat: 不平鋪
  2、repeat-x：水平平鋪
  3、repeat-y：垂直平鋪

• 背景位置

  background-position: x y;

  1、可以寫數字，單位px
  2、可以寫單詞（常用）：background-position:center bottom

計算機的位置坐標是左手系的方式，原點在左上角

• 背景尺寸

  background-size:

  1、可以寫數字，單位px
  2、可以寫單詞（常用）：

  background-size: contain
  background-size:cover

  /這兩者都是圖片覆蓋全部區域/

九、圓角矩形

基本用法：

border-radius: length;1、length值值得是矩形內切圓半徑，數值越小，就越不圓，數值打，就越圓<style>div {width: 200px;height: 100px;background-color: red;border-radius: 50px;}</style><div></div>

一般來講四個腳的幅度可以單獨設置的，叫做復合寫法。

• 生成圓形

  想生成圓形，就是把矩形設置成正方形，就是width和height分別設置為200px就是正方形，最后border-radius設置成50%或者100px就行了

  div {width: 200px;height: 200px;background-color: red;border-radius: 100px;}</style><div></div>

• 生成圓角矩形

讓 border-radius 的值為矩形高度的一半即可

div {width: 300px;height: 200px;background-color: red;border-radius: 100px;}</style><div></div>

十、元素的顯示模式

塊級元素：獨占一行

行內元素：不獨占一行

這兩個都屬于元素的顯示模式

可以使用display屬性來設置元素的顯示模式

• display:block 塊級元素
• display:inline 行內元素
• disply:none 隱藏元素

div屬于塊級元素，塊級元素默認寬度和父元素一樣寬

<style>.parent {height: 500px;width: 500px;background-color: goldenrod;}.child {height: 200px;background-color: blue;}</style><div class="parent">父元素<div class="child">child1</div><div class="child">child2</div></div>

div 是塊級元素（display:block）：

1、塊級元素默認獨占一行；

2、塊級元素寬度默認和父元素一樣寬！！！

• 行內元素

使用display:inline 就能把元素設置成行內元素

1、不獨占一行

2、設置的寬度和個高度都失效了，行內元素的尺寸就是包裹里面的文字內容。

• 隱藏元素

  dispaly:none

這個是將元素隱藏起來，但是元素在html中的代碼還是存在，只是在頁面不顯示了，

十一、盒模型

每一個 HTML 元素就相當于是一個矩形的 "盒子

這個盒子由這幾個部分構成

• 邊框

border 屬性來進行設置 （他是一個復合屬性）

<style>div {height: 200px;width: 200px;background-color: goldenrod;border: 10px solid red} </style><div>text</div>

• 邊框會撐大盒子

我們所設置的width和height是不包含邊框的部分。有了邊框那么整個元素就會被撐大，這種設定是不方便的，進行頁面布局的時候是非常復雜的，更希望的是，設置的尺寸能夠包含邊框。

box-sizeing:border-box;1、這個屬性就是解決上面的問題，是邊框不再撐大盒子。 2、默認值是content-box，這個時候就是尺寸不包含邊框。 3、一般這個屬性設置在*{}通配符中，選取所有標簽。* {box-sizing: border-box;}

• 內邊框

padding 設置內容和邊框之間的距離.

基礎寫法：

1、padding-top 2、padding-bottom 3、padding-left 4、padding-right

復合寫法：

padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (順時針)

注意：內邊框也是會撐大盒子的，設置了box-sizing:border-box就不會撐大盒子了

• 外邊距

與內邊框的格式寫法都是一樣的，外邊距是控制盒子和盒子之間的距離

基礎寫法：

1、margin-top 2、margin-bottom 3、margin-left 4、margin-right

復合寫法：

margin: 10px 20px 30px 40px;

• 塊級元素水平居中

  margin: 0 auto

• 去除瀏覽器默認樣式

  瀏覽器會給元素加上默認樣式，就比如內外邊框，為了保證瀏覽器上的樣式都是統一的的樣式顯示，往往我們會去除瀏覽器默認樣式.
  使用通配符選擇器即可完成這件事情

  • {
    marign: 0;
    padding: 0;
    }

十二、彈性布局

• dispaly:flex;

給父元素設置這個屬性，此時父元素里面的元素都要遵守 彈性布局的規則，

行內元素的時候是忽略掉高度和寬度的，是以文字包裹的范圍。

1、用dispaly：flex這個屬性，里面的子元素就不在按照塊級/行內元素的規則排列了。

2、在用flex中的子元素去掉高度，此時這個元素默認和復原素一樣高。

沒有添加flex屬性：

添加了flex屬性

添加了flex屬性但是沒設高度：

代碼：

<div><span>1</span><span>2</span><span>3</span> </div><style>div {width: 800px;height: 150px;background-color: blue;display: flex;}div>span {background-color: gold;width: 100px;/* height: 100px; */}</style>

• justify-content (主軸方向）

在flex布局中，justifu-content屬性來設置水平方向的排列方式（父元素中設置）。

justify-content: center; /*水平居中*/ justify-content: end; /*父元素的最右邊*/ justify-content: space-around; /*水平隔開*/ justify-content: space-between;/*先兩邊元素貼近邊緣, 再平分剩余空間*/

<div><span>1</span><span>2</span><span>3</span></div><style>div {width: 800px;height: 150px;background-color: blue;display: flex;justify-content: space-around;/*justify-content: space-between;*//* justify-content: center; *//* justify-content: end; */}div>span {background-color: gold;width: 100px;/* height: 100px; */}</style>

• alingn-items（側軸方向）

設置側軸上的元素排列方式

他的基本用法也是和上面的justify-content差不多。

演示下重置居中：

<div><span>1</span><span>2</span><span>3</span></div><style>div {width: 800px;height: 150px;background-color: blue;display: flex;justify-content: space-between;align-items: center;/*是元素水平居中*/}div>span {background-color: gold;width: 100px;height: 50px;}</style>

剩下的方法也是類似的做法，不載贅述

---

文章到這里基本上就結束了，css比較雜多，記憶的部分也多，這篇文章基本上吧css的基礎都寫的差不多了，適合剛開始css小白看的基礎，想深入還有很多要學，也只能自己找文章看了，推薦一個css權威文檔css參考手冊這個文檔對你了解css會有恒大的幫助。鐵汁們，覺得筆者寫的不錯的可以點個贊喲???，收藏關注唄，你們支持就是我寫博客最大的動力！！！！

總結

以上是生活随笔為你收集整理的带你熟练掌握 css 基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。