目錄
认识CSS样式
CSS样式的优势
CSS代码语法
CSS注释代码
首頁 web前端 html教學 HTML+CSS学习笔记(6)

HTML+CSS学习笔记(6)

Jun 24, 2016 am 11:24 AM

认识CSS样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

如下列代码:

p{   font-size:12px;   color:red;   font-weight:bold;}
登入後複製

使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

CSS样式的优势

大丈夫当如此!是英雄,分我杯羹!年少轻狂,只记得眉心一点。举手与天竞自由,豪情纵,胸怀敞。
登入後複製

为什么使用css样式来设置网页的外观样式呢?上面一段文字,我们想把“是英雄”、“豪情纵”、“年少轻狂”这三个短语的文本颜色设置为红色,这时就 可以通过设置样式来设置,而且只需要编写一条css样式语句。

第一步:把这三个短语用括起来。

第二步:写入下列代码:

span{    color:red;}
登入後複製

代码如下:

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS样式的优势</title><style type="text/css">span{   color:red;}</style></head><body>    <p>大丈夫当如此!<span>是英雄</span>,分我杯羹!<span>年少轻狂</span>,只记得眉心一点。举手与天竞自由,<span>豪情纵</span>,胸怀敞。</p></body></html>
登入後複製

CSS代码语法

css 样式由选择符声明组成,而声明又由属性组成,如下图所示:

选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。

声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:

p{font-size:12px;color:red;}
登入後複製

注意:

1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。

2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:

p{   font-size:12px;   color:red;}
登入後複製

CSS注释代码

就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用)。就像下面代码:


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? 公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?

如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表單驗證屬性來驗證用戶輸入?

如何高效地在網頁中為PNG圖片添加描邊效果? 如何高效地在網頁中為PNG圖片添加描邊效果? Mar 04, 2025 pm 02:39 PM

如何高效地在網頁中為PNG圖片添加描邊效果?

HTML5中跨瀏覽器兼容性的最佳實踐是什麼? HTML5中跨瀏覽器兼容性的最佳實踐是什麼? Mar 17, 2025 pm 12:20 PM

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?

&lt; datalist&gt;的目的是什麼。 元素? &lt; datalist&gt;的目的是什麼。 元素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;的目的是什麼。 元素?

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間? 我如何使用html5&lt; time&gt; 元素以語義表示日期和時間? Mar 12, 2025 pm 04:05 PM

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?

&gt; gt;的目的是什麼 元素? &gt; gt;的目的是什麼 元素? Mar 21, 2025 pm 12:34 PM

&gt; gt;的目的是什麼 元素?

&lt; meter&gt;的目的是什麼。 元素? &lt; meter&gt;的目的是什麼。 元素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;的目的是什麼。 元素?

See all articles