CSS 初步體驗

2021-09-08 20:04:17 字數 1646 閱讀 4864

cascading  style  sheet,中文譯為層疊樣式表,他是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。以html語言為基礎,提供了豐富的格式化功能,如字型,顏色,背景和整體排版等,並且網頁設計者可以針對各種視覺化瀏覽器設定不同的樣式風格。

相比css為基礎的頁面設計方法,傳統html的缺陷主要體現為以下幾點

維護困難。為了修改某個特殊標記(例如標記的字型顏色大小)格式,需要花費很多的時間,尤其對於整個**而言,後期修改和維護的成本很高。

標記不足。html本身的標記十分的少,很多標記都是為網頁內容服務的,而關於美工樣式的標記,如文字間距,段落縮排等標記在html中很難找到。

網頁過「胖」。由於沒有統一對各種風格樣式進行控制,html的頁面往往體積過大,占用掉了很多寶貴的頻寬。

定位困難。在整體布局頁面時,html對於各個模組的位置調製顯得捉襟見肘,過多的標記同樣也導致頁面的複製和後期維護的困難。

1、行內樣式

行內樣式是所有樣式方法中最為直接的一種,它直接對html標記使用style屬性,然後將css**直接寫在其中。下面的例子中標籤中都使用了style屬性,然後將css**直接寫在其中。行內樣式是最為簡單的css使用方法,但由於需要為每乙個標記設定style屬性,後期維護成本依然很高,而且網頁容易過「胖」,因此不推薦使用。

正文內容

正文內容

正文內容

2、內嵌式

內嵌樣式就是將css寫在之間,並且用標記進行宣告。這種形式下,所有css**部分被集中在了同乙個區域,方便了後期的維護,頁面本身也大大**。但如果是乙個**,擁有很多的頁面,對於不同的頁面上標記都希望採用同樣的風格時,內嵌式的方法就顯得略微麻煩,維護成本也不低。

紫色,粗體,下劃線,25px的效果1

紫色,粗體,下劃線,25px的效果2

紫色,粗體,下劃線,25px的效果3

3、鏈結式

鏈結式css樣式表是使用頻率最高,也是最為實用的方法。它將html頁面本身與css樣式風格分離為兩個或者多個檔案,實現了頁面框架html**與美工css**的完全分離,使得前期製作和後期維護都十分方便,網路後台的技術人員與美工設計者也可以很好的分工合作。

紫色,粗體,下劃線,25px的效果1

紫色,粗體,下劃線,25px的效果2

紫色,粗體,下劃線,25px的效果3

建立檔案1.css,如下所示:

body 

h2 p

鏈結式樣式表的最大優勢在於css**與html**完全分離,並且同乙個css檔案可以被不同html所鏈結使用。因此在設計整個**時,可以將所有頁面都鏈結到同乙個css檔案,使用相同的樣式風格。如果整個**需要進行樣式上的修改,就僅僅只需要修改這乙個css檔案即可。

4、匯入樣式

採用inport方式匯入樣式表,在html檔案初始化時,會被匯入到html檔案內,作為檔案的一部分,類似內嵌式的效果。在html檔案中匯入樣式表,常用的有如下幾種@inport語句,可以選擇任意一種放在標記之間。

優先順序從高到低依次排序為:

行內樣式》採用link標記的鏈結式》位於之間的內嵌式》@import匯入式

HermesEventBus初步體驗

hermeseventbus是乙個基於eventbus的 能在程序間傳送和接收event的庫,在ipc或者外掛程式開發中非常有用。它底層基於eventbus,並且和eventbus有相同api。eventbus是android系統上使用最廣泛的簡化模組之間通訊的庫。但它不支援程序間收發事件。所以,我...

Eigen初步1 初步體驗Eigen庫

前言 eigen 是乙個線性算術的c 模板庫,包括 vectors,matrices,開源以及相關演算法。功能強大 快速 優雅以及支援多平台,可以使用該庫來方便處理一些矩陣的操作,達到類似matlab那樣的快捷。現在已經發展到eigen3了,目前最新版本為eigen 3.1.2。eigen使用預備工...

阿里雲直播初步體驗

直播的基本思路 本地開啟裝置錄播 資料實時推送到伺服器 n個客戶端拉取資料到本地 原理通俗理解 在伺服器上建立乙個檔案,a直播不斷地寫入資料,別人不停地讀取資料。阿里雲直播使用記錄 開啟阿里雲直播的控制台,會提示你開通 live許可權。全部開通,確認。網域名稱配置3.設定cname 別名 二級網域名...