CSS

時間 2019-11-11

標籤 css 欄目 CSS 简体版

原文原文鏈接

網頁建設三劍客:HTML (建模) CSS (貼圖處理美化) javaScript(調動做)javascript

1.CSS概述:

　　層疊樣式表(CSS，Cascading Style Sheet)是一個很神奇的東西，設計者能夠經過修改樣式表的定義而使網頁呈現徹底不一樣的外觀，而當網站擁有幾十甚至上百個頁面的時候，修改頁面的樣式表文件便可修改頁面的外面，從而大大地減小工做量。css

　　CSS(Cascading Style Sheet,層疊樣式表)是一種標記性語言，與HTML是「表兄弟」。html

　　樣式表技術誕生於1996年，須要瀏覽器支持，如今大多數瀏覽器都支持CSS。java

　　它容許在html文檔中加入樣式，如字體類型、顏色、大小等。瀏覽器

　　小結:對於設計者來講它是一個很是靈活的工具，能夠將全部有關於文檔的樣式指定內容所有脫離出來，在行內定義、在標題中定義，甚至做爲外部樣式文件供html調用而沒必要再把繁雜的樣式定義編寫在文檔結構中網絡

2.使用CSS優點：

　　能夠實現網頁結構與格式分離；工具

　　對網頁佈局、字體、背景和其它圖文效果實現更加精確的控制；佈局

　　更好的易用性和擴展性，能夠單獨以一個文件的形式出現。字體

　　小結:總之，CSS在當前的網頁設計中已經成爲不可缺乏的技術，小至去除連接文字的下劃線，大體實現複雜的視覺和動態效果，網絡中有大量的CSS代碼，初學者可多參考別人CSS實現網頁樣式的方法。網站

3.使用CSS的格式：

凡是.CSS的文件裝的都是CSS代碼

3.1 CSS語法

p{color：red;}

選擇器{屬性名：屬性值 ;}

選擇器後必定是大括號.屬性名後必須用冒號隔開.屬性值後用分號

屬性名和冒號之間最好不要有空格。

3.2 CSS和HTML的結合方式

CSS代碼理論上位置是任意的，但一般寫在style標籤裏

CSS和HTML的結合方式有3種：

a. 行級樣式表:

採用style屬性,範圍只針對此標籤適用

p標籤段落內容。

</p>

該方式比較靈活，可是對於多個相同標籤的同同樣式定義比較麻煩，適合局部修改。

b. 內嵌樣式表:

採用<style>標籤完成。範圍針對此頁面

<head>

p { color:#FF0000;}

</style>

</head>

該方式能夠對單個頁面的樣式進行統一設置，但對於局部不夠靈活。

c. 外部樣式表:

採用創建樣式表文件。針對多個頁面.

經過head標籤中link標籤來實現，前提也是先要有一個已定好的CSS文件。

例：<link rel="stylesheet" type="text/css" href="css_3.css" />

注：能夠經過多個link標籤連接進來多個CSS文件。重複樣式以最後連接進來的CSS樣式爲準。

引入樣式表文件的方式:

1):採用<link>標籤

eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

2):採用import，

必須寫在<style>標籤中，而且必須是第一句a.css爲引入的已經完成的CSS(這種方式不多使用,由於引用數量小)

<head>

eg: @import url(a.css) ;

</style>

</head>

注：url括號後面必需要用分號結束。若是導入進來的樣式與本頁面定義的樣式重複，以本頁定義樣式爲準

CSS樣式優先級和代碼規範

樣式優先級

由上到下，由外到內。優先級由低到高。

代碼規範

選擇器名稱 { 屬性名：屬性值；屬性名：屬性值；…….}

屬性與屬性之間用分號隔開屬性與屬性值直接按用冒號鏈接

若是一個屬性有多個值的話，那麼多個值用空格隔開

CSS選擇器(掌握)

選擇器分爲兩大類:

1.基本選擇器

a.標籤選擇器:

指的就是選擇器的名字表明html頁面上的標籤

color:red ;

border:1px dashed green;

}

b.類選擇器：

規定用圓點.來定義

優勢：靈活

eg: .one{ }

<class選擇器。其實使用的標籤中的class屬性>

ID選擇器：

規定用#來定義

eg: #one{cursor:hand; }

區別：標籤選擇器針對的是頁面上的一類標籤.

類選擇器能夠供多種標籤使用.

ID選擇器是值供特定的標籤(一個). ID是此標籤在此頁面上的惟一標識。

d:通用選擇器：用*定義,表明頁面上的全部標籤。

font-size:30px;

margin-left:0px;

margin-top:0px;

}

擴展選擇器

a. 組合選擇器:採用逗號隔開

eg: p,h1,h2,.one,#two{color:red ; }

b. 關聯選擇器(後代選擇器): 採用空格隔開

