CSS核心基礎(chǔ)課件_第1頁(yè)
CSS核心基礎(chǔ)課件_第2頁(yè)
CSS核心基礎(chǔ)課件_第3頁(yè)
CSS核心基礎(chǔ)課件_第4頁(yè)
CSS核心基礎(chǔ)課件_第5頁(yè)
已閱讀5頁(yè)，還剩36頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

CSS核心基礎(chǔ)12020年9月28日復(fù)習(xí)常用HTML標(biāo)簽基本<html>…</html>

<head>…</head>

<meta>

<title>…</title>

<link>

<style>…</style>

<body>…</body>

<!--…-->

定義

HTML

文檔文檔的信息

HTML

文檔的元信息

文檔的標(biāo)題

文檔與外部資源的關(guān)系文檔的樣式信息

可見(jiàn)的頁(yè)面內(nèi)容

注釋22020年9月28日文本<h1>...</h1>

標(biāo)題字大?。╤1~h6）

<b>...</b>

粗體字

<strong>...</strong>

粗體字(強(qiáng)調(diào))

<i>...</i>

斜體字

<em>...</em>

斜體字(強(qiáng)調(diào))

<u>...</u>

下劃線

<del>...</del>

刪除線(表示刪除)

<center>…</center>

居中文本

<ul>…</ul>

無(wú)序列表

<ol>…</ol>

有序列表

<li>…</li>

列表項(xiàng)目

<a

href=”…”>…</a>

超鏈接<font>

定義文本字體尺寸、顏色、大小

<sub>

下標(biāo)

<sup>

上標(biāo)

<br>

換行

<p>

段落32020年9月28日?qǐng)D形

<img

src=’”…”>

定義圖像

<hr>

水平線

42020年9月28日1構(gòu)造CSS規(guī)則2基本CSS選擇器3在HTML中使用CSS的方法4本章小結(jié)5主要內(nèi)容2020年9月28日CSS層疊樣式表HTML標(biāo)簽定義了網(wǎng)頁(yè)元素內(nèi)容CSS定義了顯示的樣式62020年9月28日1構(gòu)造CSS規(guī)則7張飛{身高:185cm;體重:105kg;性別:男;性格:暴躁;民族:漢族;}2級(jí)標(biāo)題{字體:華文云彩;大小:24像素;顏色:紅色;裝飾:下劃線;}h2{

font-family:華文云彩;

font-size:24px;

color:red;

text-decoration:underline;}這是定義2級(jí)標(biāo)題CSS樣式后的文字效果2020年9月28日初學(xué)者在書寫CSS樣式時(shí)，除了要遵循CSS樣式規(guī)則，還必須注意CSS代碼結(jié)構(gòu)中的幾個(gè)特點(diǎn)，具體如下：CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫，屬性和值不區(qū)分大小寫，按照書寫習(xí)慣一般將“選擇器、屬性和值”都采用小寫的方式。如果屬性的值由多個(gè)單詞組成且中間包含空格，則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)。為了提高代碼的可讀性，書寫CSS代碼時(shí)，通常會(huì)加上CSS注釋。在CSS代碼中空格是不被解析的，花括號(hào)以及分號(hào)前后的空格可有可無(wú)。因此，可以使用空格鍵、Tab鍵、回車鍵等對(duì)樣式代碼進(jìn)行排版，提高代碼的可讀性。屬性的值和單位之間是不允許出現(xiàn)空格的。82020年9月28日1標(biāo)記選擇器2類別選擇器3ID選擇器9CSS規(guī)則主要由：選擇器、屬性、屬性值3部分組成。2020年9月28日標(biāo)記選擇器是聲明哪些HTML標(biāo)記采取哪種CSS樣式2.1標(biāo)記選擇器h2{

font-size:24px;color:red;}選擇器屬性值屬性值聲明聲明102020年9月28日類別選擇器的名稱可以由用戶自定義，聲明時(shí)在選擇器名稱前加上“.”符號(hào)2.2類別選擇器.c{

font-size:24px;color:red;}選擇器屬性值屬性值聲明聲明112020年9月28日ID選擇器的名稱也可以由用戶自定義，聲明時(shí)在選擇器名稱前加上“#”符號(hào)2.3ID選擇器#ID{

