創建一個HTML文件、一個CSS文件，用戶將CSS文件鏈接到HTML文件時，在HTML5頁面的標記中（or head與body標記之間）添加以下代碼：
<link rel="stylesheet" type="text/css" href="css文件地址">
一、CSS3中的選擇器
1.屬性選擇器：
[att=val]{} 屬性=屬性值
示例代碼如下：
(1)先在HTML5中爲標記添加屬性
<p font="fontize">編程圖書1</p>
<p font="fontize">編程圖書2</p>
<p color="red">編程1</p>
<p color="red">編程2</p>
<p color="green">哈嘍哈嘍黑</p>
<p color="green">請給我舞臺</p>
(2)在CSS3中使用屬性選擇器選擇對應的標記來改變樣式
[font=fontize]{ /*選擇所有屬性的屬性值爲font=fontize的<p>標記*/
font-size: 20px; /*設置其字體大小爲20像素*/
}
[color=red]{ /*選擇所有屬性的屬性值爲color=red的<p>標記*/
color:red; /*設置其字體顏色爲紅色*/
}
[color=green]{ /*選擇所有屬性的屬性值爲color=green<p>標記*/
color:green; /*設置其字體顏色爲綠色*/
}
2.類和ID選擇器：
class屬性可以定義多個，id屬性只能定義一個
示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
<style type="text/css">
/*元素選擇器*/
div{
width: px;
height: px;
background: red;
}
/*class選擇器,類選擇器*/
.box2{
background: blue;
}
/*id選擇器*/
#box{
background: yellow;
}
/*派生*/
#box .box1{
width: :100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div id="box">
<div class="box1"></div>
</div>
</body>
</html>
3.僞類和僞類元素選擇器：
可參照：
鏈接: https://blog.csdn.net/Hierarch_Lee/article/details/52609400.
二、常用屬性
1.設置字體屬性font-family
語法格式如下：
font-family:name1,[name2],[name3]
<!-- name1爲字體名稱，其他name爲備用字體名稱 -->
示例如下：
.mr-font1{
font-family:"宋體","楷體","黑體";
}
2.設置字號屬性font-size
語法格式如下：
font-size:length
<!-- 常見的相對單位：px(一個像素的比例) -->
<!-- 常見的絕對單位：em(字母m的標準寬度)、ex(字母x的標準高度) -->
3.設置文字顏色屬性color
語法格式如下：
color:color
<!-- 顏色值：顏色的英文單詞、十六進制、RGB、HSL -->
示例如下：
h3{color:blue;}
h3{color:#0000ff;}
h3{color:rgb(0,0,255);}
4.設置文字水平對齊方式
語法格式如下：
text-align:left|center|right|justify
/*左對齊、居中、右對齊、兩端對齊*/
5.設置段首縮進格式
語法格式如下：
text-indent:length
/*length:直接定義的長度或者由浮點數和單位標識符組合*/
6.背景相關屬性
語法格式如下：
(1)添加背景顏色屬性
background-color:color|transparent ;
/*color:設置背景顏色 transparent:表示背景顏色透明*/
(2)添加背景圖像
background-image:url() ;
/*url:圖片地址 (相對地址/絕對地址)*/
(3)設置圖像平鋪方式
background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y;
/*繼承父標記/背景圖只顯示一次/重複顯示/僅沿x軸方向重複/僅沿y軸方向重複*/
(4)背景圖像是否隨頁面內容滾動
background-attachment: scroll | fixed;
/*滾動/不動*/
(5)背景圖像在頁面中的位置
background-position: length|percentage;
/*圖像和頁邊距水平和垂直距離,單位:cm,mm,px /按框的長寬百分比放置*/
background-position: top|center|bottom|left|right;
/*圖像頂部居中顯示/居中/底部居中/左部居中/右部居中*/
簡化示例代碼：
background: url(img/img3.jpg) left top no-repeat;
7.列表相關屬性
（1）list-style : 這是 一 個複合屬性，使用該屬性可以同時指定 list-style-image 、 list-style-position、 list-style-type 三個屬性。
（2） Iist-style-image: 將圖像設置爲列表項標誌。
（3）list-style-position: 指定列表項標記出現的位置。該屬性支持 outside （列表 項標記放在列表元素之外）和 inside（列表項標記放在列表元 素之內）兩個屬性值。
（4） list-style-type: 設置列表項標記的類型。
可參見: https://blog.csdn.net/qq_40641206/article/details/104093012.
三、高級應用
1.框模型
(1)外邊距
語法結構：
margin-top:<length>| auto;
/*百分比或長度值 | 默認*/
/*top、right、bottom、left*/
語法結構二：
/*auto自適應居中,適用於左右*/
/*一個值:上下左右*/
/*兩個值:上下,左右*/
/*三個值:上,左右,下*/
/*四個值:上,右,下,左*/
margin: 100px auto;
(2)內邊距
padding,與外邊框類似
區別：1.auto對padding屬性無作用
2.margin接受負值，padding不接受
(3)邊框
顏色
/*語法結構一:*/
border-bottom-color: #0000FF;
/*top、right、bottom、left*/
/*語法結構二:*/
border-color: red #FF0000 #f00 rgb(255,0,0);
/*上, 右, 下, 左 （順時針方向）*/
寬度
border-width: medium | thin | thick |length;
/*默認|比默認窄|比默認寬|指定長度*/
邊框樣式
/*語法結構一:*/
border-style: hidden | none;
/*隱藏邊框 | 沒有邊框*/
/*語法結構二:*/
border-style: dashed | dotted | double | groove;
/*邊框樣式:虛線 | 點線 | 雙線 | 3D凹槽*/
/*語法結構三:*/
border-style:inset | outset | ridge | solid;
/*線條樣式:3D凹邊 | 3D凸邊 | 菱形邊框 | 實線*/
注意：
１．border-color生效條件：
（１）border-style被設置且不爲none
（２）border-width不爲0
２．可通過border綜合設置所有屬性：
border:border-width border-style border-color
2.佈局常用屬性
(1)浮動
float: left |right |none;
/*元素浮動在左側|右側|不浮動*/
(2)定位相關屬性
position: static | absolute| fixed | relative;
3.動畫與特效
(1)變換
transform:平移、縮放、傾斜等2D操作 。
transform-origin:用於設置中心點的變換。
transform的常用屬性總結參見：
鏈接: https://blog.csdn.net/qq_43129072/article/details/83148997.
(2)過渡
指定參與過渡的屬性：
transition-property: all |none |<propertyname>;
/*默認,所有可過渡的屬性 | 不指定| 輸入名字,逗號隔開*/
指定過渡持續時間：
transition-duration:<time>[ ,time>] ;
/*默認爲0,多個 屬性時用逗號隔開*/
指定過渡的延遲時間屬性：
transition-delay:<time>[ ,time>] ;
指定過渡的動畫類型：；transition-timing-function
transition-timing-function:linear |ease
/*勻速過渡 | 逐漸慢下來*/
transition-timing-function:ease-in | ease-out|ease-in-out
/*逐漸加速 |逐漸減速|慢-快-慢*/
transition-timing-function:cubic-bezier(x1,y1,x2,y2);
/*特定的貝塞爾曲線*/
(3)動畫
定義關鍵幀：
@keyframes name {<keyframes-blocks>};
/*定義動畫名稱|定義動畫在不同時間段的樣式規則*/
引用關鍵幀：
from{
...
屬性n:屬性值n;
}
to{
...
屬性n:屬性值n;
}
百分比1{
...
屬性n:屬性值n;
}
百分比n{
...
屬性n:屬性值n;
}
動畫實現參見：
鏈接: https://blog.csdn.net/u011930054/article/details/98944023.
四、示例代碼
1.代碼
<html>
<head>
<meta charset="UTF-8">
<title>基礎案例</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background: blue;
/*外邊距*/
/*auto自適應居中,適用於左右*/
/*一個值:上下左右*/
/*兩個值:上下,左右*/
/*三個值:上,左右,下*/
/*四個值:上,右,下,左*/
margin: 100px auto;
/*背景圖片*/
background: url(img/c1.png);
/*背景圖片尺寸*/
background-size: 100% 100%;
/*邊框*/
/*solid 加實線*/
border: 10px solid black;
/*單獨每一個邊設置邊框*/
border-top:10px solid green ;
border-bottom:10px solid black ;
border-left:10px solid blue ;
border-right:10px solid pink ;
/*圓角*/
border-radius: 150px;
/*陰影*/
box-shadow: 10px 10px 30px #0000FF;
/*鼠標滑過*/
/*過渡效果*/
transition:all 1s;
}
.box:hover{
/*旋轉*/
/*transform可以設置旋轉,縮放,位移等效果*/
/*rotate() 旋轉*/
/*scale() 縮放，默認1*/
transform: rotate(180deg) scale(1.5);
background: url(img/c2.png);
background-size:100% 100% ;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.結果展示：
光標置於圖上時會旋轉、放大並變換圖片
五、鏈接內容：
1.transform屬性的屬性值
鏈接: https://blog.csdn.net/qq_43129072/article/details/83148997.
鏈接作者：CSDN博主「Wn洋」的原創文章
鏈接內容：
2.動畫實現參見：
鏈接: https://blog.csdn.net/u011930054/article/details/98944023.
鏈接作者：CSDN博主「在路上奔跑~」的原創文章
部分鏈接內容：
<style>
.weui-badge{
display:inline-block;
padding:.15em .4em;
min-width:8px;
border-radius:18px;
background-color:#F43530;
color:#FFFFFF;
line-height:1.2;
text-align:center;
font-size:12px;
vertical-align:middle;
animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;
transform-origin:bottom;-webkit-transform-origin:bottom;
}
@keyframes move
{
0%, 65%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
70% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
75% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
80% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
85% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
90% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
95% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
100% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
}
@-webkit-keyframes move
{
0%, 65%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
70% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
75% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
80% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
85% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
90% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
95% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
100% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
}
</style>