Css學習手冊之基本篇

時間 2019-11-07

標籤 css 學習手冊基本欄目 CSS 简体版

原文原文鏈接

Css學習手冊之基本篇

每次寫前端都是一個痛苦的過程，老是靜不下來，完全的研究下前端的技術，致使每次套頁面都是直接採用一些封裝好的控件，而有時對這些樣式不滿意時，又得百度一下該怎麼用，低效且不愉快，強制本身好好的學習下基本功css

html

I. 基本使用姿式

0. 幾種css使用姿式

主要有下面三個使用姿式，其中優先級爲 c > b > a前端

a.直接引入css文件
b.在html中，直接寫css:
c.在標籤中直接寫css

<!-- 方式 a -->
<link rel="stylesheet" type="text/css" href="mystyle.css">


<!-- 方式 b -->
<style>
p {
  color: red
}
</style>


<!-- 方式 c -->
<div style="color:red; font-size:12pt">dd</div>

對於標籤的樣式定義，特別是在引入css文件時，發現一個標籤可能多重命中方式，有經過id進行設置的，有class設置的，也有標籤設置的，他們之間的優先級是:css3

1. 內聯樣式表的權值最高 1000；
2. ID 選擇器的權值爲 100
3. Class 類選擇器的權值爲 10
4. HTML 標籤選擇器的權值爲 1

1. css使用方式

a. 基本使用

在實際的使用中，常常出現的定義class, 根據id或者直接對標籤，來指定css屬性git

<style>
<!-- 直接經過標籤名 + {} 方式來肯定標籤對應的屬性 -->
p { 
  background-color: yellow;
}


<!-- 經過id來肯定css樣式: # + id + {} -->
#tabId {
  background-color: red;
}


<!-- 經過定義class方式: . + className + {}-->
.clzName {
  background-color: blue;
}
</style>

上面是基本的使用姿式，每每咱們常常會遇到組合的方式，如但願設置: div標籤內部的 p 標籤中的文本顏色等，常見組合有四種github

b. 後代選擇器（空格分割）

如上面的case， div 標籤內部全部的p標籤中文本，都設置爲紅色web

<style>
div p {
  color: red
}
</style>

<div> 
  <span>
    <p> 紅色的文本內容 </p>
  </span>
  <hr/>
  <p> 紅色的文本內容 </p>
</div>

c. 子元素選擇器 (>號分割)

這個相比較與後代選擇器，區別就是子元素只匹配直接關聯的子元素（也就是中間不能有嵌套）api

<style>
div > span {
  color: red
}
</style>

<div> 
  <p>
    <span> 默認黑色的文本內容 </span>
  </p>
  <hr/>
  <span> 紅色的文本內容 </span>
</div>

d. 相鄰兄弟 (+號分割)

可選擇緊接在另外一元素後的元素，且兩者有相同父元素瀏覽器

<style>
div+p
{
    background-color:yellow;
}
</style>

<p>(默認黑色的內容).</p>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>

<p>(黃色的內容).</p>

e. 普通兄弟 (~號分割)

後續兄弟選擇器選取全部指定元素以後的兄弟元素。hexo

<style>
div+p
{
    background-color:yellow;
}
</style>

<p>(默認黑色的內容).</p>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>(黃色的內容).</p>
<p>(黃色的內容).</p>
<span>默認黑色</span>
<p>(黃色的內容).</p>

2. 背景屬性

background-color: 背景色
background-image: 背景圖
background-repeat: 背景圖重複的方式( no-repeat 不重複； repea-xt 水平重複; repeat-y 垂直重複)
background-position: 背景的位置 ( left, top, center, right, bottom，能夠組合使用)

支持簡寫方式:

body {
  background: #ffffff url('img_tree.png') no-repeat right top;
}

3. 文本屬性

