第三章：CSS3樣式基礎(chǔ)

知識(shí)點(diǎn)：

1.CSS概念

2.CSS語(yǔ)法格式

3.CSS的使用

4.三類范圍

為什么使用CSS

化妝前：

化妝后：

HTML語(yǔ)法，在網(wǎng)頁(yè)上顯示數(shù)據(jù)，第一章p br b font 第二章 table form標(biāo)簽。

網(wǎng)頁(yè)增加效果，就是樣式，樣式相當(dāng)于女孩兒化妝。
1.CSS概念

層疊樣式表（Cascading Style Sheet）

html是骨架，是內(nèi)容。css是衣服，起到裝飾的作用，花花綠綠的。

優(yōu)勢(shì)

• 內(nèi)容與表現(xiàn)分離
• 網(wǎng)頁(yè)的表現(xiàn)統(tǒng)一，容易修改
• 豐富的樣式，使頁(yè)面布局更加靈活
• 減少網(wǎng)頁(yè)的代碼量，增加網(wǎng)頁(yè)的瀏覽速度，節(jié)省網(wǎng)絡(luò)帶寬
• 運(yùn)用獨(dú)立于頁(yè)面的CSS，有利于網(wǎng)頁(yè)被搜索引擎收錄

2.語(yǔ)法格式

語(yǔ)法格式：

范圍分三類

行內(nèi)樣式、頁(yè)內(nèi)樣式、外部樣式這三類。

2.1行內(nèi)樣式

<font color='red'><p>靜夜思</font></font> <p style="font-style: italic;font-size: 24px;"><p

style=“屬性:值;屬性2:值2;屬性3:值3;”

這種風(fēng)格，仍然不太友好，就是HTML5標(biāo)簽里面包含了樣式，我們的目的是讓二者盡量分離,分離的好處，就是格式更為清晰。

2.2頁(yè)內(nèi)樣式

頁(yè)內(nèi)樣式的范圍，比行內(nèi)樣式要大，在整個(gè)網(wǎng)頁(yè)內(nèi)部可以使用。

<style>p{font-size:18px;color:green;} </style>

設(shè)計(jì)了一個(gè)行內(nèi)樣式，寫(xiě)了一個(gè)p標(biāo)簽的樣式，好處是只要是p標(biāo)簽，都變色了。壞處呢？都變了。

h1{text-align: center;}

4.背景樣式的使用：
解決大圖：不能顯示完畢，第一種笨方法：復(fù)制、粘貼很多

第二種簡(jiǎn)單方法：直接設(shè)置body的高度為2500px;

超鏈接樣式+導(dǎo)航效果：

<!--1.網(wǎng)頁(yè)格式--><table id="daohang"><tr><td><a href="復(fù)習(xí).html">二次元</a></td><td><a href="index.html">腦殘</a></td><td><a href="">科幻</a></td><td><a href="">搞笑</a></td><td><a href="">鬼畜</a></td></tr></table>

樣式：

<!--2.樣式;border-collapse: collapse;去除間隙，出來(lái)一條線;text-decoration: none;去除a標(biāo)簽的下劃線 ；a:hover:懸停效果;--><style>table{width:100%;border:1px solid #f00;border-collapse: collapse;}tr{text-align: center;}td{border:1px solid #f00;height: 50px;}a{text-decoration: none;font-size: 18px;}a:hover{color: red;}</style>

2.3 外部樣式

比如，化妝；行內(nèi)樣式，像描眉一樣，非常的細(xì)膩；

頁(yè)內(nèi)樣式：像化妝的時(shí)候，向臉部圖白色；

外部樣式：相當(dāng)于變臉的，抖音看下，男的可以變女；買(mǎi)個(gè)皮；
3.選擇器類型

1.標(biāo)簽選擇器

標(biāo)簽{ 屬性:值;屬性2:值2;屬性3:值3}

命名時(shí)，僅數(shù)字、字母、下劃線可用，且數(shù)字不可開(kāi)頭，標(biāo)簽也不可用于id命名
id選擇器不可重復(fù) 獨(dú)一無(wú)二

2.類選擇器

類樣式選擇：就是給標(biāo)簽分類；

在設(shè)計(jì)CSS樣式;text-align:center:文本居中;right:文本居右.;類樣式選擇器，定義之后，可以在下面多個(gè)地方進(jìn)行

調(diào)用 。定義的語(yǔ)法格式：

.類樣式名{屬性：值；屬性2：屬性2：值2；屬性3：值3}

調(diào)用的時(shí)候：

class=“類樣式名”

3.ID選擇器

ID：編號(hào)，學(xué)號(hào)、考號(hào)，都是唯一的。網(wǎng)頁(yè)當(dāng)中，我們一般用唯一標(biāo)識(shí)的一個(gè)標(biāo)簽，使用ID選擇器，用來(lái)和其他標(biāo)簽做區(qū)分，一般使用ID選擇器的都是大范圍的標(biāo)簽。

定義ID選擇器使用#選擇器名 {屬性：值；屬性2：值2；屬性3：值3}

命名時(shí)，僅數(shù)字、字母、下劃線可用，且數(shù)字不可開(kāi)頭，標(biāo)簽也不可用于class命名
一個(gè)標(biāo)簽可用多個(gè)類名 共性樣式可以巧用

作業(yè)：大家可以使用截圖的方式，來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)站頁(yè)面.

4.通配符選擇器