font-size:24px;color:red;}選擇器屬性值屬性值聲明聲明122020年9月28日CSS選擇器的作用就是從HTML頁(yè)面中找出特定的某類元素。常用的幾類CSS選擇器如下表所示。常用的CSS選擇器選擇器代碼示例代碼說(shuō)明通用選擇器**{}選擇所有元素。標(biāo)簽選擇器元素名稱a{}、body{}、p{}根據(jù)標(biāo)簽選擇元素。類選擇器.<類名>.beam{}根據(jù)class的值選擇元素。id選擇器#<id值>#logo{}根據(jù)id的值選擇元素。屬性選擇器[<條件>][href]{}、[attr=”val”]{}根據(jù)屬性選擇元素。并集選擇器<選擇器>,<選擇器>em,strong{}同時(shí)匹配多個(gè)選擇器，取多個(gè)選擇器的并集。后代選擇器<選擇器><選擇器>.asideNavli{}先匹配第二個(gè)選擇器的元素，并且屬于第一個(gè)選擇器內(nèi)。子代選擇器<選擇器>><選擇器>ul>li{}匹配匹配第二個(gè)選擇器，且為第一個(gè)選擇器的元素的后代。兄弟選擇器<選擇器>+<選擇器>p+a{}匹配緊跟第一個(gè)選擇器并匹配第二個(gè)選擇器的元素，如緊跟p元素后的a元素。偽選擇器::<偽元素>或:<偽類>p::first-line{}、a:hover{}偽選擇器不是直接對(duì)應(yīng)HTML中定義的元素，而是向選擇器增加特殊的效果。偽選擇器比較特殊，分為兩種偽元素和偽類兩種。CSS選擇器132020年9月28日元素名描述::first-line匹配文本塊的首行。如p::first-line表示選中p元素的首行。::first-letter匹配文本內(nèi)容的首字母。::before在選中元素的內(nèi)容之前插入內(nèi)容。::after在選中元素的內(nèi)容之后插入內(nèi)容。元素名描述:root選擇文檔中的根元素，通常返回html。:first-child父元素的第一個(gè)子元素。:last-child父元素的最后一個(gè)子無(wú)素。:only-child父元素有且只有一個(gè)子元素。:only-of-type父元素有且只有一個(gè)指定類型的元素。:nth-child(n)匹配父元素的第n個(gè)子元素。:nth-last-child(n)匹配父元素的倒數(shù)第n個(gè)子元素。:nth-of-type(n)匹配父元素定義類型的第n個(gè)子元素。:nth-last-of-type(n)匹配父元素定義類型的倒數(shù)n個(gè)子元素。:link匹配鏈接元素。:visited匹配用戶已訪問(wèn)的鏈接元素。:hover匹配處于鼠標(biāo)懸停狀態(tài)下的元素。:active匹配處于被激活狀態(tài)下的元素，包括即將點(diǎn)擊（按壓）。:focus匹配處于獲得焦點(diǎn)狀態(tài)下的元素。:enabled(:disabled)匹配啟用（禁用）狀態(tài)的元素。:checked匹配被選中的單選按鈕和復(fù)選框的input元素。:default匹配默認(rèn)元素。:valid(:invalid)根據(jù)輸入數(shù)據(jù)驗(yàn)證，匹配有效（無(wú)效）的input元素。:in-range(out-of-range)匹配在指定范圍之內(nèi)（之外）受限的input元素。偽類選擇器偽元素選擇器案例代碼（詳見(jiàn)教材demo1-1）CSS選擇器142020年9月28日3在HTML中使用CSS的方法15行內(nèi)樣式嵌入樣式鏈接樣式2020年9月28日直接在HTML的標(biāo)記中使用style屬性，然