color: 設置顏色
direction: 文本方向 (ltr 左到右； rtl 右到左; inherit 從父元素繼承)
letter-spacing: 字符間距
text-align: 文本對齊方式 (left, center, right)
line-height: 行高
text-decoration: 修飾（none 標準； underline 下劃線; overline 上劃線; line-through 刪除線; blink 閃爍）
text-indent: 首行縮進
text-shadow: 陰影
text-transform: 控制字母 (capitalize 首字母大寫; uppercase 全大寫； lowercase 全小寫)
vertical-align：垂直對其
white-space: 設置元素中空白的處理方式
- nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。
- pre-wrap 保留空白符序列，可是正常地進行換行。
- pre-line 合併空白符序列，可是保留換行符。
- pre 空白會被瀏覽器保留。其行爲方式相似 HTML 中的 <pre> 標籤。

5. 字體屬性

font-size: 字體大小
- 16px == 1em
font-family: 字體系列
- Serif: 字符在行的末端擁有額外的裝飾
- Sans-serif: 這些字體在末端沒有額外的裝飾
- Monospace: 全部的等寬字符具備相同的寬度
font-style: 字體樣式
- italic 瀏覽器會顯示一個斜體的字體樣式。
- oblique 瀏覽器會顯示一個傾斜的字體樣式。
- inherit 規定應該從父元素繼承字體樣式。

6. 連接

a:link {color:#000000;} /* 未訪問連接*/
a:visited {color:#00FF00;} /* 已訪問連接 */
a:hover {color:#FF00FF;} /* 鼠標移動到連接上 */
a:active {color:#0000FF;} /* 鼠標點擊時 */

注意： a:hover 必須在 a:link 和 a:visited 以後，須要嚴格按順序才能看到效果。

注意： a:active 必須在 a:hover 以後。

7. 列表

在html中，列表主要是 : li, ul, ol 等

默認 ol 是以數字排序； ul 是以符號排序； li 爲列表內的元素標籤

用的較多的屬性

list-style-type: 設置列表項標誌的類型。
- none 無標記。
- disc 默認。標記是實心圓。
- circle 標記是空心圓。
- square 標記是實心方塊。
- decimal 標記是數字。
- decimal-leading-zero 0開頭的數字標記。(01, 02, 03, 等。)
- lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)
- upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。)
- lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
- upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
- lower-greek 小寫希臘字母(alpha, beta, gamma, 等。)
- lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)
- upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)
- hebrew 傳統的希伯來編號方式
- armenian 傳統的亞美尼亞編號方式
- georgian 傳統的喬治亞編號方式(an, ban, gan, 等。)
- cjk-ideographic 簡單的表意數字
- hiragana 標記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
- katakana 標記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
- hiragana-iroha 標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
- katakana-iroha 標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
list-style-image: 用圖片做爲列表的前置，如 ( url('sqpurple.gif');)
list-style-position: （outside, inside）感受不出太大的差異

8. box模型

Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。

主要是用來控制一個標籤和其餘標籤的位置，好比兩個標籤之間作間隔區分等，比較有用

padding與margin的區別

a. Margin 外邊距

主要是標籤與周邊的距離設置

margin-top:100px;
margin-right:50px;
margin-bottom:100px;
margin-left:50px;

b. padding 內邊距

定義元素邊框與元素內容之間的空間

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

c. border 邊框

這個有些時候仍是挺有用的，設置一個標籤四周的邊框，通常能夠設置線粗細，樣式，顏色等

border-width : 線的粗細
border-style
- dotted: dotted:定義一個點線邊框
- dashed: 定義一個虛線邊框
- solid: 定義實線邊框
- double: 定義兩個邊框。兩個邊框的寬度和 border-width 的值相同
- groove: 定義3D溝槽邊框。效果取決於邊框的顏色值
- ridge: 定義3D脊邊框。效果取決於邊框的顏色值
- inset:定義一個3D的嵌入邊框。效果取決於邊框的顏色值
- outset: 定義一個3D突出邊框。效果取決於邊框的顏色值
border-color: 邊框的顏色

一個很是有意思的點是，邊框支持分別設置上下左右四個線的形式，如只設置一個左右有顏色的

<div>
  <p style="border-left-style:dashed;
    border-left-color:red;
    border-right-style:solid;"> 只有左右邊框的狀況</p>
</div>

d. outline 邊緣輪廓

outline主要做用在border上，繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用

