從零開始學習html(六)開始學習CSS,為網頁添加樣式

来源:http://www.cnblogs.com/guxinglang/archive/2017/05/07/6796586.html
-Advertisement-
Play Games

一、認識CSS樣式 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>認識CSS樣式</title> 6 <style ...


一、認識CSS樣式

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>認識CSS樣式</title>
 6 <style type="text/css">
 7 p{
 8    font-size:12px;/*設置文字字型大小*/
 9    color:red;/*設置文字顏色*/
10    font-weight:bold;/*設置字體加粗*/
11 }
12 </style>
13 </head>
14 <body>
15 <p>慕課網,超酷的互聯網、IT技術免費學習平臺,創新的網路一站式學習、實踐體驗;服務及時貼心,內容專業、有趣易學。專註服務互聯網工程師快速成為技術高手!</p>
16 </body>
17 </html>
認識CSS樣式

CSS全稱為“層疊樣式表 (Cascading Style Sheets)”,

它主要是用於定義HTML內容在瀏覽器內的顯示樣式,如文字大小、顏色、字體加粗等。

如下列代碼:

p{
   font-size:12px;
   color:red;
   font-weight:bold;
}

使用CSS樣式的一個好處是通過定義某個樣式,可以讓不同網頁位置的文字有著統一的字體、字型大小或者顏色等。

試一試:用css樣式代碼修改字體大小

在編輯器中的第8行修改

“font-size:12px;”為“font-size:20px;”

觀察結果視窗的變化。

font-size:20px;後面的分號;不能忘記。

二、CSS樣式的優勢

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS樣式的優勢</title>
 6 <style type="text/css">
 7 span{
 8    color:red;
 9 }
10 </style>
11 </head>
12 <body>
13     <p>慕課網,<span>超酷的互聯網</span>、IT技術免費學習平臺,創新的網路一站式學習、實踐體驗;<span>服務及時貼心</span>,內容專業、<span>有趣易學</span>。專註服務互聯網工程師快速成為技術高手!</p>
14 </body>
15 </html>
CSS樣式的優勢

為什麼使用css樣式來設置網頁的外觀樣式呢?編輯器中是一段文字,我們想把“超酷的互聯網”、“服務及時貼心”、

有趣易學”這三個短語的文本顏色設置為紅色,這時就可以通過設置樣式來設置,而且只需要編寫一條css樣式語句。

第一步:把這三個短語用<span></span>括起來。(見代碼編輯器13行)

第二步:寫入下列代碼:(見代碼編輯器7-8行)

span{
    color:red;
}

觀察結果視窗文字的顏色是否變為紅色了。

試一試:我們現在想把“超酷的互聯網”、“服務及時貼心”、“有趣易學”這三個短語的文本顏色改為藍色

在編輯器第8行,修改代碼color:red;color:blue;

不要忘記 color:blue;語句後的分號;
解釋:
span{

color:blue; <!--我是顏色-->

font-size:20px;<!--我是字體大小-->

font-weight: bolder;<!--我可以加粗字體-->

}
span 不是固定的,可以換成任意的字母,只要能匹配統一就行
aqua 淺綠色

black 黑色

blue 藍色

fuchsia 紫紅色

gray 灰色

green 綠色

lime 綠黃色

maroon 慄色

navy 深藍色

olive 橄欖色

purple 紫色

red 紅色

silver 銀白色

teal 藍綠色

white 白色

yellow 黃色

三、CSS代碼語法

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS代碼語法</title>
 6 <style type="text/css">
 7 p{
 8    font-size:12px
 9    color:red
10    font-weight:bold
11 }
12 </style>
13 </head>
14 <body>
15 <p>慕課網,超酷的互聯網、IT技術免費學習平臺,創新的網路一站式學習、實踐體驗;服務及時貼心,內容專業、有趣易學。專註服務互聯網工程師快速成為技術高手!</p>
16 </body>
17 </html>
CSS代碼語法

css 樣式由選擇符和聲明組成,而聲明又由屬性和值組成,如下圖所示:

選擇符:又稱選擇器,指明網頁中要應用樣式規則的元素,如本例中是網頁中所有的段(p)的文字將變成藍色,而其他的元素(如ol)不會受到影響。

聲明:在英文大括弧“{}”中的的就是聲明,屬性和值之間用英文冒號“:”分隔。當有多條聲明時,中間可以英文分號“;”分隔,如下所示:

p{font-size:12px;color:red;}

註意:

1、最後一條聲明可以沒有分號,但是為了以後修改方便,一般也加上分號。

2、為了使用樣式更加容易閱讀,可以將每條代碼寫在一個新行內,如下所示:

p{
   font-size:12px;
   color:red;
}

來試一試:補充css代碼,使代碼有效

觀察代碼編輯器中8-10行,css代碼是不完整的,所以三條css代碼都沒有起到作用,請把代碼補充完整。

代碼是否把分號;丟掉了。

四、CSS註釋代碼

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS註釋代碼</title>
 6 <style type="text/css">
 7 p{
 8    font-size:12px;
 9    color:red;
10 }
11 </style>
12 </head>
13 <body>
14 <p>慕課網,超酷的互聯網、IT技術免費學習平臺,創新的網路一站式學習、實踐體驗;服務及時貼心,內容專業、有趣易學。專註服務互聯網工程師快速成為技術高手!</p>
15 </body>
16 </html>
CSS註釋代碼

就像在Html的註釋一樣,在CSS中也有註釋語句:用/*註釋語句*/來標明(Html中使用<!--註釋語句-->)。就像下麵代碼:

來試一試:為CSS樣式代碼添加註釋語句,來標明代碼作用

1、在編輯器中的第8行的font-size:12px;語句後面添加“設置文字字型大小為12px”註釋。

2、在編輯器中的第9行的color:red;語句後面添加“設置文字顏色為紅色”註釋。

你寫入的代碼是否像下麵的代碼:

註釋快捷鍵:Ctrl+/ : 快速註釋當前行

                 shift + ctrl + / : 在當前位置快速添加 /**/ 符號

註釋是編程好習慣,要成為優秀的軟體工程師就必須養成良好的編程習慣;


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、任務 後臺——登錄 包含的內容:1)bootstrap驗證--登錄 2)MD5加密(加鹽)--對密碼 3)三框架頁面--主頁面 二、整體圖 三、分享 源碼、資料庫及圖片共用鏈接:http://pan.baidu.com/s/1dFIMav3 密碼:sers ...
  • 作業二:多級菜單 1.三級菜單 2.可以次選擇進入各子菜單 3.所需新知識點:列表、字典 4.列印b回到上一層 5.列印q退出迴圈 流程圖如下: readme: (1)存儲三級菜單的字典;設置標識符active用來迴圈; (2)生成存儲省市的字典,d1 = {1: '河南', 2: '廣東', 3: ...
  • 寫在前面的話 個人由某方面的興趣需要學習 F#,網路上有關F#的中文資料很少,微軟官方有很不錯的文檔,但是很可惜的是絕大部分的章節都是英文的。個人是一位.NET愛好者,想自己將 F# 的官方文檔翻譯出來,算是為了自己喜歡的 .NET 做一些貢獻。 原文鏈接 Getting started with ...
  • 題目描述 祖瑪是一款曾經風靡全球的游戲,其玩法是:在一條軌道上初始排列著若幹 個彩色珠子,其中任意三個相鄰的珠子不會完全同色。此後,你可以發射珠子到 軌道上並加入原有序列中。一旦有三個或更多同色的珠子變成相鄰,它們就會立 即消失。這類消除現象可能會連鎖式發生,其間你將暫時不能發射珠子。 開發商最近準 ...
  • 最近點用pickPoint來計算,垂點用lastPoint計算. 一般AcDbCurve類可以用AcGe類的 getClosestPointTo 來實現計算需要的點值. 下麵是代碼示例: case AcDb::kOsModeNear: { AcGeLine3d line3d(m_ptA,m_ptC) ...
  • 題目鏈接 Description The Pizazz Pizzeria prides itself in delivering pizzas to its customers as fast as possible. Unfortunately, due to cutbacks, they can ...
  • 一.矩陣乘法 設矩陣A,B 滿足 :A的列數==B的行數 矩陣乘法的運算規則: 將A矩陣的每一行乘以B矩陣的每一列 * == == 二.斐波那契數列的矩陣推導 首先我們想 Fib[i]=Fib[i-1]+Fib[i-2]; 所以斐波那契數列的第i項之與兩個數也就是Fib[i-1]+Fib[i-2]有 ...
  • 1 thinkphp 框架 中判斷輸入的數值和資料庫中的數值是否一致 首先 需要在view文件夾下建一個模板 名為zhuce.html 我在控制器TextController.class.php中寫了一個方法zhuce(),顯示模板 這裡需要用到ajax來寫的,首選需要引入jquery包 已經在上面 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...