杏悦2首頁

 杏悦2網站xml地圖
當前位置: 杏悦2 >> 知識庫 >> 正文
【CSS3詳解】一、基礎知識
發布時間👧💂🏼‍♂️：2024-04-24       編輯：網絡中心       瀏覽次數⌚️😬：


CSS3詳解

一、CSS3

1-1、基本概念

  • 層疊樣式表(Cascading Style Sheets)是一種用來表現HTML或XML等文件樣式的計算機語言

  • CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

  • CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力

1-2、發展曆程

  1. CSS1.0♏️：網頁基本樣式

  2. CSS2.0🙇🏻：DIV（塊）+ CSS，提出HTML與CSS結構分離的思想💆‍♂️，網頁變得簡單👆🏻，利于SEO

  3. CSS2.1：浮動👩🏼‍🎨，定位

  4. CSS3.0👍🏽：圓角🆒，陰影，動畫…瀏覽器兼容性

1-3、快速入門

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--規範🧑🏿‍🎨， <style> 可以編寫css代碼🟫，每一個聲明，最後使用分號結尾
    語法：
        選擇器{
            聲明1;
            聲明2;
            聲明3;
        }
    -->
    <link rel="stylesheet" href="css/style.css"></head><body><h1>我是標題</h1></body></html>

1-4、導入方式

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--內部樣式表-->
    <style>
        h1{
            color: green;
        }
    </style>

    <!--外部樣式-->
    <link rel="stylesheet" href="css/style.css"></head><body><!--優先級🍻：行內樣式>內部樣式>外部樣式，但遵循就近原則--><!--行內樣式：在標簽元素中，編寫一個style屬性，編寫樣式即可--><h1 style="color: red">hello!</h1></body></html>

拓展：外部樣式兩種寫法

  • 鏈接式（html）：

    <!--外部樣式-->
    <link rel="stylesheet" href="css/style.css">

  • 導入式（CSS2.1）🏃‍♂️🦟：

    <!--導入式-->
    <style>
        @import url("css/style.css");
    </style>

  • 區別💁🏼‍♀️：

    • link是XHTML標簽，除了加載CSS外，還可以定義RSS等事務。@import屬于CSS範疇📟，只能加載CSS。

    • link引用CSS在頁面加載時同時加載🚕，@import需要完全加載後加載。同時link是XHTML標簽👩🏼‍🦱，沒有兼容性，@import是在CSS2.1中提出的，低版瀏覽器不支持。link支持使用Javascript控制DOM來改變樣式；@import不支持🧽。



  • 鏈接🙌🏽：https://blog.csdn.net/clover_page/article/details/130100672

  • 作者♣️：


關閉本頁

杏悦2-【杏悦2娱乐新体验】立刻开启您的冒险之旅！教育技術與網絡中心版權所有

©GDAFC Education Technology & Network Center, All Rights Reserved.

杏悅2