outline-color
outline-style
- none
- dotted: dotted:定義一個點線邊框
- dashed: 定義一個虛線邊框
- solid: 定義實線邊框
- double: 定義兩個邊框。兩個邊框的寬度和 border-width 的值相同
- groove: 定義3D溝槽邊框。效果取決於邊框的顏色值
- ridge: 定義3D脊邊框。效果取決於邊框的顏色值
- inset:定義一個3D的嵌入邊框。效果取決於邊框的顏色值
- outset: 定義一個3D突出邊框。效果取決於邊框的顏色值
outline-width

從實際體驗來說，這個和border的效果差很少

9. 尺寸

這個主要就是用來控制標籤的寬高等相關尺寸的屬性，常見的設置以下

width: 定寬
height: 定高
min-width: 最小寬
max-width: 最大寬
min-height: 最小高
max-height: 最大高
line-height: 行高

10. 顯示

控制標籤的顯示隱藏等

display屬性設置一個元素應如何顯示
visibility屬性指定一個元素應可見仍是隱藏

a. display

none能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。

塊元素是一個元素，佔用了所有寬度，在先後都是換行

內聯元素只須要必要的寬度，不強制換行。

1. 塊級元素(block)特性：

老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;

2. 內聯元素(inline)特性：

和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是裏面文字或圖片的大小;

3. 塊級元素主要有：

 address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

4. 內聯元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

5. 可變元素(根據上下文關係肯定該元素是塊元素仍是內聯元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

b. visibility

hidden能夠隱藏某個元素,但隱藏的元素仍需佔用與未隱藏以前同樣的空間,也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

11. 定位 position

position 屬性指定了元素的定位類型。在使用top, bottom, left, right以前，通常須要先肯定position屬性，明確具體的定位方式

static
- 默認值，即沒有定位，元素出如今正常的流中
- 靜態定位的元素不會受到 top, bottom, left, right影響。
relative
- 元素的位置相對於瀏覽器窗口是固定位置
- 即窗口是滾動的它也不會移動，經常使用來作懸浮按鈕
fixed
- 相對定位元素的定位是相對其正常位置。
absolute
- 絕對定位的元素的位置相對於最近的已定位父元素，若是元素沒有已定位的父元素，那麼它的位置相對於<html>

如一個測試

<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>這是一個絕對定位了的標題</h2>
<p>用絕對定位,一個元素能夠放在頁面上的任何位置。標題下面放置距離左邊的頁面100 px和距離頁面的頂部150 px的元素。.</p>
</body>

注意

當多個元素在同一個位置時，就會出現重疊的問題，特別是relative這種場景，在網頁右下角添加懸浮窗時，常常會出現遮蓋的問題，這時能夠用 z-index 屬性來指定覆蓋順序，越大，則越上面

12. float 浮動

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會從新排列。

每每是用於圖像，但它在佈局時同樣很是有用。

元素的水平方向浮動，意味着元素只能左右移動而不能上下移動。

一個浮動元素會盡可能向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

浮動元素以後的元素將圍繞它。

浮動元素以前的元素將不會受到影響。

若是圖像是右浮動，下面的文本流將環繞在它左邊

若是你把幾個浮動的元素放到一塊兒，若是有空間的話，它們將彼此相鄰

<!-- 注意多個浮動的圖片時，縮小瀏覽器窗口大小，佈局會發生改變 -->
.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

13. 水平 & 垂直對齊

css實現對齊方式

根據前面學習到的幾個屬性(text-align, margin, position)等來實現各類標籤的對齊方式

text-align: left, right, center
- 一般是對於文本的對其方式，好比一個標籤塊內文本是如何對齊的，靠左，靠右仍是居中
margin: auto
- 標籤的對齊方式，如但願一個div標籤水平居中，就能夠這麼玩
- 圖片須要居中對齊，採用這種方案 (注意在img使用時，通常須要指定 display:block;margin:auto，這樣纔會生效)

一個case以下

<div style="width:200px; border: 3px solid blue; padding: 4px">
  <div style="width:50%; border:3px solid red; margin: auto; padding: 20px"> 這是一個測試標籤居中對其的示例 </div>
</div>
<br/>
<div style="width:200px; border: 3px solid blue; padding: 4px">
  <div style="width:50%; border:3px solid red; text-align: center; padding: 20px"> 這是一個測試標籤內文本居中對齊的示例 </div>
</div>

II. CSS3高階用法

1. 邊框 border

前面介紹了邊框的設置，主要仍是線條類型，粗細以及顏色，如今則能夠擴展，設置圓角、陰影，邊框圖

border-radius: 2px (四周圓角)
- 一個值：四個圓角值相同
- 兩個值: 第一個值爲左上角與右下角，第二個值爲右上角與左下角
- 三個值: 第一個值爲左上角, 第二個值爲右上角和左下角，第三個值爲右下角
- 四個值: 第一個值爲左上角，第二個值爲右上角，第三個值爲右下角，第四個值爲左下角。
border-image: url(border.png) 30 30 round; （邊框由圖來替代）
- border-image-source 用於指定要用於繪製邊框的圖像的位置
- border-image-slice 圖像邊界向內偏移
- border-image-width 圖像邊界的寬度
- border-image-outset 用於指定在邊框外部繪製 border-image-area 的量
- border-image-repeat 設置圖像邊界是否應重複（repeat）、拉伸（stretch）或鋪滿（round）。
box-shadow: 10px 10px 2px #bbbbbb (設置陰影)
- h-shadow 必需的。水平陰影的位置。容許負值
- v-shadow 必需的。垂直陰影的位置。容許負值
- blur 可選。模糊距離
- spread 可選。陰影的大小
- color 可選。陰影的顏色

一個實例，捷足 box-shadow 給圖片加上一個白色背景邊框

<style>
#boxshadow {
    position: relative;
    <!-- 添加邊框陰影 -->
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); 
    padding: 10px;
    background: white;
}