后將CSS代碼直接寫在其中。3.1行內(nèi)樣式<html><head><title>頁(yè)面標(biāo)題</title></head><body><pstyle=“color:red;text-decoration:underline;">正文內(nèi)容1</p><pstyle=“color:red;text-decoration:underline;">正文內(nèi)容2</p><pstyle=“font-size:25px;font-weight:bold;">正文內(nèi)容3</p></body></html>此方式盡量少使用162020年9月28日將CSS樣式寫在<head>與</head>

之間，并且用<style>和</style>標(biāo)記進(jìn)行聲明。3.2內(nèi)嵌樣式<html><head><title>頁(yè)面標(biāo)題</title><styletype="text/css">P{ color:#0000FF; text-decoration:underline; font-weight:bold;font-size:25px;}</style></head><body><p>這是第1行正文內(nèi)容……</p><p>這是第2行正文內(nèi)容……</p></body></html>（或外部樣式表）172020年9月28日實(shí)際應(yīng)用中使用頻率最高、最實(shí)用，它將HTML頁(yè)面本身與CSS樣式分離為兩個(gè)或多個(gè)文件。3.3鏈接樣式<html><head><title>頁(yè)面標(biāo)題</title><linkhref="07-07.css"type="text/css"rel="stylesheet"></head><body> <h2>CSS標(biāo)題</h2> <p>這是正文內(nèi)容……</p> <h2>CSS標(biāo)題</h2> <p>這是正文內(nèi)容……</p></body></html>h2{ color:#0000FF;}p{ color:#FF0000; text-decoration:underline; font-weight:bold; font-size:15px;}182020年9月28日<html><head><title>頁(yè)面標(biāo)題</title>

<linkhref="07-07.css"type="text/css"rel="stylesheet">

<styletype=“text/css”>p{color:blue;}</style><head><body><pstyle=“color:gray;”>觀察文字的顏色</p></body></html>

內(nèi)嵌式行內(nèi)樣式多重樣式表192020年9月28日3.5各種方式的優(yōu)先級(jí)問(wèn)題行內(nèi)樣式嵌入樣式鏈接樣式>>建議：在網(wǎng)站建設(shè)中，最好只使用其中的1-2種，這樣既有利于后期的維護(hù)和管理，也不會(huì)出現(xiàn)各種樣式“沖突”的情況，便于設(shè)計(jì)者理順設(shè)計(jì)的整體思路。202020年9月28日偽類和偽元素偽類是一種特殊的選擇器，用來(lái)指定一個(gè)或與其相關(guān)的選擇符的狀態(tài)。它的最大的用處就是可以對(duì)鏈接在不同狀態(tài)下定義不同的樣式效果。結(jié)構(gòu)如下：選擇器：偽類{屬性：值}

如：a.two:link{color:red;}

注意：這里的偽類不是任意用戶定義的字符；而是已經(jīng)預(yù)先定義好的。212020年9月28日W3C組織定義的標(biāo)準(zhǔn)偽類：link未被訪問(wèn)過(guò)的鏈接：visited已訪問(wèn)過(guò)的鏈接

：hover鼠標(biāo)經(jīng)過(guò)時(shí)對(duì)對(duì)象元素表現(xiàn)的樣式：active:focus為焦點(diǎn)元素加上指定樣式:first-child將特殊的樣式添加到元素的第一個(gè)子元素:lang定義指定的元素中使用的語(yǔ)言注意：按照a:link，a:visited，a:hover，a:actived的順序書寫

222020年9月28日偽元素:first-letter將樣式應(yīng)用到文本的首字符

:first-line將樣式添加到文本的首行:before在某個(gè)元素前插入內(nèi)容:after在某個(gè)元素后插入內(nèi)容232020年9月28日242020年9月28日（1）font-size:字號(hào)大小

font-size屬性用于設(shè)置字號(hào)，該屬性的值可以使用相對(duì)長(zhǎng)度單位，也可以使用絕對(duì)長(zhǎng)度單位。具體如下：

CSS字體樣式屬性

252020年9月28日1、CSS字體樣式屬性（2）font-family:字體font-family屬性用于設(shè)置字體。網(wǎng)頁(yè)中常用的字體有宋體、微軟雅黑、黑體等，例如將網(wǎng)頁(yè)中所有段落文本的字體設(shè)置為微軟雅黑，可以使用如下CSS樣式代碼：可以同時(shí)指定多個(gè)字體，中間以逗號(hào)隔開(kāi)，表示如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)，直到找到合適的字體。p{font-family:"微軟雅黑";}使用font-family設(shè)置字體時(shí)，需要注意以下幾點(diǎn)：

