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>