通配符選擇器是用來(lái)選擇所有元素。比如下面將頁(yè)面上所有元素的 margin 和 padding 都設(shè)置為 0。

* {``marigin: ``0``;``padding``: ``0``; }

總結(jié)一下：

如果設(shè)置塊大范圍，一般使用ID選擇器，它是唯一的；如果設(shè)置多個(gè)類別的時(shí)候，就使用類別選擇器（類樣式選擇器）如果網(wǎng)頁(yè)中有很多同類的標(biāo)簽有共同的樣式，可以使用標(biāo)簽選擇器。

4.選擇器使用范圍

行內(nèi)樣式：眼影;行內(nèi)樣式是style屬性

頁(yè)內(nèi)樣式：自己新衣服;頁(yè)內(nèi)樣式，是style標(biāo)簽;也可以多次使用，被當(dāng)前頁(yè)面內(nèi)的多個(gè)標(biāo)簽多次使用。

外部樣式：租用婚紗;外部樣式?jīng)]有了style

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

外部樣式的好處是，定義一次，可以被多個(gè)網(wǎng)頁(yè)使用。

5.選擇器的優(yōu)先級(jí)

外部<頁(yè)內(nèi)<行內(nèi)，距離最近的樣式優(yōu)先使用

id選擇器>class選擇器>標(biāo)簽選擇器

優(yōu)先級(jí)的提升

！important（僅可直接選中）：使得優(yōu)先級(jí)最大

6.字體樣式

修改字體時(shí)，只要電腦內(nèi)有的字體都可以進(jìn)行修改

怎么看電腦內(nèi)裝的字體，計(jì)算機(jī)，c盤(pán)，Windows，fonts,就可以看到我們電腦上裝的所有字體

letter-spacing:字母間距

7.文本樣式

• color顏色取值的格式
  1、直接寫(xiě)顏色 也要復(fù)合寫(xiě)法 yellowgreen 黃綠色
  2、16進(jìn)制
  3、RGB 紅綠藍(lán) 三原色
  顏色不需要記，ui會(huì)給你的
• 文字對(duì)齊方式
  text-align: center 居中
  right 右對(duì)齊
  left 左對(duì)齊
  對(duì)齊參照點(diǎn)不同 ，對(duì)齊的方式也不同，以父級(jí)元素為標(biāo)準(zhǔn)，不設(shè)寬度，默認(rèn)為瀏覽器寬度。暫時(shí)有這個(gè)概念，盒子模型學(xué)完就推翻了
  如果想要指定對(duì)齊，需要設(shè)置寬和高
  寬：weight 高：hight
• text-indent 首行縮進(jìn)
  單位可以是px，像素，也可以是em，即縮幾個(gè)字體，根據(jù)全部字體的大小來(lái)變化，首行縮進(jìn)用em比較合適
  開(kāi)啟控制臺(tái)進(jìn)行調(diào)整
• line-height： 設(shè)置行高，設(shè)置文字的垂直居中 line-height，和父元素的高度保持一致，即垂直居中
• 設(shè)置文本裝飾
  text-decoration: line—throw 中劃線
  underline 下劃線
  overline 上劃線

8.偽類

概念：

格式 ，加冒號(hào)

ul>li:first-child、last-child等偽類。

超鏈接的偽類：a:link、a:visited、a:hover、鼠標(biāo)cursor:wait|pointer

a:hover 必須位于 a:link 和 a:visited 之后，這樣才能生效！

在 CSS 定義中，a:active 必須位于 a:hover 之后，這樣才能生效！

9.鼠標(biāo)

鼠標(biāo)指針變化

直接在style下面寫(xiě)屬性cursor：值；

值 描述
url 需使用的自定義光標(biāo)的 URL。注釋：請(qǐng)?jiān)诖肆斜淼哪┒耸冀K定義一種普通的光標(biāo)，以防沒(méi)有由 URL 定義的可用光標(biāo)。
default 默認(rèn)光標(biāo)（通常是一個(gè)箭頭）
auto 默認(rèn)。瀏覽器設(shè)置的光標(biāo)。
crosshair 光標(biāo)呈現(xiàn)為十字線。
pointer 光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）
move 此光標(biāo)指示某對(duì)象可被移動(dòng)。
e-resize 此光標(biāo)指示矩形框的邊緣可被向右（東）移動(dòng)。
ne-resize 此光標(biāo)指示矩形框的邊緣可被向上及向右移動(dòng)（北/東）。
nw-resize 此光標(biāo)指示矩形框的邊緣可被向上及向左移動(dòng)（北/西）。
n-resize 此光標(biāo)指示矩形框的邊緣可被向上（北）移動(dòng)。
se-resize 此光標(biāo)指示矩形框的邊緣可被向下及向右移動(dòng)（南/東）。
sw-resize 此光標(biāo)指示矩形框的邊緣可被向下及向左移動(dòng)（南/西）。
s-resize 此光標(biāo)指示矩形框的邊緣可被向下移動(dòng)（南）。
w-resize 此光標(biāo)指示矩形框的邊緣可被向左移動(dòng)（西）。
text 此光標(biāo)指示文本。
wait 此光標(biāo)指示程序正忙（通常是一只表或沙漏）。
help 此光標(biāo)指示可用的幫助（通常是一個(gè)問(wèn)號(hào)或一個(gè)氣球）。

10.作業(yè)

使用CSS類來(lái)制作京東導(dǎo)航

總結(jié)

以上是生活随笔為你收集整理的零基础学前端开发之CSS基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。