国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

[HTML]Web前端開發(fā)技術5.1（HTML5、CSS3、JavaScript ）CSS基礎，selector，properties，font，Cascading，@import——喵喵畫網(wǎng)頁

2年前作者：本喵是FW分類：Toy博客閱讀(32)違法舉報

這篇具有很好參考價值的文章主要介紹了[HTML]Web前端開發(fā)技術5.1（HTML5、CSS3、JavaScript ）CSS基礎，selector，properties，font，Cascading，@import——喵喵畫網(wǎng)頁。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

[HTML]Web前端開發(fā)技術5.1（HTML5、CSS3、JavaScript ）CSS基礎，selector，properties，font，Cascading，@import——喵喵畫網(wǎng)頁,喵喵畫網(wǎng)頁,html,前端,html5,網(wǎng)頁制作,計算機學習

希望你開心，希望你健康，希望你幸福，希望你點贊！

最后的最后，關注喵，關注喵，關注喵，佬佬會看到更多有趣的博客哦?。?！

喵喵喵，你對我真的很重要！

目錄

前言

CSS概念

??傳統(tǒng)HTML的缺點

CSS的優(yōu)勢

瀏覽器與CSS 3

CSS編輯方法

使用CSS控制Web頁面

CSS基本語法

CSS定義與引用

行內(nèi)樣式表（內(nèi)聯(lián)樣式）

內(nèi)部樣式表

內(nèi)部樣式表的特點

鏈接外部樣式表

導入外部樣式表

鏈接外部樣式表與導入外部樣式表的區(qū)別

課后練習

應用CSS行內(nèi)樣式表

應用CSS內(nèi)部樣式表

總結

前言

?理解CSS 的概念、特點。
?掌握CSS 基本語法、選擇器分類與聲明的結構。
? 掌握CSS 的定義及引用的方式。
? 理解CSS 繼承與層疊的含義。

CSS概念

?????? CSS（Cascading Style Sheet）層疊樣式表，也稱為級聯(lián)樣式表，用來設計網(wǎng)頁風格。

??傳統(tǒng)HTML的缺點

l (1) 維護困難 。為了修改某個特殊標記格式，需要花費很多時間，尤其對整個網(wǎng)站而言，后期修改和維護成本較高。
l (2) 網(wǎng)頁過于臃腫 。由于沒有統(tǒng)一對各種風格樣式進行控制， HTML 頁面往往體積過大，占用掉很多寶貴的帶寬。
l (3) 定位困難 。在整體布局頁面時， HTML 對于各個模塊的位置調(diào)整顯得捉襟見肘，過多的 table 標記將會導致頁面的復雜和后期維護的困難。

[HTML]Web前端開發(fā)技術5.1（HTML5、CSS3、JavaScript ）CSS基礎，selector，properties，font，Cascading，@import——喵喵畫網(wǎng)頁,喵喵畫網(wǎng)頁,html,前端,html5,網(wǎng)頁制作,計算機學習

CSS的優(yōu)勢

1.表現(xiàn)和內(nèi)容相分離

???????? CSS通過定義HTML標記的樣式，使得頁面內(nèi)容和顯示相分離，簡化了網(wǎng)頁格式設計，也使得對網(wǎng)頁格式的修改更方便。

2.加強了網(wǎng)頁的表現(xiàn)力

???????? CSS樣式屬性提供了比HTML更多的格式設計功能。

3.增強了網(wǎng)站風格的一致性

??????? ?CSS樣式定義到樣式表文件中，在多個網(wǎng)頁中同時應用樣式表文件中的樣式，就確保了多個網(wǎng)頁具有一致的格式?？梢噪S時更新樣式表文件，改變網(wǎng)站風格。大大降低了網(wǎng)站的開發(fā)與維護工作。

瀏覽器與CSS 3

l CSS 3 制定完成之后，具有了很多新的功能，即新樣式。但這些 新樣式在瀏覽器中不能獲得完全支持 。主要在于各個瀏覽器對 CSS 3 的很多細節(jié)處理上存在差異，例如，一種標記的某個屬性一種瀏覽器支持，而另外一種瀏覽器不支持，或者兩種瀏覽器都支持，但其顯示效果卻不一樣。

CSS編輯方法

???? 1.寫在HTML文件里；

???? 2.寫在獨立的*.CSS文件里。

使用CSS控制Web頁面

CSS控制頁面是通過CSS規(guī)則實現(xiàn)的，CSS規(guī)則由選擇器和聲明組成，聲明由屬性和屬性值對組成。

