CSS學習（未成稿）-有解無憂

本文是基于筆者在優課達學習的筆記，方便自己以及他人進行學習，如有錯誤敬請指正，
再次感謝每一個可以看到此文的人，
如果本本對你產生了幫助，請不要吝嗇你點贊的小手哦~

CSS-美化檔案

HTML內部添加樣式

1. 在標簽中添加宣告

宣告的關鍵字是style后面接等號（=）再接引號（""），即style=""

具體宣告如下

<input type="text" placeholder="手機號碼" style="">

宣告位置不分先后也就是代碼塊里面的綠字可以隨意交換位置
與其他關鍵字之間用空格隔開

2. 在引號之間添加樣式

<p style="font-size:14px;color:white"></p>

這段代碼的意思就是：設定p標簽中的字體大小為14px，顏色為白色，

在 CSS 中，樣式是由屬性和值組成，中間用冒號（:）隔開，用分號（;）收尾，其中屬性可以理解為身高、體重，值可以理解為 1.8 米、60kg，在現實生活中我們用這樣一對組合來描述人或者物，在 CSS 中，我們用這樣一對組合來描述文字的粗細、大小、顏色等等，

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-g0YSkWQn-1613033817971)(!%5Bimage-20210208204447954%5D%28C:%5CUsers%5C17418%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210208204447954.png%29#pic_center)]

字體大小/字體粗細

1. 字體大小

? 設定格式：font-size:36px;

font-size --> 字體的大小

36px --> 字體大小的尺寸

2. 字體加粗

? 設定格式：font-weight:100;

設定文字粗細的時候，其值可以是 100，200，300，400，500，600，700，800，900 中的任何一個,或者可以用英文代替，normal（正常粗細），lighter(細)，bold（粗），bolder（更粗）

字體顏色/文字對齊方式

1. 顏色

英文字母形式
十六進制顏色

十六進制顏色由#開頭，后面跟三個數字，每個數字的范圍為 00 ～ FF，每個數字代表一種顏色，最終的顏色由這三種顏色調和而成；
rgb 形式

rgb 形式和十六進制的原理相同，其最終的顏色由三種顏色的深淺決定，即 r(red)，g(green)，b(blue)，每種顏色的范圍為 0 ～ 255，代表這每種顏色的深淺，值越大越深；

rgb形式顏色

rgba 形式

rgba 形式相比 rgb 形式，多了一個 a，這里的 a 代表的是 Alpha(透明度)，a 的值在 0 ～ 1 之間，為了簡化書寫，也可以直接省略 0，寫成.4，等同于 0.4，

注意：以上四種運算式：
1. 多數情況下建議使用十六進制表達方式；
2. 除錯的時候可以用英文字母形式，初期的除錯就是隨便設定一個顏色，查看區塊是否存在，區塊大小等，在盒模型中我們會遇到 gi；
3. 如果要設定文字透明度或者背景透明度，就要用到rgba形式，在第八章我們會遇到，

2.文字對齊方式

text-align: center; 文字居中對齊 
text-align: left; 文字左對齊 
text-align: right; 文字右對齊

文字行高/字間距/字體

1. 行高

行高的設定格式：

line-height: 30px;

主要作用：使文字上下居中

使用方式：將文字的行高設定為與文字外面的舉行高度大小一致即可

2. 字間距

字間距就是文字之間的間距，但是中文和英文的字間距是不一樣的

英文的字間距是每個字母之間的距離，單詞和單詞之間的距離不屬于字間距
中文是每個漢字之間的距離

字間距的設定格式：

letter-spacing: 30px;

3. 字體

字體的設定格式：

font-family: 'Goudy Bookletter 1911', sans-serif, Gill Sans Extrabold;

這段代碼怎么去理解呢？頁面加載以后會先去找代碼中設定的字體，這里有三個備選的字體，瀏覽器會按順序加載，首先看看"Goudy Bookletter 1911"字體在電腦上是否安裝，如果沒有安裝，就去看第二個字體，如果還沒有，就去看第三個字體是否已經安裝，如果都沒有安裝，那么就只能用默認的微軟字體，這個字體是所有電腦默認會安裝的，

CSS-引入方式

CSS的三中引入方式

1. 行內樣式

如上圖所示：行內樣式需要內嵌在每一個HTML標簽中，可想而知，當我們有幾百行HTML標簽的時候，就需要寫幾百個style，實際上在前面設定字體樣式的時候，你一定體會到了這種書寫方式的繁瑣，比如說我們要修改兩個p標簽，他們的樣式明明是一樣的，我們還不得不再去重寫一次相同的CSS樣式，例如：

<p style="font-size: 18px;font-weight: 700;color: blue;">
  這是一個p標簽，和第三個p標簽樣式一樣
</p>
<p>這是一個中立的p標簽</p>
<p style="font-size: 18px;font-weight: 700;color: blue;">
  這是一個p標簽，和第一個p標簽樣式一樣
</p>

因此，我們就要想辦法把每一個標簽中的CSS樣式抽取出來，抽取成一整段，放在HTML檔案中的某個位置，這時候我們就要去了解第二種CSS的引入方式–內部樣式

2. 內部樣式

抽離步驟：

首先我們將每一個標簽里的CSS樣式抽取出來
然后在head``標簽里宣告了一個`標簽
接下來將樣式都放在了style標簽里，注意，這里不是簡單的粘貼復制，
將相同標簽的樣式寫在相同的大括號({})里，大括號前面加上標簽名，形如：

p { 
    font-size: 16px; 
    color: #ffffff; 
}

頭部書寫規則

不要忘記寫宣告標簽>
樣式要用花括號括起來
每個樣式后面用分號結尾

3. 外部樣式

隨著代碼量的逐漸增多，整個HTML檔案就會呈現出頭重腳輕的現象，即CSS代碼要比HTML代碼多的多，這樣很不利于閱讀和復查代碼，更重要的是為了實作代碼的分離，讓HTML負責結構，CSS代碼負責樣式，所以我們要對代碼進行進一步的分離，

新建一個 index.css檔案
將html代碼頭部中的style 標簽內的樣式全部拷貝進去
將復制的CSS樣式粘貼進去
建立HTML和CSS檔案的聯系，即用link標簽引入CSS檔案

link（記住固定格式）

<link rel="stylesheet" type="text/css" href="index.css" />

常用選擇選擇器

1. 選擇器的層疊性

在寫CSS樣式的時候，有時候因為粗心，之前寫過的標簽又會重新寫一次，然后給{}里面添加樣式，這樣做可能會造成兩種結果：

添加新的效果（如果添加的是一個新屬性）
改變之前已經存在的效果（如果該屬性之前就存在）

h3 {
  font-size: 25px;
  color: #330867;
}

h4 {
  font-size: 18px;
  color: #30cfd0;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #4a5252;
}
/*在這里寫一個同名標簽名h3,所以你只要關注“孟航沛”的變化即可*/
h3 {
  /*font-weight屬性在之前的h3標簽里沒有寫，那么這里就會添加新的效果*/
  font-weight: 700;
  /*color這個屬性前面已經定義了，這里再寫，就會覆寫前面的字體顏色*/
  color: red;
}

2. 類選擇器

定義

<p class="article">
  class是定義類的關鍵字，article是類名，類名可以任意，但是要符合規范
</p>

class 是定義類的關鍵字，article 是類名，類名可以任意，但是要符合規范

使用

.article {
  color: red;
  font-size: 14px;
}

如果是內部樣式，上面的代碼就要寫在<style></style>標簽之間，如果是外部樣式，直接寫在.css檔案中即可，

除此之外，一個標簽上面還可以添加多個類名，類名之間要用空格隔開，就像這樣嬸的：

<p class="common color font-size"> 
common設定通用樣式，color設定特殊顏色，font-size設定特殊字體大小 
</p>

3. id 選擇器

id 選擇器與類選擇器超級像

在標簽中定義 id

<p id="p-item">這是一段文字</p>

使用id 選擇器

#p-item {
  font-size: 24px;
  font-weight: 400;
}

id 選擇器在檔案中只會出現一次，像下面這種使用方式是不對的

<a href="#" id="link">點擊進入詳情</a>
<!-- link這個id名已經被使用，就不可以再次定義 -->
<a href="#" id="link">點擊進入主頁</a>

id 就像身份證號碼一樣，全國只能有一個，同樣，id 選擇器亦是如此，這里的 link 重復了，

不能像類選擇器一樣，一個標簽上定義多個 id 名，像下面這種寫法是錯誤的：

<a href="#" id="link linkto">點擊進入詳情頁</a>

高級選擇器

常見高級選擇器有4種

后代選擇器
交集選擇器
子選擇器
并集選擇器

1. 后代選擇器（空格）

p a ----選擇所有p標簽內所有的a標簽

后代選擇器的書寫規則：用空格隔開，例如：

/* 選擇id名為password的標簽內部所有類名為box的元素內部的所有p標簽 */
#password .box p{}
/* 選擇所有p標簽內部的所有span標簽 */
p span{}
/* 選擇所有p標簽內部的所有類名為spanItem的標簽 */
p .spanItem{}

后代

什么是后代？比如說，某某某是孔子的88代孫，那么某某某就是孔子的后代，在HTML中，隨著頁面復雜程度的增加，會出現很多標簽嵌套（標簽里面寫標簽）的現象，比如：

<ul>父
    <li>子
        <p>孫
            <span>曾孫
                <a href="">曾曾孫</a>
            </span>
        </p>
    </li>
</ul>

在這段代碼中，標簽和標簽當中就形成了子代關系，a、span、p、li就是ul標簽的后代，li既是ul的后代又是ul的子元素，以上面的這段HTML代碼為例，我要選中a標簽，可以有很多辦法：

/* 方法一： */
a{}
/* 方法二 */
ul a{}
/* 方法三 */
ul li p a{}
/* 方法四 */
ul li p span a{}

具體要用哪種方法呢？這是要根據具體情況（HTML的結構）來定的,比如說現在HTML的代碼結構變了：

<ul>父
    <li>子
        <p class="p-one">孫
            <span>曾孫
                <a href="">曾曾孫1</a>
            </span>
        </p>
        <p class="p-two">孫
            <span>曾孫
                <a href="">曾曾孫2</a>
            </span>
        </p>
    </li>
</ul>

此時我們用上面的四種方法都會選到兩個a標簽，但是我們的目的是選中“曾曾孫1”，所以我們要在最開始出現重復標簽的那一級來做區分，給這一級分別加上類名，或者你可以只給你需要的那個標簽添加類名即可，此時我們要選中“曾曾孫1”可以這樣做：

/* 方法一 */
ul li .p-one span a{}
/* 方法二 */
.p-one span a{}

2. 交集選擇器

交集選擇器的書寫規則是：

a.special{}

<a href="#" class="special">超鏈接</a>
<a href="#">超鏈接</a>
<a href="#">超鏈接</a>
<a href="#">超鏈接</a>

它的意思是，在所有a標簽內，類名為special的標簽，

舉個例子吧：

實作效果如下：

在這里插入圖片描述

核心代碼如下：

<ul>
    <li><a href="" class="special">電子產品</a></li>
    <li><a href="">家居服飾</a></li>
    <li><a href="">電競手辦</a></li>
    <li><a href="" class="special">家裝服務</a></li>
    <li><a href="">房屋出租</a></li>
</ul>

ul li {
    list-style: none;
    font-size: 22px;
}

ul li a {
    /* 去除a標簽的下劃線 */
    text-decoration: none;
    /* 這里的顏色一定要在a標簽上設定，因為a標簽默認會去設定字體顏色，會層疊掉默認的黑色 */
    color: black;
}

ul li a.special {
    color: orangered;
}

3. 子選擇器

子選擇器與后代選擇器類似，不同的是后代選擇器突出的是==“后代”，子選擇器突出的是“子”==，

比如同樣的HTML代碼，但是用不同的選擇器，得到的結果就就不同，HTML代碼如下：

<p>
    <span>Span 1. 在p標簽內
        <span>Span 2. 在p標簽的span標簽內</span>
    </span>
</p>
<span>Span 3. 與p標簽相鄰</span>

使用后代選擇器

span {
    color: black;
}

p span {
    color: orangered;
}

得到的結果：

在這里插入圖片描述

使用子選擇器：

span {
    color: black;
}

p>span {
    color: orangered;
}

得到的結果：

在這里插入圖片描述

4. 并集選擇器

如果要給不同的標簽，或者不同類名的標簽添加相同的樣式，此時就要用到并集選擇器，并集選擇器的規則是在標簽名或者類名后面用逗號（,）隔開，例如：

.box,p,h3,.phone{}

并集選擇器的作用是–“和”，上面這段代碼的意思就是給類名為box、phone標簽名為p、h3的標簽添加相同的屬性，

選擇器的優先級

1. 單個選擇器的優先級

? id 選擇器 > 類選擇器 > 標簽選擇器

? 太簡單了，就不舉例子了我覺得我記下來了

2. 文字屬性的繼承性

除了h標簽，其它的標簽內寫了文字以后，默認會有相同的顏色、大小，這就是文字屬性的繼承性導致的，他們都繼承了body標簽的字體大小、顏色，

3. 高級選擇器的優先級

權重的計算方法

按照優先級越高，權重越大的規則，假設 id 選擇器的權重為 100，類選擇器的權重為 10，標簽選擇器的權重為 1

權重不會進位！！
權重的應用

<ul class="ul-item">
  <li>
    <p>文字的顏色到底是什么顏色？</p>
  </li>
</ul>

ul li p {
  color: blue;
}
p {
  color: red;
}

結果：

點擊查看

然后更有意思的是，有個特殊的東西，即選中，

代碼

.ul-item li {
  color: blue;
}
p {
  color: red;
}

點擊查看結果

在這里面，p直接選中了所修飾的代碼塊

重不會進位！！**

權重的應用

<ul class="ul-item">
  <li>
    <p>文字的顏色到底是什么顏色？</p>
  </li>
</ul>

ul li p {
  color: blue;
}
p {
  color: red;
}

結果：

點擊查看

然后更有意思的是，有個特殊的東西，即選中，

代碼

.ul-item li {
  color: blue;
}
p {
  color: red;
}

點擊查看結果

在這里面，p直接選中了所修飾的代碼塊

所以顏色是紅色！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/259249.html

標籤：其他

上一篇：ES6異步編排Promise與模塊化

下一篇：LeetCode第283題移動零