CSS3詳解
一↕️、CSS3
1-1👩🏻🦯、基本概念
層疊樣式表(Cascading Style Sheets)是一種用來表現HTML或XML等文件樣式的計算機語言
CSS不僅可以靜態地修飾網頁👨👨👧👧,還可以配合各種腳本語言動態地對網頁各元素進行格式化🕵️。
CSS 能夠對網頁中元素位置的排版進行像素級精確控製,支持幾乎所有的字體字號樣式,擁有對網頁對象和模型樣式編輯的能力
1-2、發展歷程
CSS1.0:網頁基本樣式
CSS2.0:DIV(塊)+ CSS,提出HTML與CSS結構分離的思想🥄,網頁變得簡單,利於SEO
CSS2.1🦹🏼♂️:浮動🤽🏽♂️,定位
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>
拓展🧘♂️:外部樣式兩種寫法
<!--外部樣式-->
<link rel="stylesheet" href="css/style.css">
<!--導入式-->
<style>
@import url("css/style.css");
</style>