css簡介_動力節點Java學院整理

2024-07-11 09:07:44

字體：大中小

來源：轉載

供稿：網友

?CSS(Cascade Style Sheet)，即層級樣式表。

?HTML可以說只是給網頁填充了內容，CSS則是對網頁進行化妝、修飾，比如給文字設置字體、顏色、大小等。

?以前在HTML標簽中能夠通過設置屬性的方式(比如<div width="80px">)為標簽定義樣式（類似CSS的功能），但是現在推薦使用CSS設置(div{width:80px;})，即"HTML與CSS分離"，在web中還有“頁面展示與邏輯處理分離”等概念。

?一般來說目前實現網頁時不需要從零做起，網上有很多好的CSS代碼可以使用但是為了能看懂那些代碼（或更好地學習CSS框架），我們需要學習CSS的基本知識。

CSS的基本結構如下：

<selector>{　　<attr1>:<value1>;　　<attr2>:<value2>;　　<attr3>:<value3>;　　......　　<attrN>:<valueN>;}

解釋：

?<selector>的中文名叫“選擇器”，表示對哪個元素設置樣式。<selector>大括號內部設置具體的樣式，如字體等。

?設置樣式的方法是通過多對<attr>:<value>組合而成，中間用分號( ; )分隔。

這里舉個簡單的例子：

body{  //對<body>內的元素進行設置　　font-size:12px;                      //設置字體大小為12px,px是pixel的縮寫，表示像素　　font-family:sans-serif,Georgia; //設置首選字體為sans-serif,如果本機內沒安裝此字體，則使用Georgia}

CSS的規則

1.繼承原則：如果父標簽定義了某樣式，則默認對應的子標簽也應用該樣式。

2.就近原則：離修飾標簽越近的CSS樣式優先級越高。

引入CSS樣式的方法

這里只介紹兩種最常用的：

1.內部樣式表：在<head></head>內部添加：<style type="text/css">......</style>

2.外部樣式表：將CSS放在文件(如home.css)中，并在<head></head>內部添加：<link rel="stylesheet" type="text/css" href="home.css"/>

?在CSS中不可避免會遇到顏色設置，因此這里我們需要學習怎么表示顏色。

?共有4種顏色表示法：

1.預定義顏色：例如“color:black”中的black就是預定義的顏色。

2.十六進制表示法：#ABCDEF，其中AB、CD、EF分別對應R、G、B。例子：#FFFFFF 表示白色。

3.短十六進制表示法：這是對第二種表示法的特例，當A=B時A和B只寫一個(同樣地，C=D、E=F 時也類似)。例子：#FF00CC 可簡寫為 #F0C.

4.rgb表示法：rgb(255,255,255) 表示白色?！　?/p>

CSS Reset

?起因：在不同瀏覽器中的默認CSS樣式可能是不同的，比如按鈕，在IE中可能是樣式A，在Chrome中是樣式B，在Firefox中是樣式C，這種不一致性會讓開發者不爽。因此就需要CSS Reset來統一不同瀏覽器的默認樣式。

?CSS reset 通俗地說就是“一段CSS代碼，這段代碼能夠初始化基本的標簽，使得在不同瀏覽器中，各標簽的顯示樣式是一樣的。”

?還有一個更加應用廣泛的替代CSS Reset的代碼：Normalize.css，他被很多框架使用。

?最常用的CSS Reset代碼是 Eric Meyer 寫的“CSS Reset 2.0”，代碼如下：

 /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)  * http://cssreset.com  */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,  small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {    margin: 0;     padding: 0;    border: 0;    font-size: 100%;     font: inherit;     vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {     display: block; } body {     line-height: 1; } ol, ul {     list-style: none; } blockquote, q {     quotes: none; } blockquote:before, blockquote:after, q:before, q:after {     content: '';     content: none; } table {     border-collapse: collapse;     border-spacing: 0; }

* : 選擇任何元素。格式為：*{...}

?標簽選擇器：選擇指定標簽。格式為：<tag>{...}

?id選擇器：選擇指定 id 的元素。某個 id 在一個頁面中是唯一的。格式為：#<id>{...}

?class選擇器：選擇指定class的元素。格式為：.<class>{...}。值得一提的是，class選擇器的變型：

與標簽選擇器一起使用，格式為：<tag>.<class>。表示只選擇具有class=<class>的<tag>標簽。

多個class一起使用，格式為：.<class1>.<class2>。表示class同時屬于<class1>和<class2>的元素。

?后代選擇器：選擇指定元素的指定后代元素（后代和子元素是不同的，并不一定要緊跟在父元素里面）。格式為：<father> <空格><descendent> ，例如 div h3 解釋為“div元素的所有<h3>標簽”。

?子元素選擇器：選擇指定元素的子元素（子元素指的是孩子，并不包含孫子...）。格式為：<father> > <child>。

?屬性選擇器: 選擇具有指定屬性或指定屬性具有特定值的元素。格式為：<selector>[<attribute1>][<attribute2>]或<selector>[<attribute1>="<value1>"][<attribute2>="<value2>"]。

?部分匹配屬性值：<selector>[<attribute>*="<value>"] 表示只要<attribute>屬性中包含<value>值即可。

?相鄰兄弟選擇器：選擇(緊挨著的)相鄰的兄弟的元素。格式為：<selector1> + <selector2>。表示選擇緊跟在selector1后面的selector2。

?偽類選擇器：