CSS提供了豐富的選擇器類型:標記選擇器、類選擇器、id選擇器及偽類選擇器等。

在HTML頁面中應用CSS規(guī)則的方式也比較靈活，包括:行內(nèi)(內(nèi)聯(lián))樣式表、內(nèi)部樣式表、鏈入外部樣式表及導入外部樣式表。

CSS基本語法

l CSS 定義

??? CSS是一個由包含一個或多個規(guī)則的文本文件。

l 規(guī)則： 選擇符 (selector) 、屬性 (properties) 和屬性值 (value)
[HTML]Web前端開發(fā)技術5.1（HTML5、CSS3、JavaScript ）CSS基礎，selector，properties，font，Cascading，@import——喵喵畫網(wǎng)頁,喵喵畫網(wǎng)頁,html,前端,html5,網(wǎng)頁制作,計算機學習
選擇器通常是需要改變樣式的 HTML 標記。
聲明由一個或多個屬性名稱與屬性值對組成。 
p{font-size:12px; color:blue; font-weight:bold;}

[HTML]Web前端開發(fā)技術5.1（HTML5、CSS3、JavaScript ）CSS基礎，selector，properties，font，Cascading，@import——喵喵畫網(wǎng)頁,喵喵畫網(wǎng)頁,html,前端,html5,網(wǎng)頁制作,計算機學習

<style type="text/css">
   /*  定義body樣式  */
	body{background:black;color:red;}
	.div{padding:50px;}
	.pic{float:right;	padding:20px;}
</style>
CSS注釋方法                /* 此標記應用在文檔中 */
    注釋不能嵌套。
    注意與HTML注釋方法不同。

CSS定義與引用

CSS樣式表類型：4種

內(nèi)聯(lián)樣式表（行內(nèi)樣式表）
內(nèi)部樣式表
鏈接外部樣式表
導入外部樣式表

行內(nèi)樣式表（內(nèi)聯(lián)樣式）

基本語法：

??? <標記 style="屬性: 屬性值; 屬性: 屬性值;…">

語法說明：

通過使用 style 屬性 為各種 HTML 元素標簽添加樣式，其作用范圍只在指定的 HTML 元素內(nèi)部。
style 的多個屬性之間 用分號分割 ；
標記本身定義的 style 優(yōu)先于其他所有樣式定義。

行內(nèi)樣式表只影響單個元素（標記）

<p style=“color:red;font-size:28px;”>本段落生效</p>

[HTML]Web前端開發(fā)技術5.1（HTML5、CSS3、JavaScript ）CSS基礎，selector，properties，font，Cascading，@import——喵喵畫網(wǎng)頁,喵喵畫網(wǎng)頁,html,前端,html5,網(wǎng)頁制作,計算機學習

內(nèi)部樣式表

l 語法格式如下：

<style>

?? 選擇器{屬性名稱1:屬性值1; 屬性名稱2:屬性值2; ... 屬性名稱N:屬性值N }

</style>

舉個栗子：

基本語法：

<head>

<style type="text/css">

??? .div1,.div3{background:#99ffff;width:200px;

?????????????????????????? height:100px;}??

??? #div2{background:#00cc00;width:200px;

????????????????????????????? height:100px;}

