疊樣式表 (CSS) 是一種編程語言,可用于確定電子文檔的設計。 借助簡單說明(以清晰的源代碼形式呈現(xiàn)),可以根據(jù)需要調(diào)整布局、顏色和版式等網(wǎng)站元素。 由于級聯(lián)樣式表,文檔的語義結(jié)構(gòu)和內(nèi)容不受影響。 CSS 出現(xiàn)于 20 世紀 90 年代中期,現(xiàn)在被認為是萬維網(wǎng)上的標準樣式表語言。
CSS 與 HTML 一樣,是萬維網(wǎng)的核心語言之一。 當您使用 HTML 將文本添加到網(wǎng)站并按語義構(gòu)建其結(jié)構(gòu)時,您可以使用 CSS 定義其內(nèi)容的設計。 雖然 HTML 和 CSS 結(jié)合使用,但 CSS 設計指令和 HTML 元素是分開存在的。 這意味著即使沒有 CSS,機器也可以讀取電子文檔。 在 CSS 的幫助下,瀏覽器內(nèi)容可以在視覺上準備好并以吸引人的方式呈現(xiàn)。
CSS 是一種“生活標準”,由萬維網(wǎng)聯(lián)盟繼續(xù)開發(fā)。 因此,總是有新的功能和實際應用有待發(fā)現(xiàn)。 廣泛應用的樣式表語言出現(xiàn)于 20 世紀 90 年代。 使用樣式表來顯示 Web 內(nèi)容的想法在當時已不再是全新的。 但 CSS 與 HTML 中已存在的其他面向顯示的元素在一個重要方面有所不同:用戶現(xiàn)在可以選擇為跨多個文檔和單個樣式表的元素組定義設計規(guī)則。
定義:CSS(層疊樣式表)
用于網(wǎng)站視覺設計的編程語言。 例如,使用層疊樣式表,您可以確定顯示 HTML 元素的字體、大小或顏色。
一個成功的網(wǎng)站不僅取決于內(nèi)容,還取決于良好的設計。 用戶很快就會對不用戶友好或結(jié)構(gòu)良好的網(wǎng)站失去興趣。 在這里,CSS 提供了一系列純 HTML 中不提供的設計選項。
例如,CSS 允許您集中控制某些規(guī)范。 這意味著可以使用單個命令來識別單個文檔中的相似元素(例如所有超鏈接或圖像)并對其進行格式化。 設計指令不必采用 HTML 文檔本身內(nèi)部樣式表的形式。 如果將 CSS 指令保存在外部樣式表(即單獨的文件)中,則這也可以用于其他文檔。
除了與 HTML 元素的顏色、形狀和排版相關的基本顯示指令外,CSS 中現(xiàn)在還有更復雜的模塊。 例如,使用這些,您可以根據(jù)輸出媒體定義動畫或不同的表示形式。 這樣,可以為所有可能的媒體以相同的方式準備相同的 HTML 文檔。 由于本文檔中的內(nèi)容和設計是分開的,因此網(wǎng)站的代碼更加清晰。 相關的樣式語言 SASS 提供了更多的可能性,但它并沒有完全取代 CSS。
CSS 語句確定電子文檔中的元素應具有的值或?qū)傩浴?在其基本結(jié)構(gòu)中,該指令由選擇器和大括號組成。 聲明列在括號內(nèi),并用分號分隔。 每個聲明由名稱、冒號和特定值組成。 在最終聲明之后和右括號之前,可以添加另一個分號,但這不是強制性的。 例如,下面示例中的 CSS 指令要求標題 h1 以藍色顯示,字體大小為 12:
h1 {color:blue; font-size:12px}
可以使用內(nèi)部和外部樣式表將 CSS 合并到電子文檔中。 此外,可以使用內(nèi)聯(lián)樣式將屬性直接放置在元素的 HTML 源代碼中。 下面,我們概述了將 CSS 集成到 HTML 中的三種方法。
在外部樣式表中,CSS 指令通過“.css”結(jié)尾在外部文件中定義,并通過“l(fā)ink”標簽集成到 HTML 文件中。 這是最常見的方法,因為內(nèi)容和設計完全分開,并且可以輕松進行更改。 該鏈接在 HTML 文檔的“head”區(qū)域中創(chuàng)建,如下所示:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落</p>
</body>
</html>
您可以在此處將所有 CSS 指令添加到 HTML 文件中。 請注意,這些僅適用于相關文件。 對于內(nèi)部樣式表,將“style”元素插入 HTML 文檔的“head”區(qū)域,如下所示:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:12px;}</style></head>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落</p>
</body>
</html>
與內(nèi)部樣式表一樣,CSS 指令包含在 HTML 文件中。 然而,有一個重要的區(qū)別:相應的屬性直接位于元素的開始標記中,并且不適用于任何其他元素。 如果您不想進行一般設計說明,則此方法特別有用。
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; font-size:12px;">這是一個標題</h1>
<p>這是一個段落</p>
</body>
</html>
上面的例子表明 CSS 只能與經(jīng)典的 HTML 結(jié)構(gòu)結(jié)合使用。 由于 HTML 通過段落、列表和表格構(gòu)建內(nèi)容,而 CSS 負責視覺設計,因此這兩種網(wǎng)絡語言相輔相成,并以這種方式緊密相連。 編寫級聯(lián)樣式表通常圍繞設計“盒子”進行。 HTML 文檔的結(jié)構(gòu)基于嵌套原則,其中各個元素像盒子一樣相互疊放。 網(wǎng)站上占用空間的每個“盒子”都具有以下屬性:
然后通過指定大小、形狀和顏色來格式化這些“框”。 除了這些簡單的屬性之外,還有更復雜的 CSS 指令,用于在文本中插入陰影、添加圖像過濾功能以及突出顯示表單和其他元素。
一旦您了解了樣式表語言的基本原理,它們的應用就足夠簡單了。 了解有關 CSS 頂級技巧的更多信息,這些技巧將使您的網(wǎng)站看起來更加專業(yè)。
隨著iPad和iPhone的日益普及,我們大多數(shù)人不再適合創(chuàng)建基于Flash的Web畫廊 - 它們無法在這些設備上輕松查看。如果您希望幾乎每個人都能夠看到您的畫廊,那么您需要將它們創(chuàng)建為HTML畫廊而不是Flash。
要在Lightroom中創(chuàng)建Web畫廊,請首先將圖像放入集合中。這使您可以更輕松地處理圖像,并且可以保存圖庫,以便將來根據(jù)需要進行編輯。選擇您的收藏并切換到Web模塊。從“布局樣式”選項中,您可以選擇Lightroom HTML庫,或者更簡單地從屏幕左側(cè)的“模板瀏覽器”面板中選擇基于HTML的庫。如果您在預覽區(qū)域中查看,HTML圖庫模板的左下角都有字母HTML。選擇要使用的模板。
從工具欄(如果不可見則按T鍵),如果您選擇了一個集合,請選擇所有膠片照片,這會將所有圖像添加到您的圖庫。您在編輯區(qū)域的屏幕上看到的是您的網(wǎng)絡圖庫的實時版本。您可以單擊任何圖像以查看它在Web上的外觀。
打開“站點信息”面板,然后鍵入站點標題,集合標題和集合描述。如果您不想使用所有這些,只需刪除您不想使用的項目的占位符文本,并且將釋放它們在模板中占用的空間以用于您的圖像。對于“聯(lián)系信息”,請根據(jù)需要鍵入您的聯(lián)系人姓名,然后填寫“Web或郵件鏈接”,這將自動鏈接到Web畫廊中的聯(lián)系人姓名。
您可以在圖庫中添加標識牌,如果需要,它將位于網(wǎng)站標題上方。如果需要,您可以通過完成Web或郵件鏈接框?qū)⑵滏溄踊啬恼军c。
使用“調(diào)色板”選項可以更改網(wǎng)站模板中各種元素的顏色。
在“外觀”面板中,您可以設置縮略圖圖像網(wǎng)格大小 - 默認為3 x 3,不能小于任何小,但可以大得多。如果要在圖像上顯示單元格編號,可以這樣做 - 當您需要為查看者提供一種簡單的方法來識別他們喜歡的圖像時,這非常有用。圖像按順序編號,如果您有多個頁面,則第二頁上的圖像將從第一頁的編號順序繼續(xù)。
您可以通過調(diào)整“大小”滑塊來控制“圖像”頁面上的完整大小圖像的大小。您還可以將圖片邊框添加到圖像頁面中的圖像。請注意,“外觀”面板分為“通用設置”,“網(wǎng)格頁面”和“圖像頁面”,允許您進行影響整個圖庫的更改,僅影響網(wǎng)格頁面或僅影響圖像頁面。
在“圖像信息”面板中,您可以選擇為圖像添加標簽。它們僅出現(xiàn)在圖像頁面上。您可以選擇圖像上方顯示的標題和圖像下方顯示的標題。例如,對于每一個,您可以從圖像元數(shù)據(jù)中獲取文本,并且沒有理由不能將標題設置為標題元數(shù)據(jù),而將標題設置為您的設備元數(shù)據(jù)。
在輸出設置中選擇較大尺寸JPG圖像的質(zhì)量 - 0是低質(zhì)量,100是高質(zhì)量。如果要在圖像中包含元數(shù)據(jù),請選擇要包含的內(nèi)容 - 您的選擇是“僅限版權(quán)”還是“全部”。
如果需要,還可以添加水印。如果您選擇添加水印,您將在圖像頁面和索引頁面上看到它,以便您可以檢查它是否是您想要的。選擇是否銳化圖像 - 此銳化僅在圖像輸出時應用,因此您不會在屏幕上看到它。如果您不確定要使用什么,請啟用銳化并將其設置為標準。
完成后,單擊“創(chuàng)建已保存的Web畫廊” - 這是Lightroom 4中的新選項,它顯示在主編輯區(qū)域的右上角。鍵入Web庫的名稱,然后單擊“創(chuàng)建”。這樣做可確保庫已保存,一旦完成此操作,Lightroom將從現(xiàn)在開始跟蹤您的更改。將來您可以通過單擊Lightroom為您創(chuàng)建的特殊集合返回Web畫廊。
配置好所有內(nèi)容后,單擊“上載”以呈現(xiàn)庫圖像,創(chuàng)建必要的html代碼并將其全部自動上傳到服務器。
Lightroom中的HTML畫廊并不是城里最漂亮的畫廊,但是幾乎任何設備都可以使用畫廊,這絕對是激勵他們使用它們代替Flash畫廊。
選按鈕和復選按鈕在網(wǎng)站的表單中經(jīng)常用到
在表單元素中,單選按鈕和復選按鈕都具有選中和未選中狀態(tài)。
大家都知道,要覆寫這兩個按鈕默認樣式比較困難。
在CSS3中,我們可以通過狀態(tài)選擇器“:checked”配合其他標簽實現(xiàn)自定義樣式。
首先建立表單的html布局:
接著就是樣式css創(chuàng)建
效果圖如下:
是不是比默認的樣式好看多了。當然實現(xiàn)這些自定義選擇框和單選框還有很多其他方法,比如用背景圖片實現(xiàn)等等
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。