前端基礎學習
CSS學習
1 CSS簡介
Cascading Style Sheet 層疊級聯樣式表
CSS：表現（美化網頁）字型，顔色，邊距，高度，寬度，背景圖檔，網頁定位浮動等等
2 選擇器
2.1 标簽選擇器
css注釋符：/**/
2.1.1 内部樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<!--
規範：<style>可以編寫css代碼，每一個聲明最好用分号結尾
文法：
選擇器{
聲明1;
聲明2;
聲明3;
}
-->
<link rel="stylesheet" href="css/style.css">
<style>
h1{
color:rgb(32, 221, 79);
}
p{
color: blueviolet;
}
</style>
</head>
<body>
<h1>HelloWorld</h1>
<p>
Hello!
</p>
</body>
</html>
2.2.2 外部樣式
建議使用下列方法，html與css獨立：
建立style.css
h1{
color: bisque;
}
<!--外部樣式-->
<link rel="stylesheet" href="css/style.css">
2.2 類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
類選擇器的格式 .class的名稱{}
好處：可以多個标簽歸類，是同一個class，可以複用
*/
.first{
color: red;
}
.second{
color: blue;
}
</style>
</head>
<body>
<h1 class="first">HelloWorld!</h1>
<h1 class="second">HelloWorld!</h1>
<h1 class="first">HelloWorld!</h1>
</body>
</html>
2.3 id選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
id選擇器：id必須保持全局唯一
#id名稱{}
*/
#first{
color: red;
}
</style>
</head>
<body>
<h1 id="first">标題</h1>
</body>
</html>
2.4 層次選擇器
<body>
<p>p1</p>
<p class="first">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
2.4.1 後代選擇器
body p{
background-color: aqua;
}
2.4.2 子選擇器
body>p{
background-color: aquamarine;
}
2.4.3 相鄰兄弟選擇器
.first +p{
background-color: blue;
}
2.4.4 通用選擇器
.first~p{
background-color: brown;
}
2.5 結構僞類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>
/*選中第一個子元素*/
ul li:first-child{
background-color: blue;
}
/*選中最後一個子元素*/
ul li:last-child{
background-color: aqua;
}
/*選中父元素下的第二個*/
p:nth-of-type(2){
background-color: yellow;
}
2.6 屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="demo1">
<a href="http://www.baidu.com" class="links item first" id="first>">1</a>
<a href="http://Super.icu" class="links item" id="second">2</a>
<a href="../images/123.png" class="links item">3</a>
<a href="../images/123.jpg" class="links item">4</a>
<a href="abc" class="links item">5</a>
<a href="/a.pdf" class="links item">6</a>
<a href="/abc.pdf" class="links item">7</a>
<a href="abc.doc" class="links item last">8</a>
</p>
</body>
</html>
美化界面
<style>
.demo1 a{
float:left;
display:block;
height: 50px;
width: 50px;
border-radius: 10px;
background-color: aqua;
text-align: center;
color: black;
margin-right: 5px;
font: bold 20px/50px Arial;
}
</style>
/*選擇存在id屬性的元素*/
a[id]{
background-color: blue;
}
/*選擇id屬性為first的元素*/
a[id=first]{
background-color: red;
}
/*選擇class中有links的元素*/
a[class*="links"]{
background-color: blueviolet;
}
/*選擇href中以http開頭的元素*/
a[href^=http]{
background-color: green;
}
屬性為：=
包含元素：*=
以*為開頭：^=
以*為結尾：$=
3 優先級問題
3.1 樣式優先級
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
h1{
color:rgb(32, 221, 79);
}
</style>
</head>
<body>
<h1 style="color: red;">HelloWorld</h1>
</body>
</html>
優先級：行内樣式>内部樣式>外部樣式（**就近原則**）
（1）<link rel="stylesheet" href="css/style.css">
（2） <style>
h1{
color:rgb(32, 221, 79);
}
</style>
就近原則取（2）
3.2 選擇器優先級
id選擇器>類選擇器>标簽選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: red;
}
.first{
color: blue;
}
#second{
color: green;
}
</style>
</head>
<body>
<h1 id="second" class="first">HelloWorld!</h1>
</body>
</html>
4 美化網頁元素
4.1 字型美化
4.1.1 span标簽
重點突出要突出的字，使用span套起來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#first{
font-size: 50px;
}
</style>
</head>
<body>
Hello <span id="first">World!</span>
</body>
</html>
4.1.2 字型樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
font-family: 字型
font-size:字型大小
font-weight:字型粗細
color:字型顔色
*/
body{
font-family: 宋體;
color: black;
}
h1{
font-size: 30px;
}
.p1{
font-weight: lighter;
}
.p2{
font-weight: 900;
}
</style>
</head>
<body>
<h1>CSS （層疊樣式表）</h1>
<p class="p1">層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（标準通用标記語言的一個應用）或XML（标準通用标記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜态地修飾網頁，還可以配合各種腳本語言動态地對網頁各元素進行格式化。 </p>
<p class="p2">CSS 能夠對網頁中元素位置的排版進行像素級精确控制，支援幾乎所有的字型字号樣式，擁有對網頁對象和模型樣式編輯的能力。 </p>
</body>
</html>
4.1.3 文本樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
text-align:排版，居左，居中，居右
text-indent: 2em;段落首行縮進
img,span水準對齊：vertical-align: middle;
height,line-height行高和塊的高度一緻，可以上下居中
*/
h1{
color:rgba(0, 255, 255, 0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
background-color: aqua;
height: 300px;
line-height: 300px;
}
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<h1>CSS （層疊樣式表）</h1>
<p class="p1">層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（标準通用标記語言的一個應用）或XML（标準通用标記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜态地修飾網頁，還可以配合各種腳本語言動态地對網頁各元素進行格式化。 </p>
<p class="p2">CSS 能夠對網頁中元素位置的排版進行像素級精确控制，支援幾乎所有的字型字号樣式，擁有對網頁對象和模型樣式編輯的能力。 </p>
<p><img src="../../resources/images/紙飛機.png"><span>saafsa</span></p>
</body>
</html>
4.1.4 超連結僞類
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*預設顔色*/
a{
text-decoration: none;
color: blue;
}
/*滑鼠懸浮的顔色*/
a:hover{
color: brown;
font-size: larger;
}
/*滑鼠按住未釋放的狀态*/
a:active{
color: green;
}
</style>
</head>
<body>
<a href="#"><img src="../../resources/images/紙飛機.png"></a>
<p><a href="#">紙飛機</a></p>
<p><a href="#">text</a></p>
</body>
</html>
4.2 清單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../css/style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分類</h2>
<ul>
<li><a href="#">圖書</a> <a href="#">音像</a> <a href="#">數字商品</a> </li>
<li><a href="#">家用電器</a> <a href="#">手機</a> <a href="#">數位</a> </li>
<li><a href="#">電腦</a> <a href="#">辦公</a> </li>
<li><a href="#">家居</a> <a href="#">家裝</a> <a href="#">廚具</a> </li>
<li><a href="#">服飾鞋帽</a> <a href="#">個護化妝</a> </li>
<li><a href="#">禮品箱包</a> <a href="#">鐘表</a> <a href="#">珠寶</a> </li>
<li><a href="#">食品飲料</a> <a href="#">保健食品</a> </li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> </li>
</ul>
</div>
</body>
</html>
#nav{
width: 300px;
background-color: #a0a0a0;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background-color: red;
}
/*
list-style：
none：去掉原點
circle：空心圓
decimal：數字
suqare：正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}
4.3 背景
4.3.1 圖檔平鋪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 1000px;
height: 700px;
border:1px solid red;
background-image: url("../../resources/images/紙飛機.png");
/*預設全部平鋪*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
4.3.2 漸變
工具：https://www.grabient.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #4158D0;
background-image: linear-gradient(256deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
</style>
</head>
<body>
</body>
</html>
5 盒子模型
5.1 盒子
margin：外邊距
padding：内邊距
border：邊框
5.2 内外邊距問題
Ⅰ.div{padding:?;margin:?}
- padding或margin屬性有四個值時，順序為上，右，下，左，順時針
- padding或margin屬性有三個值時，順序為上，左右，下
- padding或margin屬性有兩個值時，順序為上下，左右
- padding或margin屬性有一個值時，所有的邊距一樣
Ⅱ.可以将外邊距margin設為auto，可以使元素在容器内水準居中
5.3 圓角邊框
div{
width: 100px;
height: 100px;
border: 10px solid red;
}
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px 50px 50px 0;
}
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px 100px 100px 100px;
}
圖檔邊框：
img{
width: 280px;
height: 280px;
border: 10px solid red;
border-radius: 280px 280px 280px 280px;
}
6 浮動
6.1 display用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
block塊元素
inline行内元素
inline-block是塊元素，但是可以内聯在一行
*/
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>
div元素
</div>
<span>行内元素</span>
</body>
</html>
6.2 float浮動
div{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
float: right;
}
clear:清除浮動
7 定位
7.1 相對定位
position: relative;相對定位，利用上下左右進行調整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
}
#first{
border: 1px dashed #191b9e;
background-color: blue;
position: relative;
left: 20px;
}
#second{
background-color: blue;
position: relative;
right: 20px;
}
#thrid{
background-color: blue;
position: relative;
top: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一個盒子</div>
<div id="second">第二個盒子</div>
<div id="thrid">第三個盒子</div>
</div>
</body>
</html>
7.2 絕對定位
position: absolute;
定位：基于xxx定位，上下左右
1.沒有父級元素定位的前提下，相對于浏覽器定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
/*絕對定位*/
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
</body>
</html>
7.3 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
/*絕對定位*/
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
/*固定定位*/
width: 100px;
height: 100px;
background-color: yellowgreen;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
</body>
</html>