/* Make the image fit the box */
#boxshadow img {
    width: 100%;
    border: 1px solid #8a4419;
    border-style: inset;
}

#boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    width: 70%;
    left: 15%; /* one half of the remaining 30% */
    height: 20%;
    bottom: 0;
}
</style>

<div id="boxshadow">
  <img src="https://raw.githubusercontent.com/liuyueyi/Source/master/img/info/blogInfoV2.png" alt="Norway">
</div>

2. 文本

除了前面說的文本顏色，大小，decorate, transform等以外，這裏額外的加了一些特性

a. text-shadow

5px 5px 5px #FF0000; 陰影，參數說明同 box-shadow

b. text-overflow

文字逸出時，怎麼辦（配合overflow:hidden，將逸出的隱藏掉）

clip：修剪文本
ellipsis: 用省略號代替逸出的文本
string: 用給出的字符串代替

一個實例：

<style>
div.ov {
  width: 120px;
  white-space:nowrap;
  border: 1px solid black;
  overflow:hidden;
  text-overflow:ellipsis
}
</style>
<div class="ov">
  這是一個會移除的文本
</div>

c. word-wrap & word-break

word-wrap 文本太長時，換行的策略

normal 只在容許的斷字點換行
break-word 在長單詞或 URL 地址內部進行換行。

還有一個主要針對英文單詞的換行策略 word-break

normal 使用瀏覽器默認的換行規則。
break-all 容許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。

d. 字體

@Font-face 指定特殊的字體

通常的使用姿式以下:

<style> 
@font-face
{
    <!-- 字體命名 -->
    font-family: myFirstFont;
    <!-- 指定字體文件路徑 -->
    src: url(sansation_light.woff);
}
 
div
{
    font-family:myFirstFont;
}
</style>

3. 動畫

a. transform

實現轉換，最多見的就是旋轉必定角度了

translate(x, y): 根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動
rotate(30deg): 表示順時針渲染30°
scale(2,3): 表示x軸擴大2倍，y抽擴大3倍
skew(30deg,20deg): X軸(水平方向)傾斜30°；Y軸(垂直方向)傾斜20°
matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功

b. transition

過渡，配合上面的transform能夠實現旋轉or放大的動畫效果

如一個case，在鼠標放上去時，放大且旋轉360°

<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s, background 2s;
}

div:hover {
    width: 200px;
    height: 200px;
  	background:blue;
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
}
</style>

<div>鼠標移動到 div 元素上，查看過渡效果。</div>

c. 動畫

經過 @keyframes 來建立動畫的效果，經過 animation 來使用動畫

一個實例

<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
</style>

<div>哈哈</div>