CSS技術筆記

劉一帆Vv發表於2020-11-22
CSS筆記

文章目錄

  • CSS簡介

CSS和HTML一樣，也是一種標識語言，程式碼也很簡單，也需要通過瀏覽器解釋執行，也可以用任何文字編輯器編寫，其副檔名為“.CSS”。

  • CSS主要功能

CSS的主要功能是美化頁面，並且使得網頁的內容和樣似進行分離（類似於化妝，整容^^）。

小?小羊小?小?小?小?小?小?小?小?小?小?小?小?

使用方法

內聯樣式、行內樣式

格式：

<標籤名 style="CSS程式碼">
        第一個程式碼!
</標籤名>

例：

	<p style="color: blue;">
        第一個程式碼
    </p>

結：
這樣的話，p裡面的文字“第一行程式碼”的顏色color就會變成藍色blue。

內部樣式

格式

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        CSS程式碼
    </style>
</head>

例：

	<style>
        p{
            color: blue;
        }
    </style>

結：
這樣的話，p裡面的文字的顏色color就會變成藍色blue。

外部樣式

建立一個單獨的CSS檔案，在html的head標籤中使用link標籤引入，後兩項是可選條件
格式：

<link href="CSS檔案的路徑" type="text/CSS" rel="stylesheet">

例：

<link rel="stylesheet" type="text/CSS" href="../CSS/第一課.CSS">

在這裡需要在外面建立一個CSS檔案

p{
    color: blue;
}

結：
現在對css檔案裡面的條件進行新增，p標籤的顏色也變成了藍色。

匯入的方式

和link方式一樣，但是有的瀏覽器不能用，所以不常用，瞭解即可
格式

    <style>
        @import url("匯入CSS檔案的路徑");

    </style>

css檔案不變

CSS的基本語法

CSS規則由兩個主要的部分構成：選擇器，以及一條或多條宣告。

selector{declaration1;declaration2…declarationN}

選擇器通常是你需要改變的樣式的html元素。選擇器包括多種形式，所有的html標籤都可以作為選擇符，如body p table等
每條宣告由一個屬性和一個值組成
property表示要格式化的屬性的名稱，value表示要格式化的屬性的取值，每個屬性有每個值。

selector{property:value;property:value;…}

插入CSS樣式表

格式：

CSS選擇器{
	屬性名：屬性值;
	屬性名；屬性值;
	...
}

例：

p{
    color: blue;
}

CSS特性

繼承性
  • 層疊性是指同一個HTML檔案引用了多個樣式表檔案時，瀏覽器會按照樣式定義的先後層次來應用樣式，如果不考慮樣式的優先順序，一般都遵守“最近優先原則”。
  • CSS樣式對內容控制能力的基礎就在於HTML文件結構圖中的家族繼承關係。
  • 子級元素會繼承父級元素的樣式，並且只繼承本身沒有定義的屬性。

標籤選擇器

標籤選擇器是指用HTML標籤名稱作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的CSS樣式。其基本語法格式如下：

標籤名{屬性1:屬性值1; 屬性2:屬性值2; …屬性n:屬性值n; }

使用標籤選擇器的優缺點
  • 優點：能夠快速為頁面中同型別的標籤統一樣式。
  • 缺點：不能設計差異化樣式，有時候會相互干擾

類選擇器

類選擇器使用“.”（英文點號）進行標識，後面緊跟類名，其基本語法格式如下：

.類名{屬性1:屬性值1; 屬性2:屬性值2; …屬性n:屬性值n; }

該語法中，類名即為HTML元素的class屬性值，大多數HTML元素都可以定義class屬性。類選擇器最大的優勢是可以為元素物件定義單獨或相同的樣式

方法

  1. 第一步：給需要設定樣式的標籤定義類名稱，也就是給標籤設定一個class屬性，並給class屬性賦值。賦的值就是類名稱。
  2. 第二步：在CSS中使用類名稱查詢html檔案中的對應標籤。要在類名稱前面新增黑色實點。

例：

<style>
        .p1{
			color:blue;
		}
</style>

<p class="p1">
        這是類選擇器的使用
</p>
類名注意
  • 類名第一個字元不能使用數字，它無法在Mozilla或Firefox中起作用。
  • 類名嚴格區分大小寫，一般採用小寫的英文字元。
  • 不建議使用"_"下劃線來命名CSS選擇器。
  • 儘量不縮寫，除非一看就明白的單詞。

相同的標籤可以定義相同的類名稱，不同的標籤也可以定義成相同的類名稱。

ID選擇器

ID選擇器使用“#”進行標識，後面緊跟ID名，其基本語法格式如下：

#ID名{屬性1:屬性值1; 屬性2:屬性值2; …屬性n:屬性值n; }

該語法中，ID名即為HTML元素的ID屬性值，大多數HTML元素都可以定義ID屬性，元素的ID值是唯一的，只能對應於文件中某一個具體的元素。