eg: h4 span i{color:red ; }

表示h4標籤中的span標籤中的i標籤的樣式

h4和span和i標籤不必定是緊挨着的。

c. 僞類選擇器

1) :靜態僞類：規定是用:來定義.只有兩個.只能用於超連接.

:link表示超連接點擊以前的顏色

:visited表示連接點擊以後的顏色

eg:a:link{color:red ;}

a:visited{color:yellow;}

注意： a:link{}定義的樣式針對全部的寫了href屬性的超連接(不包括錨)

a{}定義的樣式針對全部的超連接(包括錨)

2) :動態僞類 : 針對全部的標籤都適用

:hover : 是移動到某個標籤上的時候

:focus : 是某個標籤得到焦點的時候

:active : 點擊某個標籤沒有放鬆鼠標時

eg: label:hover{color:#00ff00; }

input:focus{

border:1px solid red;

}

a:active{

color:blue;

}

兩種引入方式的區別：

外部樣式表中不能寫<link>標籤,可是能夠寫import語句

CSS各類選擇器的衝突(掌握)

CSS樣式的衝突:

1.ID選擇器 > 類選擇器 > 標籤選擇器

2.行級樣式表 > 內嵌樣式表 > 外部樣式表

外部樣式表的ID選擇器 > 內嵌樣式表的標籤選擇器

原則：就近原則

CSS的各類屬性(掌握)

CSS中尺度單位的介紹

CSS的單位:

a. 絕對單位 1in=2.54cm=25.4mm=72pt=6pc , pt是點或者磅，pc是派卡

b.相對單位：px, em(印刷單位至關於12個點), %(相對周圍的文字)

字體設置

font-size:50px; /*字體大小*/

font-style:italic ; /*斜體*/

font-weight:bold; /*粗體*/

font-family:幼圓; /*字體類型*/

font-variant:small-caps; /*小寫變大寫*/

}

文本設置

letter-spacing:0.5cm ; /*字母間距*/

word-spacing:1cm; /*單詞間距*/

text-align:center; /*在所包含容器的中間*/

text-decoration:overline; /*字體修飾 underline下劃線 line-through中劃線 overline上劃線*/

text-transform:lowercase; /*單詞字體大小寫*/

color:red ;

}

背景設置

body{

/*背景顏色*/

background-image:url(images/2.gif) ; /*背景圖片*/

background-repeat: no-repeat; /*no-repeat不要平鋪，repeat-x,橫向平鋪，repeat-y 縱向平鋪*/

background-position:center right; /*背景位置*/

background-attachment: scroll ; /*背景的移動 ,fixed跟着滾動條一塊兒移動，scroll 不動*/

}

列表設置

ul li{

list-style:none; /*列表前樣式*/

list-style-image:url(images/2.gif) ; /*列表項前圖片*/

margin-left:80px;

}

盒子模型(border margin padding)

盒子是相對而講的對於body中的p標籤,body就是p的盒子

padding:是內容到邊的距離

border: 是邊的粗細

margin:是控件到控件的距離

定位設置(position,float,clear,z-index)

#div{

position: absolute;

1.絕對定位: 定義橫縱座標 .脫離了自己的順序流

2.相對定位: 相對的是本身在順序流中原來的位置

left:100px; /*橫座標*/

top:100px; /*縱座標*/

border:1px solid red ; <1像素寬的紅色實線邊框>

width:100px;

height:100px;

}

#d1{

position: relative; /*相對位置*/

left:100px;

top:100px;

border:1px solid green ;

width:100px;

height:100px;

}

span{

position: relative;

left:20px;

top:20px;

}

z-index:值任意，值越大離咱們越近

鼠標樣式設置(cursor)

Opacity 取值0--1,0爲透明,1爲徹底不透明

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS3--overflow屬性</title>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            background-color:#ffccff;
            /*overflow:auto;*/
            /*overflow: scroll;*/
            overflow: hidden;

        }
    </style>
    <script type="text/javascript">
    /*這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便元素框中能夠放下全部內容也會出現滾動條。
visible    默認值。內容不會被修剪，會呈如今元素框以外。
hidden    內容會被修剪，而且其他內容是不可見的。
scroll    內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto    若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit    規定應該從父元素繼承 overflow 屬性的值。
    */
    </script>
</head>
<body>
    <div>
        <p>你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好</P>
    </div>
</body>
</html>

1. CSS——CSS樣式
2. 【CSS】理解CSS
3. CSS Tools: Reset CSS
4. CSS——CSS基礎
5. CSS之CSS hack
6. CSS：關於CSS Hack
7. CSS animation & CSS animation 101
8. CSS+DIV-CSS與Javascript
9. css樣式 --- CSS hack
10. CSS 框架 Blueprint CSS
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。