各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開(kāi)。中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。如果字體名中包含空格、#、$等符號(hào)，則該字體必須加英文狀態(tài)下的單引號(hào)或雙引號(hào)，例如font-family:"TimesNewRoman";。盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示。1、CSS字體樣式屬性（3）font-weight:字體粗細(xì)font-weight屬性用于定義字體的粗細(xì)，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數(shù)倍）。（4）font-variant:變體font-variant屬性用于設(shè)置變體（字體變化），一般用于定義小型大寫字母，僅對(duì)英文字符有效。其可用屬性值如下：normal：默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體。small-caps：瀏覽器會(huì)顯示小型大寫的字體，即所有的小寫字母均會(huì)轉(zhuǎn)換為大寫。但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。1、CSS字體樣式屬性（5）font-style:字體風(fēng)格font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下：normal：默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式。italic：瀏覽器會(huì)顯示斜體的字體樣式。oblique：瀏覽器會(huì)顯示傾斜的字體樣式。1、CSS字體樣式屬性（6）font:綜合設(shè)置字體樣式font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置，其基本語(yǔ)法格式如下：選擇器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}使用font屬性時(shí)，必須按上面語(yǔ)法格式中的順序書寫，各個(gè)屬性以空格隔開(kāi)。其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。@font-face:CSS3的新特性，用于定義服務(wù)器字體。@font-face{font-family:myfont;src:url(font/book.ttf);}p{font-family:myfont;font-size:4em;}4.CSS的繼承特性當(dāng)使用css對(duì)某個(gè)元素設(shè)置，該設(shè)置會(huì)對(duì)該元素的子元素也會(huì)起作用。除非這些子元素又設(shè)置了不同的格式屬性。322020年9月28日Css的層疊特性層疊：解決樣式?jīng)_突問(wèn)題。<p>這是第一行文本</p><pclass=“red”>這是第二行文本</p><pid=“l(fā)ine3”class=“red”>這是第三行文本</p><pstyle=“color:orange;”id=“l(fā)ine3”>這是第三行文本</p>

行內(nèi)樣式>id樣式>類別樣式>標(biāo)記樣式332020年9月28日CSS選擇器1.使用多個(gè)元素與多個(gè)規(guī)則(標(biāo)記選擇器)一個(gè)規(guī)則用于多個(gè)元素一個(gè)元素設(shè)置多個(gè)規(guī)則TITLE,AUTHOR,p,p{margin:8px}TITLE{display:block}TITLE{font-size:12pt;font-weight:bold}TITLE{font-size:14pt;font-style:italic}P{color:blue}342020年9月28日CSS屬性與屬性值1.屬性關(guān)鍵字預(yù)先定義的屬性關(guān)鍵詞來(lái)設(shè)置元素的顯示規(guī)則2.色彩屬性值

1）使用英文彩色名稱

2）使用名種RGB表示方式352020年9月28日3.尺寸屬性值

1）相對(duì)尺寸值

px（像素點(diǎn)）

em（當(dāng)前字體中字符的高度）

ex（當(dāng)前字體中x的高度）2）絕對(duì)尺寸值

in（英寸）

cm（厘米）

mm（毫米）

pt（磅）CSS屬性與屬性值相對(duì)和絕對(duì)的

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論