CSS基礎(chǔ)

CSS

CSS全稱是 Cascading Style Sheets，翻譯過來就是層疊樣式表，是用來為網(wǎng)頁添加樣式的代碼。
例：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

以上代碼是規(guī)定段落P這個元素的樣式，即段落字體顏色為紅色，寬度為500像素，并添加一個粗細為1像素的固定黑邊框

CSS也能同時給多個元素添加同樣的樣式
例：

p, li, h1 {
  color: red;
}

CSS具體是什么

1. 所謂樣式就是我們看到的HTML長什么樣子，比如你我他都是人，人就可以稱為我們的結(jié)構(gòu)，但是大家頭發(fā)有長短，膚色有黑白，相貌有美丑，這就是外觀，也就是樣式，CSS就是用來描述HTML具體長什么樣子

2. 層疊指的是樣式的優(yōu)先級，當作用于相同元素的CSS規(guī)則產(chǎn)生沖突時以優(yōu)先級高的為準

CSS層疊是指CSS樣式在針對同一元素配置同一屬性時，依據(jù)層疊規(guī)則（權(quán)重）來處理沖突，選擇應(yīng)用權(quán)重高的CSS選擇器所指定的屬性，一般也被描述為權(quán)重高的覆蓋權(quán)重低的，因此也稱作層疊。每個CSS選擇器都會有一個權(quán)重（行內(nèi)1000，id100，class10，tag1、可以這樣認為），當兩個選擇器同時配置同一元素的同一屬性時（比如一個設(shè)置color：red，另一個color：black），就會產(chǎn)生沖突，而解決沖突的方案就是CSS選擇器的權(quán)重，權(quán)重高的來覆蓋權(quán)重低的。

CSS的意義

把頁面的結(jié)構(gòu)和樣式分離

以前的頁面HTML和CSS是沒有區(qū)分的，都是HTML，這樣的后果是有很多標簽實際并沒有任何語義，只是表示特殊的樣式，同時標簽為了樣式的規(guī)定的屬性層出不窮，這就是內(nèi)容和表現(xiàn)的雜糅

在新式的頁面中HTML只表示結(jié)構(gòu)和內(nèi)容，樣式部分交給CSS控制，做到了內(nèi)容和表現(xiàn)分離，這樣能夠方便維護

網(wǎng)頁的讀者和作者都可以使用CSS來決定文件的顏色、字體、排版等顯示特性。CSS最主要的目的是將文件的內(nèi)容與顯示分隔開來。這有許多好處：

  1. 文件的可讀性加強
  2. 文件的結(jié)構(gòu)更加靈活
  3. 作者和讀者可以自己決定文件的顯示
  4. 文件的結(jié)構(gòu)簡化了

另外，在HTML中：一個整個網(wǎng)站或其中一部分網(wǎng)頁的顯示信息被集中在一個地方，要改變它們很方便 不同的讀者可以有不同的樣式，比如有的讀者需要字體比較大 HTML文件本身的范圍變小了，它的結(jié)構(gòu)簡單了，它不需要包含顯示的信息 CSS還可以控制其他參數(shù)，例如聲音（假如瀏覽器有閱讀功能的話）或給視障者用的感受裝置

分辨率和像素

像素即px，是屏幕中最小的點。像素不是物理長度，在不同分辨率的設(shè)備上物理長度不同

    分辨率 = 屏幕X軸上像素值 * Y軸上的像素值

屏幕如果是1024×768，也就是說水平方向上有1024個像素點，垂直方向上有768個像素點

在同一臺設(shè)備上，保證可視畫面尺寸不變的情況下，像素點的大小，會隨著分辨率的調(diào)整而改變。分辨率降低，像素點就變大，圖片質(zhì)量越低。分辨率降高，像素點就變小，圖片也越清晰

單位

  1. px：像素
  2. pt：物理單位，1/72英寸，幾乎沒人用了
  3. em：即％，是相對單位，最初是指字母M的寬度，故名em，按照默認的字體大小16px，1em = 16px，0.5em = 8px

HTML 字體大小單位 px em pt

繼承特性

CSS的一個主要特征就是繼承，它是依賴于祖先-后代的關(guān)系的。繼承是一種機制，它允許樣式不僅可以應(yīng)用于某個特定的元素，還可以應(yīng)用于它的后代。例如一個BODY定義了的顏色值也會應(yīng)用到段落的文本中

