杏悦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