JavaEE 之 網頁美化技術 CSS(1)

資料 ? 青牛 ? 于 2019-06-28 14:14:28 ? 550 閱讀

1.1 css概述

當我們掌握了HTML的基本結構,也能根據不同的需求使用不同的標簽來完成不同的功能,但是我們卻發現了一個問題,人家的頁面比我們的頁面要好看很多,這是為什么呢?

這就是因為我們的頁面是沒有加入樣式的!

1.1.1 什么是CSS?

Cascading Style Sheet 級聯樣式表

表現HTML或XHTML文件樣式的計算機語言

包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定
file
此處大家需要注意的是CSS技術是用來美化現有頁面的,在成型的網站中應用也很廣泛

file
那么為了更好的說明CSS對網頁的重要性我們可以來簡單的寫一個對比:

比如我想在頁面展示一個標題 : 海牛學院

代碼應該是這個樣子
file
效果是這樣的 :
file
通過上面的案例其實我們不難看出,樣式是為了讓我們的網頁五彩斑斕才出現的

1.1.2 CSS的發展史

file
CSS1.0 讀者可以從其他地方去使用自己喜歡的設計樣式去繼承性地使用樣式;

CSS2.0 融入了DIV+CSS的概念,提出了HTML結構與CSS樣式表的分離

CSS2.1 融入了更多高級的用法,如浮動,定位等。

CSS3.0 它包括了CSS2.1下的所有功能,是目前最新的版本,它向著模塊化的趨勢發展,又 加了很多使用的新技術,如字體、多背景、圓角、陰影、動畫等高級屬性,

但是它需要高級瀏覽器的支持。
1.1.3 CSS的優勢

內容與表現分離

網頁的表現統一,容易修改

豐富的樣式,使得頁面布局更加靈活

減少網頁的代碼量,增加網頁的瀏覽速度,節省網絡帶寬

運用獨立于頁面的CSS,有利于網頁被搜索引擎收
1.1.4 CSS基本使用
file
CSS把頁面上的所有標簽都看成對象,所以如果你想給一組標簽或者某一個標簽設置樣式你 就可以通過選擇器來選擇你想選擇的標簽
一般常用的選擇器
1) 按標簽選型
2) 按標簽class屬性選擇
3) 按標簽id屬性選擇

看過了CSS編寫的基本語法,那么有一個問題,我們怎么能把CSS融入到我們的網頁中呢?
那么這時候你就需要在你的網頁中使用style標簽引入樣式了
file
代碼嘗試一下:
先寫一個h1標簽
代碼
file
效果
file
加入樣式:樣式一般添加到head標簽中
file
加完之后的效果:

file
這就是樣式對我們網頁內容的影響,是不是很神奇呢?

樣式 賦值 粘貼(表格不折行效果)
file
1.1.5 CSS樣式的分類

1.1.5.1 行內樣式

把樣式直接寫到HTML標簽中的就是行內樣式了
file
行內樣式的

好處就是簡單直接,每次給一個標簽賦予某些樣式

壞處就是有些相同樣式不能復用,并且標簽多了的話樣式寫起來很亂很麻煩;

1.1.5.2 內部樣式

內部樣式就是把樣式使用style標簽統一寫到head標簽中,
file
內部樣式的

好處就是本頁面的CSS可以得到很好的復用

壞處就是內部樣式無法再文件與文件之間共享樣式,而且內部樣式寫多了之后整個頁面的可 讀性變差,內容全都耦合在一起不方便修改和閱讀;

1.1.5.3 外部樣式(常用)
編寫好一個后為css的文件,把樣式寫到css文件里去,然后哪里需要通過標簽引入即可 編寫css文件
file
file
代碼編寫
file
因為我們不是專業的前段和美工,所以一般我們在使用CSS樣式的時候都是直接引入別人寫 好的樣式,比如bootstrap就是一個非常優秀的CSS框架(模板),人家寫好了我們拿過來用就可以了;

1.1.6 CSS樣式的引用優先級問題

問題 : 如果一個標簽同時受行內樣式 內部樣式 和 外部樣式影響的話,它會執行哪個樣式呢?
回答 : 就近原則,他們的優先級是這樣的:

行內樣式 優先于 內部樣式表

內部樣式表 優先于 外部樣式表

也就是說CSS采取就近原則,哪個離HTML標簽越近哪個就被采用

1.2 css練習

古詩一首

效果圖 :
file
1.2.1 任務需求

使用標題標簽和段落標簽制作李白的詩《望廬山瀑布》,詩正文字體顏色為綠色,字體大小 為14px

1.2.2 代碼實現

代碼:
file
效果
file

版權聲明:原創作品,允許轉載,轉載時務必以超鏈接的形式表明出處和作者信息。否則將追究法律責任。來自海牛部落-青牛,http://hainiubl.com/topics/36796
點贊
成為第一個點贊的人吧 :bowtie:
回復數量: 0
    暫無評論~~
    • 請注意單詞拼寫,以及中英文排版,參考此頁
    • 支持 Markdown 格式, **粗體**、~~刪除線~~、`單行代碼`, 更多語法請見這里 Markdown 語法
    • 支持表情,可用Emoji的自動補全, 在輸入的時候只需要 ":" 就可以自動提示了 :metal: :point_right: 表情列表 :star: :sparkles:
    • 上傳圖片, 支持拖拽和剪切板黏貼上傳, 格式限制 - jpg, png, gif,教程
    • 發布框支持本地存儲功能,會在內容變更時保存,「提交」按鈕點擊時清空
    Ctrl+Enter
    江西快三下期预测 郑州11选5开奖结果 快乐十分开奖跑马软件 陕西快乐十分开奖走势 河北快3连线走势图 股票福耀玻璃股吧 浙江体彩11选5跨度走势 爱股票天策视频学堂 海南体彩4十1奖金近期 江西11选五5开奖走势l图 加拿大西部快乐8