???? p,h1{font-size:18px; color:#003366;}

</style>?
</head>

style標記是雙標記，有type屬性,必須放在頭部。

內(nèi)部樣式表只影響單個文件

內(nèi)部樣式表的特點

l 內(nèi)部樣式就是將 CSS 樣式代碼添加到 <head> 與 </head> 之間，并且用 <style> 和 </style> 標記進行聲明。這種寫法 可以統(tǒng)一整個頁面的樣式 。
l 單個頁面需要應用樣式時，可以使用內(nèi)部樣式表。
l 適合文件很少， CSS 代碼也不多的情況。
l 如果一個網(wǎng)站有很多頁面，應用內(nèi)部樣式表會使得每個頁面文件都會變大，后期維護難度也大。

鏈接外部樣式表

基本語法：

<link rel="stylesheet" href="外部樣式表的文件名"/ >

語法說明：

? <link> 標記是單標記，放在頭部。
? 外部樣式表的文件名稱必須帶 后綴名 . css 。
? CSS 文件一定是純文本格式；
? 外部樣式表修改后所 有引用的頁面樣式自動地更新
? 外部樣式表 優(yōu)先級低于 內(nèi)部樣式表；

同時鏈接幾個外部樣式表時按“最近優(yōu)先的原則”

導入外部樣式表

基本語法：

?? <style>

??????? @import url("外部樣式表的文件名稱");

??????? p,p1{font-size:18px; color:blue}

?? </style>

語法說明：

import 語句后的 “ ; ” 號，一定要加上！
“ 外部樣式表的文件名稱 ” 是要嵌入的樣式表文件名稱，含路徑，后綴為 . css ；
@import 應該放在 style 元素的最前面。

鏈接外部樣式表與導入外部樣式表的區(qū)別

l 導入方式在瀏覽器下載 HTML 文件時將樣式文件的全部內(nèi)容 復制到 @import 關鍵字位置 ，以替換該關鍵字
l 鏈接方式僅在 HTML 文件需要引用 CSS 樣式文件中的某個樣式時，瀏覽器才會鏈接樣式文件，讀取需要的內(nèi)容

課后練習

應用CSS行內(nèi)樣式表

  • 網(wǎng)頁標題：CSS行內(nèi)樣式表的應用
  • 網(wǎng)頁的所有內(nèi)容放在<div>容器標簽內(nèi)
  • 標題分別使用一級標題和五級標題
  • 使用行內(nèi)樣式設置一級標題的樣式：字體顏色紅色，字體大小26px
  • 使用行內(nèi)樣式設置水平分割線的樣式：粗2px 虛線 藍色
  • 使用行內(nèi)樣式設置五級標題的樣式：背景顏色黃色，字體顏色藍色，字體大小14px；
  • 使用行內(nèi)樣式設置段落的樣式：字體大小12px
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS行內(nèi)樣式表的應用</title>
</head>

<body>
<div>
	<h1 style="color:#F00; font-size:26px;">服務向?qū)?lt;/h1>
	<hr style="border:2px dashed blue"/>
	<h5 style="background-color:yellow; color:blue; font-size:14px;">商城的支付方式有哪些？</h5>
	<p>網(wǎng)上銀行支付和貨到付款</p>
	<h5 style="background-color:yellow; color:blue; font-size:14px;">商城上買東西一般幾天可以收到貨？</h5>
	<p style="font-size:12px">一般情況下，若運送方式為快遞，同城交易，如果當天發(fā)貨，當天可以收到；省外的通過空運3小時內(nèi)可以送達。</p>
	<h5 style="background-color:yellow; color:blue; font-size:14px;">賣家發(fā)貨后一直沒有收到貨怎么辦?</h5>
	<p style="font-size:12px">在賣家已經(jīng)操作發(fā)貨后，一直未收到貨的，可能由于活動量大造成物流延誤，建議您進入“我的訂單”頁面找到對應交易點擊“查看物流”，關注您商品的運輸流轉(zhuǎn)記錄。</p> 
	<p style="font-size:12px">如交易即將超時打款前您還未收到商品，避免出現(xiàn)錢貨都不在您手中的情況，建議及時進入“我的訂單”頁面找到對應交易點擊“退貨/退款”。</p>
	<h5 style="background-color:yellow; color:blue; font-size:14px;">拍下的商品想要退貨退款怎么辦?</h5>
	<p style="font-size:12px">活動期間成功付款的所有活動商品，不支持7天無理由退換貨。如果消費者有退換貨需求，在符合《商城處理規(guī)范》的相關規(guī)定的情況下，所有活動商品只支持退貨，不支持換貨，交易雙方另有約定的從其約定。</p>
	<p>非活動期間成功付款的所有交易，按照正常退貨退款流程處理，查看如何申請退款。</p>
	<h5 style="background-color:yellow; color:blue; font-size:14px;">申請退款后，錢款多久可以退回？</h5>
	<p style="font-size:12px">申請退款后，錢款退回的時間取決于雙方的協(xié)商及賣家對退款處理的快慢。只要退款狀態(tài)顯示為“退款成功”，即說明錢款已退回。</p>
	<h5 style="background-color:yellow; color:blue; font-size:14px;">如何舉報釣魚網(wǎng)站/中獎信息網(wǎng)站？</h5>
	<p style="font-size:12px">如果您遇到或者收到了非法分子發(fā)來的釣魚網(wǎng)站、中獎信息網(wǎng)站，可以進入“我的賬號”—“舉報管理”中，進行舉報。</p>
</div>
</body>
</html>

