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

下載本文檔

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

文檔簡介

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

<head>…</head>

<meta>

<title>…</title>

<link>

<style>…</style>

<body>…</body>

<!--…-->

定義

HTML

文檔文檔的信息

HTML

文檔的元信息

文檔的標題

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

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

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

標題字大?。╤1~h6）

<b>...</b>

粗體字

<strong>...</strong>

粗體字(強調(diào))

<i>...</i>

斜體字

<em>...</em>

斜體字(強調(diào))

<u>...</u>

下劃線

<del>...</del>

刪除線(表示刪除)

<center>…</center>

居中文本

<ul>…</ul>

無序列表

<ol>…</ol>

有序列表

<li>…</li>

列表項目

<a

href=”…”>…</a>

超鏈接<font>

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

<sub>

下標

<sup>

上標

<br>

換行

<p>

段落32020年9月28日圖形

<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標簽定義了網(wǎng)頁元素內(nèi)容CSS定義了顯示的樣式62020年9月28日1構(gòu)造CSS規(guī)則7張飛{身高:185cm;體重:105kg;性別:男;性格:暴躁;民族:漢族;}2級標題{字體:華文云彩;大小:24像素;顏色:紅色;裝飾:下劃線;}h2{

font-family:華文云彩;

font-size:24px;

color:red;

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

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

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

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

后將CSS代碼直接寫在其中。3.1行內(nèi)樣式<html><head><title>頁面標題</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>標記進行聲明。3.2內(nèi)嵌樣式<html><head><title>頁面標題</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日實際應(yīng)用中使用頻率最高、最實用，它將HTML頁面本身與CSS樣式分離為兩個或多個文件。3.3鏈接樣式<html><head><title>頁面標題</title><linkhref="07-07.css"type="text/css"rel="stylesheet"></head><body> <h2>CSS標題</h2> <p>這是正文內(nèi)容……</p> <h2>CSS標題</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>頁面標題</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)先級問題行內(nèi)樣式嵌入樣式鏈接樣式>>建議：在網(wǎng)站建設(shè)中，最好只使用其中的1-2種，這樣既有利于后期的維護和管理，也不會出現(xiàn)各種樣式“沖突”的情況，便于設(shè)計者理順設(shè)計的整體思路。202020年9月28日偽類和偽元素偽類是一種特殊的選擇器，用來指定一個或與其相關(guān)的選擇符的狀態(tài)。它的最大的用處就是可以對鏈接在不同狀態(tài)下定義不同的樣式效果。結(jié)構(gòu)如下：選擇器：偽類{屬性：值}

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

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

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

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

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

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

CSS字體樣式屬性

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

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

行內(nèi)樣式>id樣式>類別樣式>標記樣式332020年9月28日CSS選擇器1.使用多個元素與多個規(guī)則(標記選擇器)一個規(guī)則用于多個元素一個元素設(shè)置多個規(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)鍵詞來設(shè)置元素的顯示規(guī)則2.色彩屬性值

1）使用英文彩色名稱

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

1）相對尺寸值

px（像素點）

em（當前字體中字符的高度）

ex（當前字體中x的高度）2）絕對尺寸值

in（英寸）

cm（厘米）

mm（毫米）

pt（磅）CSS屬性與屬性值相對和絕對的

溫馨提示

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

評論

0/150

提交評論