前端愛好者的小白學習之路-3.1 CSS學習筆記-用CSS來提升網頁開發的效率學紮實CSS基礎語法麻麻再也不用擔心我的網頁頁面佈局太醜辣（持續更新中）

1.寫在前面

關於CSS基礎語法
【1】相比於HTML 內容及難度上有明顯的提升
【2】CSS用來美化佈局網頁
【3】CSS中最爲困難的地方就是 佈局結構
只有熟練地掌握了CSS語法基礎才能理解之後更復雜的知識點
並靈活地利用這些知識去進行網頁的佈局
閱讀完此文你會得到——
關於CSS基礎語法的要點
得到一個大致的學習CSS的方向

文章目錄

2.我的學習方式

【1】黑馬程序員pink老師課程跟隨者課程上老師給出的例子一個個地去理解根據課程中提到的概念記在筆記中溫故而知新
【2】菜鳥教程總結知識點
【3】將兩個筆記對應着總結出本篇學習筆記

3.網頁佈局中 CSS一定要熟練掌握這些！

3.1 （也就是本文）CSS基礎語法
3.2 盒子模型——標準流（縱向排列盒子）
3.3 盒子模型——浮動（橫向排列盒子）
3.4 定位（爲js打好基礎~）

學好這些並且多多練習之後，我們就能模仿着做出來一個完整的網頁啦~

4.CSS基礎語法

CSS背景

background-color:#pink;

background-image:url('圖片路徑');

background-repeat:no-repeat;不平鋪
					repeat-x;水平方向平鋪
					repeat-y;垂直方向平鋪

background-attachment:fixed;滑動頁面時 背景圖片固定
							不寫這句   背景圖片一起動

background-position:right top;圖片位置

其中簡寫屬性的方法爲：將這些屬性合併在同一個屬性中.