應用CSS內(nèi)部樣式表

  • 網(wǎng)頁標題：CSS內(nèi)部樣式表的應用
  • 網(wǎng)頁的所有內(nèi)容放在<div>容器標簽內(nèi)
  • 標題分別使用一級標題和五級標題
  • 使用內(nèi)部樣式表設置一級標題的樣式：字體顏色紅色，字體大小26px
  • 使用內(nèi)部樣式表設置水平分割線的樣式：粗2px 虛線 藍色
  • 使用內(nèi)部樣式表設置五級標題的樣式：背景顏色黃色，字體顏色藍色，字體大小14px
  • 使用內(nèi)部樣式表設置段落的樣式：字體大小12px
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>樣式表的應用</title>
</head>

<body>
<div>
	<h1>服務向?qū)?lt;/h1>
	<hr/>
	<h5>商城的支付方式有哪些？</h5>
	<p>網(wǎng)上銀行支付和貨到付款</p>
	<h5>商城上買東西一般幾天可以收到貨？</h5>
	<p>一般情況下，若運送方式為快遞，同城交易，如果當天發(fā)貨，當天可以收到；省外的通過空運3小時內(nèi)可以送達。</p>
	<h5>賣家發(fā)貨后一直沒有收到貨怎么辦?</h5>
	<p>在賣家已經(jīng)操作發(fā)貨后，一直未收到貨的，可能由于活動量大造成物流延誤，建議您進入“我的訂單”頁面找到對應交易點擊“查看物流”，關注您商品的運輸流轉(zhuǎn)記錄。</p> 
	<p>如交易即將超時打款前您還未收到商品，避免出現(xiàn)錢貨都不在您手中的情況，建議及時進入“我的訂單”頁面找到對應交易點擊“退貨/退款”。</p>
	<h5>拍下的商品想要退貨退款怎么辦?</h5>
	<p>活動期間成功付款的所有活動商品，不支持7天無理由退換貨。如果消費者有退換貨需求，在符合《商城處理規(guī)范》的相關規(guī)定的情況下，所有活動商品只支持退貨，不支持換貨，交易雙方另有約定的從其約定。</p>
	<p>非活動期間成功付款的所有交易，按照正常退貨退款流程處理，查看如何申請退款。</p>
	<h5>申請退款后，錢款多久可以退回？</h5>
	<p>申請退款后，錢款退回的時間取決于雙方的協(xié)商及賣家對退款處理的快慢。只要退款狀態(tài)顯示為“退款成功”，即說明錢款已退回。</p>
	<h5>如何舉報釣魚網(wǎng)站/中獎信息網(wǎng)站？</h5>
	<p>如果您遇到或者收到了非法分子發(fā)來的釣魚網(wǎng)站、中獎信息網(wǎng)站，可以進入“我的賬號”—“舉報管理”中，進行舉報。</p>
</div>
</body>
</html>

總結

CSS 規(guī)則由選擇器和聲明組成 。
選擇器 包括 id 選擇器、類選擇器、標記選擇器、偽類選擇器 等。
CSS 分為內(nèi)聯(lián)樣式表、內(nèi)部樣式表、鏈接外部樣式表以及導入外部樣式表 :
內(nèi)聯(lián)樣式表 是在標記內(nèi)設置 style 屬性，且僅對該標記有效；
內(nèi)部樣式表 是在頁面的 head 標記中加入 style 標記，它對整個頁面都有效； 外部樣式表 是將 CSS 規(guī)則寫在單獨的文件里，文件的后綴名為 . css ，稱為 CSS 文件，通過 link 標記或者“ @import ” 語句將獨立的 CSS 文件引入到頁面中，前者稱為 鏈接外部樣式表 ，后者稱為 導入外部樣式表 。
這個章節(jié)有點長，喵子分成兩個節(jié)了。

希望你開心，希望你健康，希望你幸福，希望你點贊！

最后的最后，關注喵，關注喵，關注喵，佬佬會看到更多有趣的博客哦！??！

喵喵喵，你對我真的很重要！

[HTML]Web前端開發(fā)技術5.1（HTML5、CSS3、JavaScript ）CSS基礎，selector，properties，font，Cascading，@import——喵喵畫網(wǎng)頁,喵喵畫網(wǎng)頁,html,前端,html5,網(wǎng)頁制作,計算機學習文章來源地址http://www.zghlxwxcb.cn/news/detail-752162.html

到了這里，關于[HTML]Web前端開發(fā)技術5.1（HTML5、CSS3、JavaScript ）CSS基礎，selector，properties，font，Cascading，@import——喵喵畫網(wǎng)頁的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

領支付寶紅包贊助服務器費用

相關文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包