方法：

  1. 第一步：在html文件中，給某個標籤設定id屬性，然後給該屬性設定屬性值，屬性值就是id名稱。
  2. 第二步：在CSS檔案中使用id名稱作為選擇器，但是需要在id名稱前面新增#。
    例：
        #np1{
            background-color: cyan;
        }

<div class="p1" id="np1">
        你好，
        <div>
             世界！
        </div>
</div>

注意：id名稱在整個文件中是唯一的，不能重名。

* 在CSS是萬用字元，匹配任意標籤。
例：

		*{
            margin: 0;/*外邊距*/
            padding: 0;/*內邊距*/
        }

此為消除內外邊距，以後會詳細說一下的，此處略過。

簡單的css語句

用處語法注意
設定字型大小font-size新增的內容和買衣服大小一樣，xl大於l，大於s，也可以使用數值設定字型大小，選擇需要的單位
字型是否加粗font-weight新增內容為bold加粗，bolder（比加粗稍微粗一點）lighter（比加粗細一點）或者加粗數值，為有幾個選項可供選擇
字型是否傾斜font-style如果是新增italic
設定字元字型font-family需要用什麼字型就新增什麼字型就行了，如果字型為多個單詞拼寫，需要單引號括起來，可以直接寫中文字型名字，可以新增多個，按照就近原則
小型大寫字母font-variant把小寫的字母轉換成大寫字母，但是個頭不變，如果存在小寫字母。後面加入small-caps就可以
設定文字縮排text-indent新增縮排字元，一般設定首行縮排兩個字元2em
設定文字對齊text-aligncenter居中對齊\left左對齊\right右對齊\justy兩端對齊
設定行間距text-align可以新增數值，最好是用em形式的，em和word裡面的倍數一樣，比如1.5em就是1.5倍行間距
修飾文字text-decoration可以給文字增加線條，overline上劃線，underline下劃線，line-through刪除線。還可以設定樣式和顏色，去掉超連結的下劃線需要加none
大小寫轉換text-transformcapitalize首字母大寫，lowercase字母小寫，uppercase字母大寫
修改顏色color後面可以直接新增顏色的英文名稱，還可以使用RGB形式，或者16進位制的形式
字元間距letter-spacing新增數值即可
英文單詞間距word-spacing新增數值即可，只對英文單詞才有用
設定文字方向directionltr預設。文字方向從左到右，rtl文字方向從右到左。
新增背景，對body進行新增background-color新增需要新增的顏色即可
新增背景圖片background-image:url（圖片地址）圖片地址中加入自己的圖片地址即可
背景圖片平鋪background-repeatrepeat水平和垂直都平鋪， repeat-x水平方向平鋪，repeat-y垂直方向平鋪，no-repeat不平鋪
背景圖片位置background-positioncenter居中平鋪\left左平鋪\right右平鋪\right top右上角\right bottom右下角\left top左上角\left bottom左下角，也可以使用數值的方式，相對方式50% 50%代表位於寬百分之50的與長百分之50的地方，60px 30px代表寬60px與長30px的地方
設定背景圖片大小background-size100% 100%代表水平100%垂直100%，contain代表不失真的情況下佔比最大，cover也是最大，只不過不管失真不失真
背景圖片靜止background-attachment: fixed;這樣的話，就不會隨著齒輪滑動而動，會固定

例項程式碼應用

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style>
    body{
        background-color:#cccccc;
    }
    h1{
        color: white;
        font-weight:lighter;
        background-color: red;
    }
    .c0{
        color: white;   
        font-family:楷體;     
        font-style:italic;
        direction:rtl;

}   
    .c1{
        color: red;
        font-size:24px;
        font-weight: 500;
        font-family: 宋體;
        font-weight:bold;
    }