body {
   
   
    background:#ffffff url('img_tree.png') no-repeat right top;
    /*			顏色    圖片				不平鋪		圖片位置
	}

簡寫屬性的順序

background-position的詳情

對位置的規定方法一：

background-position:x% y%  水平位置-x  豎直位置-y

對位置的規定方法二：

background-position:x y  水平位置-100px（空100像素的位置）  豎直位置-2em（空兩個字的位置）

對位置的規定方法三：

background-position:left top-左上
background-position:right top-右上
background-position:center top-中上

CSS文本

文本顏色

用於設置文字的顏色

for example:

body {
   
   color:red;}
h1 {
   
   color:#00ff00;}
h2 {
   
   color:rgb(255,0,0);}

文本縮進

用來指定文本的第一行的縮進

p {
   
   text-indent:50px;}--縮進50像素
p {
   
   text-indent:2em;}--縮進2個字

文本對齊方式

用於設置文本的水平對齊方式

可以設置成——

居中對齊

h1 {
   
   text-align:center;}

對齊到左（默認）/右

p.date {
   
   text-align:right;}

例子如下：

天吶！右邊好醜咋辦？！一行代碼搞定！

“text-align=justify”===每一行被展開爲寬度相等左右外邊距對齊

p.main{
   
   text-align=justify;}

現在再看！

舒服了！

文本修飾

主要：消除文本的下劃線！

因爲在之後的網頁界面編寫中，經常使用ul>li進行下拉列表或者導航欄的編寫所以需要清除由於li造成的字符前面的小圓點
所以text-decoration:none;的應用很多~

a {
   
   text-decoration:none;}

也可以用於加入一些特別效果

文本轉換

指定在一個文本中的大寫和小寫字母

可用於所有字句變成大寫

p.uppercase{
   
   text-transform:uppercase;}

所有字句小寫

p.lowercase{
   
   text-transform:lowercase;}

每個單詞的首字母大寫

p.capitalize{
   
   text-transform:capitalize;}

CSS字體

字體屬性定義字體，加粗，大小，文字樣式

字體系列-“weiruanyahei”

p{
   
   font-family:"Times New Roman", Times, serif;}

字體樣式-斜體字

p.normal {
   
   font-style:normal;}--正常
p.italic {
   
   font-style:italic;}--斜體
p.oblique {
   
   font-style:oblique;}--另一種斜體寫法（認識即可 有時不支持）

字體粗細

p.normal {
   
   font-weight:normal;}---400=normal
p.thick {
   
   font-weight:bold;}---700=bold
p.thicker {
   
   font-weight:900;}

p.thick.next{
   
   font-weight:inherit}--繼承父元素（thick標籤）的字體粗細

重點記住：

font-weight : 700  ——加粗
font-weight :400   ——正常粗細（將字體從加粗還原爲正常）

字體大小–設置像素/em

h1 {
   
   font-size:40px;}
h2 {
   
   font-size:30px;}
p {
   
   font-size:14px;}

/*text-indent=1em--句頭空出一個字的大小*/
h1 {
   
   font-size:2.5em;} /* 40px/16=2.5em */
h2 {
   
   font-size:1.875em;} /* 30px/16=1.875em */
p {
   
   font-size:0.875em;} /* 14px/16=0.875em */

選擇器

通配符選擇器

簡單網頁佈局設計之前的 css樣式表中扔一個消除內外邊距~
（盒子模型中會了解到）

全員設置的方法

普通選擇器

id選擇器&Class選擇器（類選擇器）

id選擇器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
/*id選擇器*/
#para1
{
   
   
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>這個段落不受該樣式的影響。</p>
</body>
</html>

class選擇器（類選擇器）

普通class選擇器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
.center
{
   
   
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">標題居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

特殊的class選擇器–可以指定特定的文本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
p.center
/*指定讓p標籤改變樣式*/
{
   
   
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">這個標題不受影響</h1>
/*下面的p標籤改變樣式*/
<p class="center">這個段落居中對齊。</p> 
</body>
</html>

樣式表

插入樣式表有三種方法–如下

外部樣式表–獨立的.css文件

樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。

下面我們寫一個獨立的css文件

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-pjYxJwc8-1611791213948)(D:\前端開發\image\Snipaste_2020-12-13_16-51-01.png)]$

在每個需要用到的html文件中（每個頁面）使用標籤鏈接到樣式表。標籤在（文檔的）頭部：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>waibu</title>

    <!-- 用link引入css文件 -->
    <!-- rel="stylesheet"表示被鏈接的文檔是css文檔 -->
    <link rel="stylesheet" href="外部樣式表style.css">
</head>

<body>
    <div>來呀~快活呀,反正有大把時間...</div>
</body>

</html>

內部樣式表—初學的時候用的最多！

當單個文檔需要特殊的樣式時，就應該使用內部樣式表。

你可以使用

<head>
<style>

body {
   
   
    background-image:url("images/back40.gif");
	}

</style>
</head>

<body>
	<div></div>
</body>

內聯樣表

由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢!

這種方法慎用！且用處很少

當樣式僅需要在一個元素上應用一次時。

不需要了

<p style="color:sienna;margin-left:20px">
這是一個段落。
</p>

多重樣式優先級

樣式表允許以多種方式規定樣式信息（外部、內部、內聯）。

樣式可以規定在一個外部的 CSS 文件中（外部樣式表），

在 HTML 頁的頭元素中（背部樣式表），

單個的 HTML 元素中（內聯樣表）。

在同一個 HTML 文檔內部引用多個外部樣式表（外部樣式表*n）。

一般情況下優先級如下：

（內聯樣式）Inline style > （內部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認樣式

<head>
    <!-- 外部樣式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>

    /* 內部樣式 */
    <style type="text/css">
      h3{
    
    color:green;}
    </style>
   
</head>

<body>
    <h3>測試！</h3>
</body>

其他CSS優先規則

內聯樣式 > id 選擇器 > 類選擇器 = 僞類選擇器 = 屬性選擇器 > 標籤選擇器 = 僞元素選擇器

id選擇器
#content-id {
   
   
    color: red;
}
類選擇器！
.content-class {
   
   
    color: blue;
}
標籤選擇器
div {
   
   
    color: grey;
}

很形象的一個例子
通配符選擇器是最卑微的浮游生物~
普通選擇器是體型較小的痞老闆~ 可以恰浮游生物
類選擇器是魚兒~ 可以恰痞老闆和浮游生物
id選擇器是大鯊魚~ 可以恰魚兒痞老闆和浮游生物
內聯樣式表是，，大炮吧反正就賊強可以打敗前面的這些個選擇器
最後加過important的選擇器是最強的核彈~ 毀滅一切QAQ

CSS鏈接 a:hover a:active …

特別的鏈接，可以有不同的樣式，這取決於他們是什麼狀態。

這四個鏈接狀態是：

a:link - 正常，未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當用戶鼠標放在鏈接上時
a:active - 鏈接被點擊的那一刻

四個鏈接樣式的順序–“LoVe and HAte”

設置爲若干鏈路狀態的樣式時，四個鏈接樣式有順序

a:hover 必須跟在 a:link 和 a:visited後面
a:active 必須跟在 a:hover後面
記憶方法如下

  L(link)OV(visited)E  and  H(hover)A(active)TE

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

文本修飾

text-decoration 屬性主要用於刪除鏈接中的下劃線：

因爲生成的鏈接默認有下劃線所以經常需要使用！

a:link {
   
   text-decoration:none;}
a:visited {
   
   text-decoration:none;}
a:hover {
   
   text-decoration:underline;}
a:active {
   
   text-decoration:underline;}

背景顏色

背景顏色屬性指定鏈接背景色：

a:link {
   
   background-color:#B2FF99;}
a:visited {
   
   background-color:#FFFF85;}
a:hover {
   
   background-color:#FF704D;}
a:active {
   
   background-color:#FF704D;}

CSS列表：list-style-type

html中有兩種類型的表—無序列表&有序列表

而在CSS中，使用list-style-type 可以改變列表的列表項的樣式！！

無序列表 ul - 列表項標記用特殊圖形（如小黑點、小方框等）
有序列表 ol - 列表項的標記有數字或字母
一下爲普通無序列表有序列表和

我們使用CSS可以列出進一步的樣式，並且用圖像代替

更多使用細則請複製鏈接滑到最底部找到所有CSS列表屬性的詳情

CSS表格

讓HTML表格更加美觀

表格邊框 border-xxx

指定CSS表格邊框，使用border屬性。

下面的例子指定了一個表格的Th和TD元素的黑色邊框

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-zR2SDbfy-1611791213959)(D:\前端開發\image\Snipaste_2020-12-19_20-00-02.png)]$

上面的例子中的表格有雙邊框。這是因爲表和th/ td元素有獨立的邊界。

th/td元素沒有被賦予邊界不會出現雙邊框：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-xeyG24gD-1611791213960)(D:\前端開發\image\Snipaste_2020-12-19_19-59-37.png)]$

th屬性與th屬性各自有獨立的邊界看起來即爲雙邊框：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-f40wdWGr-1611791213962)(D:\前端開發\image\Snipaste_2020-12-19_19-59-50.png)]$