首先，有些屬性是不能繼承的。這沒有任何原因，只是因為它就是這么設(shè)置的。舉個例子來說：border屬性，大家都知道，border屬性是用來設(shè)置元素的邊框的，它就沒有繼承性。多數(shù)邊框類屬性，比如象Padding（補白），Margin（邊界），背景和邊框的屬性都是不能繼承的

CSS選擇器

CSS是通過不同選擇器來選擇不同的元素的
CSS的選擇器有以下幾種：

選擇器 ??
元素選擇器 Element Selector p 選中所有段落 <p>
ID 選擇器 ID Selector #notice 選中 <div id="notice"> 或 <p id="notice">
類選擇器 Class Selector .success 選中 <div class="success"> 和 <a class="success">
屬性選擇器 Attribute Selector [hidden] 選中 <div hidden> 和 <img hidden>
偽類選擇器 Pseudo class selector a:hover 選中 鼠標懸停所在的 <a>

具體選擇器用途和用法將放在CSS選擇器一文中說明。

盒模型

我們選擇的每一個元素都有對應(yīng)所占據(jù)的空間和外形，其中分為外邊距（margin）和內(nèi)邊距（padding）以及邊框（border）以及寬度和高度等屬性，調(diào)整這些屬性將會對元素本身盒模型產(chǎn)生影響。

  • 內(nèi)邊距（padding）- 圍繞著內(nèi)容的空間（比如圍繞段落的空間）
  • 邊框（border）- 緊接著內(nèi)邊距的實體線段
  • 外邊距 (margin) - 圍繞元素外部的空間
盒模型示意圖

以上就是CSS的大致介紹，接下來我們來看看CSS的具體應(yīng)用形式。

CSS的具體應(yīng)用

簡單示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello CSS!</h1>
    <p>CSS 很 666666……</p>
  </body>
</html>
/* style.css */
h1 {
  padding: 10px;
  background-color: orange;
  border: 1px solid black;
}

p {
  color: purple;
}

代碼效果：http://js.jirengu.com/xemihocovo/1/
在上述代碼中我們給h1和p這兩個元素分別添加了效果，其中我們給h1元素（段落1）添加內(nèi)邊距為10像素，背景顏色為橙色，以及粗細為1像素的固定黑邊框的樣式，給p（段落）元素添加了字體顏色為紫色的樣式

CSS的工作原理

CSS工作原理
  1. 我們在瀏覽器輸入url（網(wǎng)頁地址）之后，瀏覽器會向服務(wù)器發(fā)送請求，服務(wù)器會將對應(yīng)的數(shù)據(jù)返還給瀏覽器，瀏覽器在獲取數(shù)據(jù)后將開始加載該頁面；
  2. 瀏覽器加載并解析html文件，得到服務(wù)器返回的字符串之后進行詞法解析，并將其解析成一個樹狀數(shù)據(jù)結(jié)構(gòu)，而瀏覽器在解析html文件的同時也會同步向服務(wù)器發(fā)送請求獲取CSS文件，并加載解析該CSS文件，使其也變成一個CSS樹；
  3. 瀏覽器在得到html樹和CSS樹之后將其結(jié)合，并創(chuàng)建一個DOM樹（一個類似于樹的文檔結(jié)構(gòu)），最后再將其進行展示。

CSS的引入方式

CSS的引入一般有三種

外部樣式表引入（推薦）

  1. 通過<link>標簽引入CSS
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>CSS</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1>Hello CSS!</h1>
</body>
</html>
  1. 通過@import引入樣式，放入css中
    不要忘記分號 
<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);

</style>

注意：

  1. @import屬于CSS語法，這種用法不能直接在html頁面使用，只能在CSS文件中進行使用；
  2. 使用@import時可以使用一些限制條件，例如媒體查詢（手機橫豎屏）；

內(nèi)部樣式表

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>CSS</title>
  <style>
    h1 { background: orange; }
  </style>
</head>
<body>
  <h1>Hello CSS!</h1>
</body>
</html>

內(nèi)聯(lián)樣式

不推薦，因為如果樣式很多時會無法全部寫入，而且如果同一個元素很多，將需要在每個元素內(nèi)都加入該樣式而且改動時也要逐個修改很不方便，但在某些情況下很有用。例如需要使用JavaScript設(shè)置樣式或針對每個元素設(shè)置不同的樣式。

<p style="background: orange; font-size: 24px;">CSS 很 ??<p>

*屬性樣式

<img src="a.png" width=100 height=200 >

目前已經(jīng)廢棄，不再使用，這是沒有CSS都沒有的時期的寫法

參看鏈接：

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容