CSS簡單理解與應用

時間 2019-11-08

標籤 css 簡單理解應用欄目 CSS 简体版

原文原文鏈接

1、CSS基本概念： css

CSS——級聯樣式表（Cascading Style Sheet）簡稱「CSS」，一般又稱爲「風格樣式表（Style Sheet）」，它是用來進行網頁風格設計的。 html

CSS可以對 HMTL 中的對象的位置排版進行像素級的精確控制，支持幾乎全部的字體字號樣式，擁有對網頁對象盒模型的能力；可以統一地控制HMTL中各標誌的顯示屬性；可以令人更能有效地控制網頁外觀以及建立特殊效果的能力，是真正作到網頁表現與內容分離的一種樣式設計語言。瀏覽器

2、CSS結構與語法 佈局

說道CSS將網頁表現與內容分離，不得不談到CSS的語法和結構。字體

CSS屬性和選擇器編碼

css的語法結構僅僅有三部分組成：選擇器（Selector）、屬性（property）、和值（value）。
使用方法：
spa

selector {Property:value;}

選擇器（Selector）指這組樣式編碼所要針對的對象。能夠是一個XHTML標籤，如body,h1；也能夠是定義了特定的ID或CLASS的標籤，如#main選擇器表示選擇<div id="main">，即一個被指定了main爲id的對象。瀏覽器將對css選擇器進行嚴格的解析，每一組樣式均會被瀏覽器應用到對應的對象上。設計

屬性（Property）是CSS樣式控制的核心，對於每個XHTML中的標籤，CSS都提供了豐富的樣式屬性，如顏色、大小、定位、浮動方式等。

值（value）是指屬性的值，形式有兩種，一種是指定範圍的值，如float屬性，只可能應用left，right，none三種值；另外一種則是用數值的，如width可以使用0-9999，或其它數學單位來指定。code

在實際應用中，咱們每每使用如下相似的應用形式：htm

body {background-color:blue;}

選擇器有3類：ID選擇器，類選擇器和HTML標籤選擇器。其中優先級爲:ID選擇器 > 類選擇器 > HTML標籤選擇器。

ID選擇器

ID是網頁中用來標識HTML中一個特定元素的，ID選擇器在CSS中用#號來定義。

例：

HTML中：

<span id="special">欄目二</span>

CSS中：

#special
{
    font-size:14px;
}

CLASS選擇器(類選擇器)

class則是網頁中用來標識一組特定元素的，類選擇器在CSS中用.號來定義。

例：

HTML中：

<span class="menu3">欄目三</span>

CSS中：

.menu3 span
{
    color:#00f;
    font-size:40px;
}

標籤選擇器（類型選擇器）

類型選擇器，是指以網頁中已有的標籤類型做爲名稱的選擇器。body是網頁中的一個標籤類型，div也是，span也是。所以如下選擇器都是類型選擇器，而它們將控制頁面中全部的body或div或span：

body{}
div{}
span{}

固然，CSS也提供了便捷的語法：

①.除了對單個XHTML元素進行樣式指定，一樣能夠對一組對象進行相同的樣式指派，使用逗號對選擇器進行分隔。

h1,h2,h3,p,span{font-size:12px; font-family:arial;}

使得頁面中全部的h1,h2,h3,p,span都將具備相同的樣式定義。這樣作的好處是對於頁面中須要使用一樣式的地方只須要書寫一次樣式表便可實現，減小代碼量，改善css代碼的結構。

②.能夠對某一個對象的子對象進行樣式設定，對象之間使用空格做爲個分隔符。

例：
HTML中：

<h1>這是咱們的一段文本
    <span>這是span內的文本</span>
</h1>
<h1>單獨的h1</h1>
<span>單獨的span</span>
<h2>被h2標籤套用的文本
    <span>這是h2下的span</span>
</h2>

CSS中：

h1 span{font-weight:bold;}

h1標籤之下的span標籤將被應用font-weight:bold的樣式設置。注意，僅僅對有此結構的標籤有效，對於單獨存在的h1或單獨存在的span及其餘非h1標籤下屬的span均不會應用此樣式。這樣作可以幫助咱們避免過多的ID及CLASS的設置，直接對所需設置的過猶不及進行設置。

還有：

h1 .p1 {}     /*表示h1標籤下的全部class爲p1的標籤。*/
#content h1{} /*表示id爲content的標籤下的全部h1標籤。*/

固然多級也是支持的，如如下選擇器樣式一樣可以做用：

body h1 span stront{ font-weight=bold;}

css還提供了一些特殊標籤的表示方法：

①.用*號來泛指全部的元素

*
{
	margin:0PX;
	padding:0Px;
	border:0px;
}

②.body中設置全文的樣式

body
{
	font-size:14px;
}

③.a:link，a:hover，a:visited 能夠設置鼠標未移上、通過、訪問過後的超連接樣式

a:link,a:visited
{
/*鼠標未移上去的超連接的樣式*/
/*訪問事後的超連接的樣式*/
color:#000;
text-decoration:none;
}
a:hover
{
/*鼠標移上去的超連接的樣式*/
color:#00f;
text-decoration:underline;
}

④.居中對齊方式：

text-align :center; /*文本水平對齊*/
line-height:2px;	/*(數值與行高相同，則自動垂直對齊)*/
vertical-align:middle;  /*元素垂直對齊*/

3、使用CSS佈局的優勢

使用CSS佈局的網頁相對於傳統的Table佈局的網頁有4大優點：

1.表示與內容分離

2.提升頁面的載入速度

3.易於維護和改版

4.更符合W3C指定的WEB標準

4、CSS使用方式：

CSS有3種方式能夠在站點網頁上使用：

①內聯樣式：採用style屬性將樣式內嵌到各個網頁元素。

②內部樣式表：將用style元素建立嵌入的樣式表插入到網頁中的HEAD元素部分中。

③外部樣式表：用link元素將外部樣式表連接到網頁上。

舉例說明：

【內聯樣式】

<html>
<head> 
  <title>文檔標題</title>         　
</head>
<body> 
  <p style="color:Blue;font-Style:Italic;">我是內聯樣式</p>
  <p style="color:Red">我使用的是Style屬性</p>
</body>
</html>

【內部樣式表】

<html>
<head> 
    <title>文檔標題</title> 
    <style type="text/css">         　　
	h1  {color:marron;}
	p   {color:hotpink; font-familiy:Arial;}
    </style>
</head>
<body> 
	<h1>我是內部樣式表</h1>
	<p>我使用的是Style元素</p>
</body>
</html>

【外部樣式表】

「Test.htm」文件內容：

<html>
<head> 
   <title>文檔標題</title> 
   <link href="cssTest.css" rel="stylesheet",type="text/css"/> 
</head>
<body> 
<h1>我是外部樣式表</h1>
<p>我使用的是Link元素</p>
</body>
</html>

「cssTest.css」文件內容：

h1  {color:marron;}
 p   {color:hotpink; font-familiy:Arial;}

相關標籤/搜索

每日一句

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