1. 程式人生 > >前端開發之CSS篇一

前端開發之CSS篇一

重要 utf import 無效 nbsp 出現 bsp 示例 減少

一、CSS介紹和語法

二、CSS引入方式

三、基本選擇器

四、高級選擇器

五、偽類選擇器

六、偽元素選擇器

1?? CSS介紹和語法

  1、 CSS的介紹

  (1)為什麽需要CSS?

  使用css的目的就是讓網頁具有美觀一致的頁面,另外一個最重要的原因是內容與格式分離 在沒有CSS之前,
我們想要修改HTML元素的樣式需要為每個HTML元素單獨定義樣式屬性,當HTML內容非常多時,就會定義很多重復的樣式屬性,
並且修改的時候需要逐個修改,費心費力。而此時CSS就出現了。
  CSS的出現解決了以下問題:
    首先,將HTML頁面的內容與樣式的分離;其次,提高了Web開發的效率。


  (2)什麽是CSS?
  CSS是指層疊樣式表(Cascading Style Sheets),樣式定義如何顯示HTML元素,樣式通常又會存在於樣式表中。
也就是說把HTML元素的樣式都統一收集起來寫在一個地方或一個CSS文件裏。
  
  (3)CSS的優勢
    一是內容與表現分離;二事網頁的表現統一,容易修改;三是豐富的樣式,使頁面布局更加靈活;
四是減少網頁的代碼;五是運用獨立頁面的CSS,有利於網頁被搜索引擎收錄。

  (4)如何使用CSS?
  通常會把樣式規則的內容都保存在CSS文件中,此時該CSS文件被稱為外部樣式表,然後在HTML文件中
通過link標簽引用該CSS文件即可。這樣瀏覽器在解析到該link標簽的時候就會加載該CSS文件,並按照該

文件中的樣式規則渲染HTML文件。

2、CSS語法
  (1)CSS基礎語法
    CSS語法分為兩部分:
    選擇器和聲明
    聲明由屬性和值組成,多個聲明之間用分號隔開。
      
語法:
    選擇器{
            聲明1;
            聲明2;
            聲明3;   
}

  例如:
            h2{
                color:green;
                font-size:20px;
            }    

  (2)代碼註釋

    方法:/*代碼註釋寫在這裏*/

2?? CSS引入方式

  網頁中引入CSS樣式有三種: 

    1、內聯樣式
    2、行內樣式表
    3、外部樣式表
        ①鏈入式
        ②導入式

  (1)內嵌方式

    style 標簽

    例如:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的引入方式1</title>
<!--CSS引入的方式一--> <style> h2{ color:green; /*這是註釋*/ font-size: 20px; } </style> </head> <body> <div> <h2>這是二號標題</h2> </div> </body> </html>

  (2)行內樣式

  示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的引入方式2</title>
</head>
<body>
    <div>
        <p style="font-size: 30px;color:red">這是一個段落標簽</p>
    </div>
</body>
</html>

  (3)外聯樣式表--鏈接式

    link 標簽

    例如:index.css為css樣式表文件

    index.css文件如下

    p{

      color:pink;

      font-size:30px;

    }

    然後在HTML文件中通過link標簽引入,語法:index.css"/>

    示例如下:

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css_1</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div>
            <p >這是一個段落標簽</p>
        </div>
    </body>
    </html>

  (4)外聯樣式表--@import url()方式 導入式

    同樣導入index.css

    語法如下:   

 <style>
           @import url(index.css);
       </style>
 註意:@import url() 必須寫在文件最開始的位置

    示例如下:

 <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>css_1</title>
            <style>
                @import "index.css";
            </style>
        </head>
        <body>
            <div>
                <p >這是一個段落標簽</p>
            </div>
        </body>
        </html>

  鏈接式與導入式的區別:  

     1、<link/>標簽屬於XHTML,@import是屬性css2.1
     2、使用<link/>鏈接的css文件先加載到網頁當中,再進行編譯顯示
     3、使用@import導入的css文件,客戶端顯示HTML結構,再把CSS文件加載到網頁當中
     4、@import是屬於CSS2.1特有的,對於不兼容CSS2.1的瀏覽器來說就是無效的

  

前端開發之CSS篇一