摺疊表框（顯示一個表的單個邊框）

border-collapse 屬性設置表格的邊框成爲—單一的邊框

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-oC7JOCz2-1611791213963)(D:\前端開發\image\Snipaste_2020-12-19_19-58-56.png)]$

表格寬度&高度

下面的例子爲設置100%的寬度 50px的th元素的高度的表格

table 
{
   
   
    width:100%;
}
th
{
   
   
    height:50px;
}

表格文字對齊 text-align

表格中的文本對齊和垂直對齊屬性。

text-align屬性設置水平對齊方式—

向左 left ，右 right，或中心 center：

td
{
   
   
    text-align:right;
}

表格填充 border: 1px black

在表的內容中控制空格之間的邊框

使用td和th元素的填充屬性：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mDTWobO1-1611791213964)(D:\前端開發\image\Snipaste_2020-12-19_20-11-39.png)]$

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-0O3wAPPD-1611791213965)(D:\前端開發\image\Snipaste_2020-12-19_20-11-48.png)]$

通過更改pedding的值 來調節邊框與邊框的距離 讓表格更“胖”！

表格顏色

用於指定邊框的顏色

table, td, th
{
   
   
    border:1px solid green;
}

用於指定th元素的文本和背景顏色

th
{
   
   
    background-color:green;
    color:white;
}

例子如下

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7YG4bXZ4-1611791213967)(D:\前端開發\image\Snipaste_2020-12-19_20-20-15.png)]$

實用案例

製作一個美觀的個性表格

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-MDQC2WJ8-1611791213969)(D:\前端開發\image\Snipaste_2020-12-17_09-53-00.png)]$

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Yw3WLWii-1611791213970)(D:\前端開發\image\Snipaste_2020-12-17_09-52-04.png)]$

之後俺儘量回過頭來再把筆記整理一下並且增添進去一下自己的理解與畫的重點~
然後就是——
坐等超重要的盒子模型的文兒辣

前端愛好者的小白學習之路-3.1 CSS學習筆記-用CSS來提升網頁開發的效率 學紮實CSS基礎語法 麻麻再也不用擔心我的網頁頁面佈局太醜辣（持續更新中）

1.寫在前面

文章目錄

2.我的學習方式

3.網頁佈局中 CSS一定要熟練掌握這些！

4.CSS基礎語法

CSS背景

簡寫屬性的順序

background-position的詳情

CSS文本

文本顏色

文本縮進

文本對齊方式

文本修飾

文本轉換

更多文本屬性…

更多對文本的操作實例！

CSS字體

字體系列-“weiruanyahei”

字體樣式-斜體字

字體粗細

字體大小–設置像素/em

選擇器

通配符選擇器

普通選擇器

id選擇器&Class選擇器（類選擇器）

id選擇器

class選擇器（類選擇器）

樣式表

外部樣式表–獨立的.css文件

內部樣式表—初學的時候用的最多！

內聯樣表

多重樣式優先級

其他CSS優先規則

CSS鏈接 a:hover a:active …

四個鏈接樣式的順序–“LoVe and HAte”

文本修飾

背景顏色

更多鏈接樣式

添加不同樣式的超鏈接

CSS列表：list-style-type

CSS表格

表格邊框 border-xxx

摺疊表框（顯示一個表的單個邊框）

表格寬度&高度

表格文字對齊 text-align

表格填充 border: 1px black

表格顏色

實用案例

前端愛好者的小白學習之路-3.1 CSS學習筆記-用CSS來提升網頁開發的效率學紮實CSS基礎語法麻麻再也不用擔心我的網頁頁面佈局太醜辣（持續更新中）