CSS

時間 2019-12-10

標籤 css 欄目 CSS 简体版

原文原文鏈接

CSS：Cascading Style Sheet 層疊樣式表css

CSS做用：就是給HTML頁面標籤添加各類樣式

爲何用CSS

HTML的缺陷： 1. 不可以適應多種設備 2. 要求瀏覽器必須智能化足夠龐大 3. 數據和顯示沒有分開 4. 功能不夠強大

CSS 優勢：1.使數據和顯示分開 2.下降網絡流量 3.使整個網站視覺效果一致 4.使開發效率提升了

CSS語法

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

選擇器後必定是大括號。屬性名後必須用冒號隔開。屬性值後用分號。屬性名和冒號之間最好不要有空格。

CSS代碼和HTML結合的時候，CSS理論上位置是隨意的，可是通常放在style標籤內。他們結合的方式有三種

1.行級樣式表 --->範圍只是針對次標籤

例： <p style = "color : red">犯我德邦者，雖遠必誅！</p>

2.內嵌樣式表 --->範圍是這個頁面

例： <style type="text/css">

color : green;

border : 1px solid black;

}

</style>

3.外部樣式表，採用創建樣式表文件 --->範圍能夠應用於多個頁面

有兩種方式，例1：採用link標籤

例2 : 採用import，必須寫在<style>標籤中，而且必須是第一句

兩種寫法 @import "a.css";

@import url(a.css);

用link和import的區別：兩種都能引入外部樣式表，可是外部樣式表中不能寫<link>標籤,可是能夠寫import語句。

CSS選擇器：兩大類

1.基本選擇器

a.標籤選擇器（元素選擇器）選擇器的名字就是html上的標籤，針對的是一類標籤

例：<style type="text/css">

div{

color : yellow;

}

</style>

b.類選擇器，規定用原點來定義，有點是靈活。針對的是全部標籤

例： <!doctype html>

<head>

<title>mycss</title>

.皇子{

cursor : hand;

}

</style>

</head>

<body>

<div class = "皇子">犯我德邦者，雖遠必誅！</div>

</body>

</html>

c.ID選擇器，規定用#來定義，針對的是特定的一個標籤，優先級最高。

例： <!doctype html>

<head>

<title>mycss</title>

#皇子{

background : red;

}

</style>

</head>

<body>

<div id = "皇子">犯我德邦者，雖遠必誅！</div>

</body>

</html>

d.通用選擇器，規定用*來定義，針對的是全部標籤

例： <!doctype html>

<head>

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>mycss</title>

<style type="text/css">

*{

font-size : 50px;

color : yellow;

}

</style>

</head>

<body>

<div id = "皇子">犯我德邦者，雖遠必誅！</div>

<p>阻斷軍隊，粉碎山峯，跨過最長的。。。</p>

</body>

</html>

ID和類選擇器的區別：一個標籤的id屬性的值在整個頁面上是惟一的。可是name的值能夠重複。

2.擴展選擇器

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

例： <!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>mycss</title>

<style type="text/css">

div,span{

font-size : 30px;

color : red;

}

</style>

</head>

<body>

<div>犯我德邦者，雖遠必誅！</div>

<p>阻斷軍隊，粉碎山峯，跨過最長的。。。</p>

<span>你要來一發麼</span>

</body>

</html>

b.關聯選擇器用空格隔開

例： <!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>mycss</title>

<style type="text/css">

p span{

font-size : 30px;

color : red;

}

</style>

</head>

<body>

<div>犯我德邦者，雖遠必誅！</div>

<p>阻斷軍隊，<span>粉碎</span>山峯，跨過最長的。。。</p>

<span>你要來一發麼</span>

</body>

</html>

c.僞類選擇器

I.靜態僞類。兩個，用：來定義，只能用於超連接

例： <style type="text/css">

a:link{

color : #33ff00;

}

a:visited{

color : #9900ff;

}

}

</style>

a{}和a:link{}的區別：a:link{}能夠實現href屬性的超連接，不包括錨。a{}能夠實現全部的超連接，包括錨。

II.動態僞類針對全部標籤都適用

例：經常使用的三種

p:hover{

color : red;

}移動到某個標籤上的時候

input:focus{

background-color:#ff3333;

border : 2px solid #cc9900;

color : #990000

}某個標籤得到焦點的時候

p:active{

color : #990000;

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

CSS各類選擇器的衝突

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

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

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

原則：就近原則

CSS的各類屬性

CSS的單位:

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

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

字體設置：

font-size : 20px; 設置字體大小

font-family : 楷體; 設置字體

font-style : italic; 設置斜體

font-weight : bold; 設置加粗

font-variant : small-caps; 小寫轉換大寫

}

文本設置：

letter-spacing : 0.5cm; 字符間距

word-spacing : 0.5cm; 單詞間距

text-align : center; 對齊到容器的中心

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

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

color : red; 顏色

}

背景設置：

body{

background-color : yellow; 背景顏色

background-image : url(E:/day02_css/上課示例/images/1.jpg); 背景圖片

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

background-position : center top; 背景位置

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

}

列表設置：

ul li{

list-style : none;

list-style-image : url(E:/day02_css/上課示例/images/2.gif);

margin : 90px;

}

盒子模型：

分爲兩種，一種是IE模型，一種是非IE模型

padding 內容到邊框之間的距離，能夠大體理解爲父子之間用padding

border 邊框的粗細

margin 控件與控件之間的距離，能夠大體理解爲兄弟之間用margin

例： <!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>mycss</title>

<style type="text/css">

div{

width : 100px;

height : 50px;

background-color : yellow;

border : 1px solid blue;

padding : 20px;

margin : 10px;

}

</style>

</head>

<body>

<div>煉金術士</div>

<div>辛吉格</div>

</body>

</html>

定位設置：

順序流：控件一個挨一個的擺放的順序叫順序流

兩種狀況會脫離順序流:

1. 當把控件的位置設定爲絕對定位的時候。

2. 當設定控件的float屬性的時候。

position: absolute 1.絕對定位：原點在包含本身的容器的左上角. left,top. 定義橫縱座標 .脫離了自己的順序流

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

例： <!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>mycss</title>

<style type="text/css">

* {

padding:0px;

margin : 0px;

}

#othername{

position : relative;

width : 100px;

height : 50px;

background-color : yellow;

border : 1px solid blue;

left : 30px;

top : 50px;

}

#name{

position : relative;

width : 100px;

height : 50px;

background-color : blue;

border : 1px solid yellow;

left : 10px;

top : 30px;

}

</style>

</head>

<body>

<div id = "othername">煉金術士</div>

<div id = "name">辛吉格</div>

</body>

</html>