部分CSS基礎

時間 2021-08-15

標籤 javascript php css html java 編程 windows 編程語言 ide 函數欄目 CSS 简体版

原文原文鏈接

css 的概念

層疊樣式表 (Cascading Style Sheets，三個單詞字頭縮寫爲 CSS），他是專門用於修飾頁面樣式的。好比，能夠更改內容的字體、顏色、⼤小以及間距，或是將其分列，或是添加動畫等。javascript

html:超文本標記語⾔言，⽹頁的結構搭建，⻚面佈局
css:層疊樣式表,⽹頁的修飾，樣式的渲染
javascript:解釋型的編程語言，用於與⻚面的交互
層疊的含義至關於咱們畫動畫片，好比畫一個耳朵。一層一層的增長樣式內容，最初就是勾勒勒一個簡單的輪廓。

css 的語法規範

配置全局代碼片斷php

(1)內聯樣式

內聯樣式也能夠叫行內樣式，就是在 html ⽂件中的 html 標籤中，使用 style 屬性的樣式值來完成元素的樣式渲染。css

<span style="樣式聲明"></span>
樣式聲明：

由樣式屬性和值組成；
屬性和值之間用冒號鏈接；
多個樣式聲明用分號分隔。
特色：
寫在標籤里⾯，缺點是影響閱讀，看着亂
不利於修改，複用性差。
優勢:
指定當前標籤，更加直接html

<h1>沒有加任何樣式，只有標籤⾃己的樣式</h1>
<h1 style="color: red;">加⼊字體顏⾊樣式</h1>
<h1 style="color: red;font-size: 40px;">加⼊字體顏色和字體⼤小樣式</h1>
<h1 style="background-color: blue;font-size: 40px;">
加⼊入背景顏⾊和字體⼤小樣式
</h1>

(2)內部樣式

在⽹頁的頭部<head>標籤中增長一對<style></style>標籤，在<style>標籤記中定義該⽹頁的全部樣式。java

<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
	選擇器 {樣式列表}
	</style>
</head>

樣式規則：編程

由選擇器和樣式聲明的列表組成
就是把不少聲明好的樣式匹配給⻚面中的元素
特色：
須要選擇器查找到元素,嵌⼊入到html文件中，會影響html文件的⼤小
只能在當前⻚面使⽤
優先級低於內聯樣式
多⽤於測試和學習，不建議用在項⽬目中
易錯點（關於標籤的位置，會有⼏幾種狀況出現）
寫在 head 標籤的哪一個位置？應該在 body 標籤中
標籤放錯位置
直接開始寫樣式，根本不管在哪一個標籤里，想寫哪就寫哪
專一於寫樣式，連結構標籤都寫在 style 標籤中

(3)外部樣式

外部樣式的書寫方法windows

<head>
<link rel="stylesheet" href="wai.css" />
</head>

單首創建css文件，在html的head標籤中link標籤引入css文件。
href 叫作超文本引用，它的屬性值是須要引用css文件的路徑。
rel屬性指引入文件於當前html的關係，必寫屬性。
樣式規則：與內部樣式相同，由選擇器器和樣式聲明的列列表組成，把不少聲明好的樣式匹配給頁⾯中的元素
特色：
全部⻚面均可以使用
項⽬目中最重要的樣式使⽤方式
⼀般狀況下級別低於內部樣式，但若是外部樣式在內部樣式下⽅引用，則優先級可能高於內部樣式
易錯點
css文件和html文件的距離⾃己都不知道在哪，亂放，搞清楚本身的路徑，相對路徑仍是絕對路徑
html 中沒有引用外部 css ⽂件，檢查<link>標籤
特別喜歡寫相對路徑（？），在某個盤符的某個⽂件夾中，不推薦這種寫法，由於一旦更換文件位置立刻找不到

href選擇器進入這個css文件
編程語言

5.css 的術語

屬性（如： color、 background-color）
值（多指數字）
關鍵字（css 中的關鍵單詞⽐如 center）
屬性值（值+關鍵詞+功能符如： 1px solid rgb(0,0,0)）
聲明（屬性加屬性值 color： red；）
功能符（函數）
聲明塊{}
⻓度單位好比： px、 pt、 em、 rem、 vw、 vh、 %、 deg、 s、 ms 等
規則集
1. 不換行或者換行都可以，但建議換行更清晰
2. 若是數值爲 0 能夠不寫單位，其餘必須寫
3. 一個樣式聲明列表中最後一個樣式值能夠不寫分號其餘必須寫
4. 多個{}之間不寫分號
選擇器（⽤來選擇目標元素的特定或者指定名字）

6.控制檯調試代碼

打開控制檯的方法（部分 windows 的打開⽅式是 f12 或者鼠標右鍵-檢查）
查看百度的控制檯
經過控制檯拿到不少素材
控制檯的 elements 展現的就是 html 標籤及嵌套關係
找到元素的方式
查看嵌套方式
看看樣式，暫時更改樣式

⼆、選擇器

1.基礎選擇器

【注意】相同的選擇器不同的屬性聲明，不會被覆蓋而是共同應用。ide

（1）通用選擇器

* 號，選擇 html ⽂件內全部的元素*{樣式聲明}
最經常使用的用法是 *{margin:0;padding:0} 清除瀏覽器的內外邊距。但它的缺陷是性能過低，全部的元素不論是
否有內外邊距都會渲染，但能夠作練習時使⽤用。

（2）元素選擇器（標籤選擇器）

經過標籤的名字來選擇 html 元素，權重值爲 1，好比： div {樣式聲明}
弊端是當不少相同標籤並存的時候，就會出現沒辦法精準定位的狀況

（3） id 選擇器

給標籤的前半部分增長⼀一個屬性 id 這個屬性能夠指定一個惟一的不重複的值，權重值100
<div id="abc">一個標籤</div>
#abc {樣式聲明}
id 名不能以數字開頭，不建議使⽤中文命名，儘可能量見名知意
多個單詞鏈接能夠用- 、 _、駝峯
每一個都有和其餘重複的樣式，使⽤用 id 有幾個弊端，過於訂製化致使每個元素都要有⾃己的 id 有一套⾃己的樣式，
代碼量過⼤重複性過大。明明有重複的內容，但經過 id 選擇器只能是⼀一個一個的書寫其樣式，⼜不是很智能，以下

(4）類選擇器器【重要】

類選擇器先要使用標籤的class屬性賦值，類選擇器的權重值 10
<div class="abc">一個標籤</div>
.xxx {樣式聲明}
類名不能以數字開頭，不建議使用中文命名，盡量⻅名知意，多個單詞鏈接能夠用- 、 _、駝峯命名法
一個元素能夠建立多個類名，每一個類名之間用空格分開 <div class="abc zyx">一個標籤</div>
易錯點：
忘記給元素增長 id 或者 class 屬性就直接開始寫 css 樣式
class 的點，很容易忽略那個點
先寫類名仍是先定義class屬性

（5）羣組選擇器器

多個選擇器名用逗號鏈接，能夠一塊兒完成共一樣式的指定 div,p,span {color: red;}
羣組選擇器並不是隻能使⽤相同類型的選擇器，能夠是各類選擇器一塊兒參與 #mydiv.b,h4 {color: blue;}
函數

2.關係選擇器

在 html 結構中存在三種關係，「兄弟關係」、「⽗父子關係」、「後代關係」

（1）後代選擇器

先代元素（祖先）選擇器寫在前⾯，以後寫一個空格，空格後寫後代元素選擇器。
- 祖先元素後代元素 {樣式聲明}
須要注意的是空格不要忘記，祖先元素不必定是父級和祖父級，還能夠再往上的級別，都是能夠的
但有弊端就是級別不同的相同選擇器名稱，容易形成不想要的結果，所以當你須要更深的層次時，能夠繼續⽤用空格加
入更更深層的後代。

（2）子代選擇器

能夠選中某個元素的直接子元素，與後代不同的是子代選擇器的範圍更小。
- 父級元素 > 子級元素 {樣式聲明}
層級能夠向後代選擇器⼀樣延申,區別就是子代是>鏈接,後代是空格鏈接 .baba > div > div {字體顏色;}

（3）兄弟選擇器/同級選擇器

同一層的關係選擇器，能夠選中該元素後面的兄弟元素。
- 某元素選擇器 ~ 該元素後面的全部兄弟 {樣式聲明}
須要注意的是兄弟選擇器能夠選到該元素後面的兄弟，而選不到以前的。

（4）相鄰選擇器

同一層的關係選擇器，能夠選中參照的元素後面緊挨着被參照元素的選擇器。
- 某元素選擇器 + 該元素後⾯面的惟一相鄰的兄弟 {樣式聲明}
須要注意的是，相鄰兄弟選擇器只能選中「牢牢相鄰」的一個兄弟

3.僞類選擇器

僞類選擇器的做用是匹配同一個元素，不同狀態下的樣式
選擇器:僞類 {樣式聲明}
a:link {樣式聲明} 沒有被打開以前，或者沒被打開過（ a:link 特有）
a:visited {樣式聲明} 訪問事後（ a:visited 特有）
-div:hover {樣式聲明}⿏鼠標懸停
p:active {樣式聲明} 點擊激活
input:focus {} 屬性表明 input 標籤獲取焦點的樣式( <input/> 標籤的屬性)

input:cheaked {} 屬性表明 input 單選、複選等 type 類型被選中後的樣式( <input/> 標籤的屬性)

a:link {
  /* 沒有被打開以前，或者沒被打開過 */
  color: green;
  }
  
  a:visited {
  /* 訪問事後 */
  color: green;
  }
  
  div:hover {
  /* ⿏鼠標移⼊入標籤後展示 */
  background-color: aqua;
  }
  
  p:active {
  /* ⿏鼠標按住元素不不鬆⼿手 */
  background-color: blueviolet;
  }