前端基礎 | CSS
阿新 • • 發佈：2020-08-26
1. 為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆分開,CSS由此思想而誕生.
2. CSS (Cascading Style Sheets) 層疊樣式表.
3. 有了CSS,html種大部分表現樣式的標籤就直接廢棄不用了,html就值負責文件結構和內容,表現形式完全交給CSS.
css基本語法及頁面應用
css基本語法
1. css的定義方法是： 選擇器 { 屬性:值; 屬性:值; 屬性:值;}
2. 選擇器是將樣式和頁面元素關聯起來的名稱，屬性是希望設定的樣式屬性每個屬性有一個或多個值。
<!-- code01_css的引入.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的引入</title> <link rel="stylesheet" href="./css/mian.css"> </head> <body> <div id="div01">這是一個div</div> </body> </html>
/* css/main.css*/
#div01{
width: 100px;
height: 100px;
/* 字型的預設大小為16 */
font-size: 20px;
color: red;
}
css頁面引入方式
css由三種引入頁面的方式
<link><style>標籤的style屬性
1. 外聯式：通過link標籤，連結到外部樣式表到頁面中。 (1) <link rel="stylesheet" type="text/css" href="css/main.css"> (2) 主要是 href 這個屬性 2. 嵌入式：通過style標籤，在網頁上建立嵌入的樣式表。 (1) <style type="text/css"> ... </style> (2) 一般網站的首頁會選擇內嵌CSS,因為載入會相對快一些 3. 內聯式: 通過標籤的style屬性，在標籤上直接寫樣式。 (1) <div style="width:100px; height:100px; color:red "> ... </div>
/* css/main.css*/
#div01{
width: 100px;
height: 100px;
/* 字型的預設大小為16 */
font-size: 20px;
color: red;
}
<!-- code02_css三種引入方式.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css三種引入方式</title> <!-- 第一種,link外部引入 --> <link rel="stylesheet" href="./css/main.css"> <!-- 第二種,使用<style>內嵌 --> <style type="text/css"> #div02{ color: darkblue; background-color: bisque; } </style> </head> <body> <div id="div01">這是一個div,這是使用<link>引入的樣式</div> <div id="div02">這是一個div,這是使用<style>引入的樣式</div> <div id="div03" style="color: blueviolet;">這是一個div,這是使用標籤的style屬性引入的樣式</div> </body> </html>
css文字設定
1. color 設定文字的顏色，如： color:red;
(1) color就是文字的顏色,不是 font-color,也沒有 font-color
2. font-size 設定文字的大小，如：font-size:12px;
3. font-family 設定文字的字型，如：font-family:'微軟雅黑';
4. font-style 設定字型是否傾斜，如：font-style:'normal'; 設定不傾斜，font-style:'italic';設定文字傾斜
(1) 一般是用來設定字型不傾斜
(2) em{ font-style: normal } i{ font-style:normal } (這些標籤本來就是帶有樣式的,現在相當於手動取消了樣式)
5. font-weight 設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗
(1) h1{ font-weight: normal }
6. line-height 設定文字的行高，設定行高相當於在每行文字的上下同時加間距， 如：line-height:24px;
(1) line-height的理解是從這行文字的底部到上行文字的底部
7. font 同時設定文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫： font：是否加粗 字號/行高 字型；
(1) 如： font:normal 12px/36px '微軟雅黑';
8. text-decoration 設定文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
(1) <a href="#" style="text-decoration:none;"></a> => 取消超連結的下劃線
9. text-indent 設定文字首行縮排，如：text-indent:24px; 設定文字首行縮排24px
(1) div{ font-size=22px; text-indent: 44px; }
10. text-align 設定文字水平對齊方式，如text-align:center 設定文字水平居中
<!-- code03_常用文字樣式.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>css中常用文字樣式</title>
<style type="text/css">
div {
color: pink; /* 字型顏色 color */
font-size: 20px; /* 字型大小 font-size 預設16px */
/* 字型的格式 font-family */
font-family: Arial, Helvetica, sans-serif;
/* 設定文字是否傾斜 font-style */
font-style: italic;
/* 設定文字是否加粗 font-weight */
font-weight: bold;
/* 設定文字行高 line-height */
line-height: 40px;
/* 設定首行空格 text-indent*/
text-indent: 40px;
/* 設定文字對齊方式 text-align 預設是left */
text-align: center;
}
#div01 #span01 {
font-size: 30px;
color: blue;
font-style:normal;
}
</style>
</head>
<body>
<div id="div01">
大部分的資料都來自已有的資料庫，如果沒有的話也可以交給很多<span id="span01">爬蟲工程師</span>去採集，來提供。
<br />也可以來自平時的記錄，反正資料無處不在，大都是可用的。
</div>
</body>
</html>
css顏色表示法
css中有三種表示顏色的方式
rgb 是表示三種光的顏色
取色的話要藉助取色器來取色
1. 顏色名錶示，比如：red 紅色，gold 金色
(1) 只要基礎一些常見的顏色單詞
2. rgb表示，比如：rgb(255,0,0)表示紅色
3. 16進位制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00
(1) 其實最多的就是這中16進位制RGB
css選擇器
常用的css選擇器就6種
標籤,id,類,層次,組,偽類及偽元素
標籤選擇器
標籤名{...}
標籤選擇器影響範圍大,建議儘量應用在層級選擇器種
/* *是選擇全部的標籤 */
*{margin:0;padding:0}
/* div是選擇全部的div標籤 */
div{color:red}
id選擇器
#id名稱{...}
通過id名來選擇元素,元素的id名稱不能重複,所以一個樣式設定項只能對於頁面的一個元素
id名一般給程式使用,所以css的話不推薦使用id作為選擇器(類選擇器在css中可複用)
#box{color:red}
/*
<div id="box">....</div> <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->
*/
類選擇器
.類名稱{...}
通過類名來選擇元素,一個類可以應用於多個元素,一個元素上也可以使用多個類,應用靈活,可複用
類選擇是css應用最多的一種選擇器
id就算寫重複了也不會報錯.... html本來就是弱語法....知識口頭約束不要這麼寫
/* 先寫好類選擇器,然後再html中使用 => 實現了樣式的複用 */
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
/*
<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
*/
層級選擇器
父選擇器 子選擇器 子子選擇器{...}
主要應用在選擇父元素下的子元素,或者子元素下面的子元素,可與標籤元素結合使用
使用層級選擇器幫助減少命名,同時也通過層級,防止命名衝突
.box span{color:red}
.box .red{color:pink}
.red{color:red}
/*
<div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>
*/
組選擇器
選擇器1,選擇器2,...,選擇器n{...}
多個選擇器,如果有同樣的樣式設定,可以使用組選擇器
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
/*
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
*/
偽類和偽元素選擇器
選擇器:偽類/元素{...}=> 偽類可以理解為事件觸發的樣式
常用的偽類選擇器有hover，表示滑鼠懸浮在元素上時的狀態
偽元素選擇器有before和after,它們可以通過樣式在元素中插入內容
/* 偽類選擇器記住 hover即可 */
.box1:hover{color:red}
/* 偽元素選擇器知道 before 和 after 即可 */
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
<!-- code05_偽類_偽元素選擇器.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>偽類_偽元素選擇器</title>
<style type="text/css">
/* 寫css也要有面向物件的實現... 封裝樣式 */
.link {
font-size: 30px;
text-decoration: none;
color: green;
}
/* 現在加上一個hover事件的樣式 */
.link:hover {
font-weight: bold;
color: gold;
}
.input:hover {
background-color: gold;
}
.input:focus {
background-color: rgb(0, 255, 213);
}
</style>
</head>
<body>
<a href="http://www.baidu.com" class="link">百度</a><br />
First name: <input type="text" name="fname" class="input" /><br />
Last name: <input type="text" name="lname" class="input" /><br />
</body>
</html>