CSS語法基礎

• 一、單純html控制樣式的缺點
• 二、 CSS???
• • CSS概述
  • CSS基礎語法
  • 組成
  • 選擇器
  • • 標簽選擇器
    • 類選擇器
    • id選擇器
    • 通配選擇器
    • 后代選擇器
  • 插入樣式表的三種方式
  • • 行內樣式
    • 頁內樣式
    • 外部樣式???
  • 樣式優先級
  • 其他

---

一、單純html控制樣式的缺點

• 能設置的屬性太少
• 代碼復雜
• 修改麻煩

二、 CSS???

CSS概述

• 全稱： 層疊樣式表
• 最大優勢：控制網頁樣式并允許將樣式與網頁內容分離

CSS基礎語法

組成

選擇器

標簽選擇器

• 需要設置的標簽 {聲明 ; 聲明}
• 影響整個頁面中該種標簽的樣式
• 一對多

類選擇器

• .class名{聲明；聲明} (不要忘記前面的點 )
  

• 影響所有以class屬性引用該類的標簽樣式

• class類名的第一個字符不能使用數字和特殊字符

• 多對多

id選擇器

• # id名{聲明；聲明}
• id選擇器可以為標有特定id的HTML元素指定特定的樣式
• 同一id屬性值只能在HTML文檔中出現一次
• 一對一

通配選擇器

• *{聲明；聲明}
• 對頁內所有的元素設置樣式

后代選擇器

• 選擇器1 選擇器2{聲明；聲明}
• 選擇器1選中的元素中，找到選擇器2選中的元素設置樣式

插入樣式表的三種方式

行內樣式

• 指定網頁中某個別元素顯示效果
• 不符合分離原則，不建議使用

頁內樣式

• 對頁面中某些標簽火元素設置樣式風格
• 控制當前頁面樣式，維護較困難

外部樣式???

• 可同時控制多個頁面
• 適用于各類大型網站，可用性最強
• 引入方式：< link rel=“stylesheet” type=“text/css” href=""/>
• 引入方式：< link rel=“stylesheet” type=“text/css” href=""/>
• 引入方式:：< link rel=“stylesheet” type=“text/css” href=""/>
• 重要的事情說三遍

樣式優先級

• 行內>頁內>外部

• id>類>標簽

• 其他情況用以下疊加

• 內連樣式 優先級 1000

  id 選擇器 優先級 100

  類選擇器 優先級 10

  元素選擇器 優先級 1

  統配選擇器 優先級 0

  繼承的樣式優先級沒有

其他

• 多個樣式，在同一內容上共同實現，叫做 CSS 樣式的疊加。

• 文檔中的某些元素，將沿用為其父元素所設置的樣式，這種特點
  叫做 CSS樣式的可繼承性

• 注釋方法： /* */ 多行注釋（html注釋方法：< !-- 這里是注釋內容–>）

總結

以上是生活随笔為你收集整理的Web开发（一）·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。