W3C標準
-
結構化標準語言（HTML、XML）
-
表現標準語言（CSS）
-
行為標準語言（DOM、ECMAScript ）
HTML（結構）+ CSS（表現）+ JavaScript（互動）
什么是CSS
如何學習
-
CSS是什么
-
CSS怎么用（快速入門）
-
CSS選擇器（重點 + 難點）
-
美化網頁（文字、陰影、超鏈接、串列、漸變..）
-
盒子模型
-
浮動
-
定位
-
影片（特效效果）
一、CSS是什么
Cascading Style Sheet 層疊級聯樣式表 （美化網頁）
二、發展史
CSS1.0
CSS2.0 [DIV(塊)+CSS：提供了HTML和CSS結構分離的思想，使網頁變得簡單，有利于SEO]
CSS2.1 [浮動、定位]
CSS3.0 [圓角、陰影、影片..]
三、快速入門
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一個css程式</title>
?
<!--
規范：style標簽可以撰寫css代碼，每一個宣告用分號隔開
選擇器 {
宣告1;
宣告2;
宣告3;
}
-->
<!-- <style> -->
<!-- h1 { -->
<!-- color: red; -->
<!-- } -->
<!-- </style> -->
?
<link rel="stylesheet" href=https://www.cnblogs.com/ylfmax-blog/archive/2022/02/22/"css/style.css">
?
</head>
<body>
<h1>標題</h1>
</body>
</html>
建議使用HTML和CSS分離的規范
CSS的優勢： 1、內容和表現分離 2、網頁結構表現統一，可以實作復用 3、樣式豐富 4、利于SEO
四、CSS的四種匯入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匯入方式</title>
?
<!-- 內部樣式 -->
<style>
h1 {
color: green;
}
</style>
?
<!-- 外部樣式（鏈接式：屬于html） -->
<link rel="stylesheet" href=https://www.cnblogs.com/ylfmax-blog/archive/2022/02/22/"css/style.css">
?
<!-- 外部樣式（匯入式：屬于css） -->
<!-- <style> -->
<!-- @import "css/style.css"; -->
<!-- </style> -->
</head>
<body>
<!-- 樣式優先級：就近原則 -->
<!-- 1.行內樣式 -->
<h1>標題</h1>
</body>
</html>
選擇器
作用：選擇頁面上的某一個或者某一類元素
一、基本選擇器
-
標簽選擇器：選擇一類標簽，格式：標簽{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標簽選擇器</title>
?
<style>
/*標簽選擇器會選擇頁面上所有這個標簽的元素*/
h1 {
color: #f7ff75;
background: red;
border-radius: 8px;
}
p {
font-size: 60px;
}
</style>
</head>
<body>
<h1>YLF</h1>
<h1>BQ</h1>
<p>羊羊羊</p>
</body>
</html> -
類選擇器：選擇類名一致的所有標簽，格式：.類名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>類選擇器</title>
?
<style>
/*類選擇器可以復用*/
.class1 {
color: #f7ff75;
}
.class2 {
color: #f7f;
}
</style>
</head>
<body>
<h1 class="class1">標題1</h1>
<h1 class="class2">標題2</h1>
<h1 class="class1">標題3</h1>
?
<p class="class1">段落</p>
</body>
</html> -
id選擇器：選擇id名唯一對應的標簽，格式：#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id選擇器</title>
?
<style>
/*
id選擇器全域唯一
優先級：id選擇器 > 類選擇器 > 標簽選擇器
*/
#title1 {
color: #f7ff75;
}
.class1 {
color: #ff77ff;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1 id="title1" class="class1">標題1</h1>
<h1 class="class1">標題2</h1>
<h1 class="class1">標題3</h1>
<h1>標題4</h1>
<h1>標題5</h1>
</body>
</html>
二、層次選擇器
-
后代選擇器
/*后代選擇器*/
body h1 {
color: green;
} -
子選擇器
/*子選擇器*/
body>h1 {
color: red;
} -
相鄰兄弟選擇器
/*相鄰兄弟選擇器 向下相鄰且同層同標簽*/
.class1 + h1 {
color: aqua;
} -
通用兄弟選擇器
/*通用兄弟選擇器 向下同層同標簽*/
.class1 ~ h1 {
color: blue;
}
三、結構偽類選擇器
限制條件的選擇器
/*選擇ul的第一個子元素*/
ul li:first-child {
color: #ff77ff;
}
/*選擇ul的最后一個子元素*/
ul li:last-child {
color: #f7ff75;
}
a:hover {
background: blue;
}
四、屬性選擇器（常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
?
<style>
.class1 a {
display: block;
float: left;
color: gray;
background: #0654dc;
height: 50px;
width: 50px;
margin-right: 5px;
border-radius: 6px;
text-align: center;
text-decoration: none;
font: bold 20px/50px Arial;
}
?
/*選擇有id屬性的元素*/
/*a[id] {*/
/* background: #ff77ff;*/
/*}*/
?
/*選擇id為id1的元素*/
/*a[id=id1] {*/
/* background: #c50f61;*/
/*}*/
?
/*
選擇class中包含links的元素
=絕對等于
*=包含等于
*/
/*a[class*="links"] {*/
/* background: #ff33d3;*/
/*}*/
?
/*
選擇href以https開頭的元素
^=
*/
/*a[href^=https] {*/
/* background: #ff77ff;*/
/*}*/
?
/*
選擇href以pdf結尾的元素
$=
*/
a[href$=pdf] {
background: #ff77ff;
}
</style>
</head>
<body>
<p class="class1">
<a href=https://www.cnblogs.com/ylfmax-blog/archive/2022/02/22/"https:www.baidu.com" class="links item first" id="id1">1</a>
<a href=https://www.cnblogs.com/ylfmax-blog/archive/2022/02/22/"" class="links item active" target="_blank" title="title2">2</a>
<a href=https://www.cnblogs.com/ylfmax-blog/archive/2022/02/22/"image/123.html" class="links item" id="id3">3</a>
<a href=https://www.cnblogs.com/ylfmax-blog/archive/2022/02/22/"image/123.png" class="links item">4</a>
<a href=https://www.cnblogs.com/ylfmax-blog/archive/2022/02/22/"image/123.jpg" class="links item">5</a>
<a href=https://www.cnblogs.com/ylfmax-blog/archive/2022/02/22/"abc" class="links item">6</a>
<a href=https://www.cnblogs.com/ylfmax-blog/archive/2022/02/22/"/a.pdf" class="links item">7</a>
<a href=https://www.cnblogs.com/ylfmax-blog/archive/2022/02/22/