</style> 
 </head> 
 <body> 
  <h1>日 志</h1> 
  <hr /> 
  <p class="c0">分類：心情點滴</p> 
  <p class="c1">女性的美麗</p> 摘要：魅力女性是美麗的.她使世界變得溫馨,使世界永遠保持青春和活力,使世界永遠充滿迷人和浪漫。魅力是什麼?字典上的解釋是，能吸引人的力量.常聽有人這麼評價某個女人：她不漂亮，可她很有魅力.魅力是一種深層次的美，比一切外在的美都更富有生命力，讓人一見難以忘懷....... 檢視全文 
  <br />
  <br /> 
  <p class="c2">2007.3.8 13:27 作者：詩香雅韻 引用:6 | <a style="text-decoration:none" href="http://www.baidu.com">收藏</a> | 評論：56 </p> 
  <p class="c0">分類：情感驛站</p> 
  <p class="c1">情感解析：寫給三十左右男人的一些密語</p> 摘要：一、不放棄理想，不放棄夢想。有夢的生活，才會有顏色；二、有一套頂級的西服，或者一隻經典的手錶，或者有一個奢華的打火機，或者。總之，有一個可以傳給自己孩子的並值得講述歷史的東西；三、重新甄選自己的朋友。留一兩個知己，用一生去維護;四、三十歲。知道很多的細節。包括穿西服的時候... 檢視全文 
  <br />
  <br /> 
  <p class="c2">2011.11.9 00:17 作者：詩香雅韻 引用:0 | <a style="text-decoration:none" href="http://www.baidu.com">收藏</a> | 評論：1</p> 
  <p class="c0">分類：精品賞析</p> 
  <p class="c1">美麗如畫!世界海洋攝影佳作揭曉(組圖) </p> 摘要：據國外媒體報導，近日世界優秀海洋攝影照片揭曉，從中我們可以欣賞到美麗的海洋景色、認識許多奇特的海洋生物，此外攝影師精湛的攝影技術也令人讚歎。以下就是2010年海洋攝影優秀作品。攝影師評價：“在晚上，小巴哈馬海岸的斑點海豚會潛入深海尋找烏賊... 檢視全文 
  <p class="c2"> 2011.10.28 23:53 作者：詩香雅韻 引用:1 | <a style="text-decoration:none" href="http://www.baidu.com">收藏</a> | 評論：1 </p>  
 </body>
</html>

效果圖

效果圖

偽類選擇器

偽類選擇器和偽元素選擇器可以為文件中非具體存在的結果指定樣式，或者為某些元素（包括文件本身）的狀態指定樣式，它會根據某種條件而非文件結構應用樣式。

偽類選擇器的使用方法如下：
HTML標記 偽類名{偽類名：屬性值；屬性名：屬性值；.....}
常用的偽類如下表所示：

偽類名描述
:link滑鼠沒有放上去之前的樣式
:visited訪問過的超連結的樣式
:focus元素稱為焦點的時候，常用於表單元素
:hover用於滑鼠在元素上，而尚未觸發或點選它的時候，例如，滑鼠指標可能停留在一個超連結上，:hover 就會指示這個超連結

偽類選擇器的使用

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSDN董夢宇偽類的使用</title>
    <style>
        a:link{/*超連結初始顏色為blue*/
            color: blue;
        }
        a:visited{/*超連結點選一次之後，顏色變為darkslategrey;*/
            color: darkslategrey;
        }
        a:hover{/*滑鼠在超連結上時，超連結顏色為yellow*/
            color: yellow;
        }
        a{
            font-size: 32px;
        }
    </style>
</head>
<body>
    <div>
        <a href="https://blog.csdn.net/lolly1023">CSDN：董夢宇</a>
    </div>
</body>
</html>

效果如下：
轉跳
blue為初始設定顏色，黃色為滑鼠停滯於連線上的顏色。
偽類使用的說明：
a標記上偽類的順序應為LVHA（: link:visited:focus:hover）在CSS定義中，a:hover必須被置於a:link和a:vistied之後，才是有效的，在CSS定義中，a:active必須被置於a:hover之後，才是有效的。

偽元素選擇器

偽元素選擇器的使用方法如下：
HTML標記：偽元素（屬性名：屬性值；屬性名：屬性值；…）
常用的偽元素如下表所示：

偽元素名描述
:first-letter向文字中的第一個字母新增特殊樣式，與塊級元素關聯
:first-line向文字中的首航新增特殊樣式
:before在元素之前新增內容，預設的這個偽元素是行內元素
:after在元素之後新增內容

偽元素的使用

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSDN董夢宇偽元素的使用</title>
    <style>
        /*第一行的首字母發生變化*/
        div::first-letter{/*設定第一段開頭第一個字大小為64px*/
            font-size: 64px;
        }
        /*第一行全部修改*/
        div::first-line{/*設定第一行的背景色為red*/
            background-color: red;
        }
        /*在文字前面新增內容*/
        div::before{/*在開頭新增內容，需要使用content才能新增*/
            /*新增文字內容*/
            content: 'CSDN';
            font-style: italic;
        }
        /*在文字後面新增內容*/
        div::after{/*在開頭新增內容，需要使用content才能新增*/
            content: '董夢宇';
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        偽元素的例項
    </div>
</body>
</html>

效果如下：
偽元素

交集選擇器

  • 交集選擇器由兩個選擇器組成，其結果是選中二者格子元素範圍的交集。
  • 要求：交集中第一個選擇器必須是標記選擇器，第二個必須是class類選擇器，或者是id選擇器。
  • 兩個選擇器之間不能有空格，必須連續書寫。

交集選擇器的使用

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>董夢宇交集選擇器的使用</title>
    <style>
        p.p1{/**使用交集選擇器，選中了p標籤與類選擇器為p1的內容，然後進行修改/
            font-size: 32px;
        }
    </style>
</head>
<body>
    <div>
        <p class="p1">我使用了交集選擇器</p>
        <p>我沒有使用交集選擇器</p>
    </div>
</body>
</html>

效果如下：
交集選擇器

相關文章