【筆記】CSS基礎知識
阿新 • • 發佈：2018-10-06
relative 唯一性 splay 設置 vertical 子元素 auto eat 十分
0x01 CSS基礎語法及嵌入方式
1. CSS基礎語法
格式： 選擇器(選擇符){屬性:屬性值;屬性:屬性值;……}
註釋樣式：
/*註釋內容*/2. 嵌入方式
2.1 內聯方式(行內樣式)
就是在雙標簽的開始標簽中嵌入
特點：僅作用於本標簽
2.2 內部方式
即在head標簽中嵌入style標簽及其樣式
特點：作用於整個頁面
2.3 外部導入(推薦)
就是在head標簽中用link鏈接外部的CSS文件，進行修飾(這種采取HTML和CSS代碼分離的技術，十分常用)
特點：作用於整個網站
嵌入方式--使用實例
<!DOCTYPE html> <html> <head> <title>CSS的嵌入方式</title> <meta charset="utf-8"> <style type="text/css"> li{ background-color:red; font-size:20px; } </style> <!-- 這裏需要在當前目錄下新建一個名為my.css的文件，裏面的代碼為 ul{ background-color:#f0c; } --> <link rel="stylesheet" type="text/css" href="my.css"> </head> <body> <h3>CSS的嵌入方式</h3> <ul> <li style="background-color:cyan;">你只有足夠自律</li> <li style="color:#f0c;">才能非常自由</li> <li>思維孕育行動</li> <li>行動培養習慣</li> <li>習慣決定命運</li> </ul> </body> </html>
註意：當樣式沖突時，三種嵌入方式的選擇是采取就近原則，即離要修飾的值越近的CSS屬性生效；當樣式不沖突時，三種嵌入方式的修飾則會疊加使用。
0x02 CSS選擇符和選擇器
1. CSS2選擇符(常用)
1.1 HTMl選擇符、標簽選擇器(E)
就是直接用HTML標簽作為選擇符進行修飾
格式：
p{……} 網頁中所有p標簽都使用此樣式1.2 class類選擇符(E.myclass)
就是在HTML的開始標簽中進行class命名，同一網頁中，可以命名多個相同的class名稱
格式：
.class名{color:red;……} 同一網頁中，所有**相同的class名**都使用此樣式 p.class名{color:cyan;……} 同一網頁中，所有**p標簽下的相同class名**都使用此樣式
1.3 Id選擇符(E#myid)
就是在HTML的開始標簽中進行ID命名，同一網頁中，ID命名具有唯一性
格式：
#ID名{color:#f0c;……} 網頁中，ID名為”ID名“的使用此樣式1.4 關聯選擇符、包含選擇符(E F)
就是對標簽下包含的一個標簽#進行定義
格式：
ul li{color:#2bf666;……} 網頁中，所有ul標簽下的li標簽都使用此樣式1.5 組合選擇符
就是多個HTML標簽同時使用這一個樣式
格式：
body,p,h1,div,sapn,ul,ol,li{margin:0;padding:0;} 網頁中的body,p,h1,div,span,ul,ol,li標簽都使用此樣式
1.6 偽類選擇符
格式：
a:link{color:green;……} 未訪問的鏈接樣式
a:visited{color:red;……} 已訪問的鏈接樣式
a:hover{color:skyblue;……} 鼠標移入時的鏈接樣式
a:active{color:blue;……} 鼠標點擊鏈接時的樣式選擇符--使用實例
<!DOCTYPE html>
<html>
<head>
<title>CSS2選擇符</title>
<meta charset="utf-8">
<style type="text/css">
/*HTML標簽選擇符*/
p{
background-color:red;
}
/*class類名選擇符*/
.two{
color:cyan;
}
/*ID名選擇符*/
#id{
color:#f0c;
}
/*包含選擇符*/
ul li{
font-size:20px;
font-family:宋體 ;
}
/*組合選擇符*/
ul,li,p,a{
margin:10px;
padding:5px;
}
/*a{
text-decoration:none;
}*/
/*偽類選擇符*/
a:link{
color:blue;
}
a:visited{
color:red;
}
a:hover{
color:cyan;
}
a:active{
color:#f0c;
}
</style>
</head>
<body>
<h3>CSS2選擇符</h3>
<ul>
<li id="one">列表一</li>
<li class="two">列表二</li>
<li>列表三</li>
<li>列表四</li>
</ul>
<p>你只有足夠自律，才能非常自由</p>
<a href="http://www.baidu.com/" target="_blank">百度一下</a>
</body>
</html>2. CSS3選擇器(了解)
2.1 關系選擇器
a. 子選擇器(E>F)
div>p 即div標簽下的所有標簽都使用此樣式
b. 相鄰選擇器(E+F)
div+p 選擇div標簽後緊鄰的第一個p標簽采用此樣式
c. 兄弟選擇器(E~F)
div~p 選擇div標簽後的所有兄弟p標簽采用此樣式
2.2 狀態偽類選擇器
a. E:hover 設置鼠標移入時的樣式
b. E:focus 設置元素在獲取到焦點時的樣式
c. E:first-child 設置父元素的第一個子元素的樣式
d. E:last-child 設置符元素的最後一個子元素的樣式
e. E:checked 設置元素被用戶選中時的樣式(只用於input中的單選框和復選框)
選擇器--使用實例
<!DOCTYPE html>
<html>
<head>
<title>CSS3選擇器</title>
<meta charset="utf-8">
<style type="text/css">
/*設置ul標簽下的所有li標簽的樣式*/
ul>li{
color:#2bf666;
}
/*設置ul標簽相鄰的第一個li標簽的樣式*/
ul+li{
background-color:#ccc;
}
/*設置ul標簽並列的所有的兄弟p標簽都使用此樣式*/
ul~p{
color:#f0c;
}
p.hover:hover{
color:skyblue;
}
input:focus{
background:red;
border:2px dashed cyan;
}
input:checked+span{
color:red;
}
/*設置用戶選中元素時添加的內容*/
input:checked+span:after{
content:"我被選中了";
}
</style>
</head>
<body>
<h3>CSS3選擇器</h3>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<li>列表大大</li>
<li>列表小小</li>
<p>你只有足夠自律，才能非常自由</p>
<p class="hover">習慣決定命運</p>
<ol>
<li>思維</li>
<li>行動</li>
<li>習慣</li>
</ol>
用戶名:<input type="text" name="username">
<br />
性別:
<laabel>
<input type="radio" name="sex" value="0"><span>男 </span>
</label>
<label>
<input type="radio" name="sex" value="1"><span>女 </span>
</label>
</body>
</html>0x03 CSS中常用屬性
1. 顏色(Color)
a. 顏色名
red,yellow,green,blue,pink,skyblue,grey,black,white
*b. HEX
HEX為十六進制的正整數 格式為#RRGGBB或#RGB
*c. RGB
格式：
a{color:rgb(R,G,B);} RGB中的每個元素的取值為0~255
d. RGBA
RGBA比RGB多了一個設置透明度(A)的，取值為百分比或小數
*e. 圖片透明度設置opacity
img{opacity:0.35;}
2. 字體(Font)
| 屬性 | 取值 | 作用 |
|---|---|---|
| *font-size | 像素或百分比(不允許為負值) | 設置字體大小 |
| *font-family | 宋體、Arial | 設置字體 |
| font-style | italic(斜體) | 設置字體樣式 |
| *font-weight | bold(加粗) 或用數字(100~900) | 設置字體的粗細 |
| font-variant | small-caps | 設置文本為小型的大寫字母 |
3. 文本(Text)
| 屬性 | 取值 | 作用 |
|---|---|---|
| text-indent | 像素值|em(字符) | 設置文本的縮進 |
| text-overflow | clip|ellipsis(以...顯示多余內容) | 設置是否以...顯示文本的多余內容 |
| *text-align | left|center|right | 設置文本的水平對齊方式 |
| text-transform | capitalize|uppercase|lowercase | 設置文本字母的大小寫 |
| *text-decoration | none|underline|line-through | 設置文本的劃線 |
| *text-shadow | length1 length2 [length3]&&color | 設置文本的陰影及模糊效果 |
| vertical-align | top|middle|bottom | 設置文本的垂直對齊方式 |
| direction | ltr(默認) | rtl(文本由右轉向左) | 設置文本流的方向 |
| *white-space | nowrap | 強制在同一行內顯示所有文本(overflow) |
| *letter-spacing | 像素值 | 設置文本或字母的間距 |
| word-spacing | 像素值 | 設置單詞的間距 |
| *line-height | 長度|百分比|小數 | 設置文本的行高 |
| *color | 與color屬性取值一致 | 設置文本的顏色 |
顏色、字體、文本屬性--使用實例
<!DOCTYPE html>
<html>
<head>
<title>CSS中常用屬性一</title>
<meta charset="utf-8">
<style type="text/css">
ul{
width:200px;
}
ul li:first-child{
color:red;
background-color:#eee;
}
li.one{
text-transform:uppercase;
}
li.two{
color:rgb(102,233,200);
}
li.three{
color:rgba(20,101,222,0.5);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
img{
width:300px;
opacity:0.4;
}
ul>li:last-child{
font-size:30px;
font-family:Arial;
font-style:italic;
/*font-weight:700;*/
font-weight:bold;
/*設置文本為小型的大寫字母*/
font-variant:small-caps;
/*text-transform:uppercase;*/
color:#f0c;
background-color:#eee;
}
p.one{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
p.two{
text-decoration:underline;
direction:rtl;
/*嚴格按照我設置的順序進行排列*/
unicode-bidi:bidi-override;
text-align:left;
}
p.three{
text-decoration:line-through;
letter-spacing:3px;
word-spacing:5px;
}
p.four{
font-size:20px;
text-indent:2em;
text-shadow:3px 3px 3px #666;
}
p>a{
font-size:10px;
text-decoration:none;
/*vertical-align:-10px;*/
vertical-align:bottom;
}
ol>li{
line-height:1.5;
color:#1ea;
}
</style>
</head>
<body>
<h3>CSS顏色、字體、文本屬性</h3>
<ul>
<li>思維孕育行動</li>
<li class="one">行為習慣 pretty good</li>
<li class="two">行動培養習慣</li>
<li class="three">習慣決定命運 你只有足夠自律，才能非常自由</li>
<li>very good</li>
</ul>
<!-- 在當前目錄下要有一張名為1.jpg的圖片 -->
<img src="1.jpg">
<p class="one">你只有足夠自律，才能非常自由 你只有足夠自律，才能非常自由</p>
<p class="two">你只有足夠自律，才能非常自由</p>
<p class="three">你只有足夠自律，才能非常自由 you are pretty!</p>
<p class="four">你只有足夠自律，<a href="#">才能非常自由</a></p>
<ol>
<li>你只有足夠自律</li>
<li>才能非常自由</li>
</ol>
</body>
</html>註意：
- 使用text-overflow前，需要文本內容強制在同一行顯示(white-space)，並且將多余內容隱藏(over-flow:hidden;)
- text-shadow中的三個值，第一個值控制水平方向，第二個值控制垂直方向，第三個值控制陰影效果。其中，第一、二兩個值可以為負數，第三個值為可選項。
- vertical-align設置文本垂直對齊方式時，需要將要修飾的文本大小設置比父文本小；否則，則需要借助設置像素值的方式讓文本進行上移動。
- direction設置文本流由右向左轉(rtl)時，需要借助unicode-bidi:bidi-override; 去強制按照我設置的規則進行排列順序。
4. 邊框(Border)
| 屬性 | 取值 | 作用 |
|---|---|---|
| *border | 寬度||樣式||顏色 | 綜合設置邊框的屬性 |
| border-color | color屬性 | 設置邊框的顏色 |
| border-style | dashed|solid|dotted|double 3D樣式:groove|ridge|inset|outset |
設置邊框的樣式 |
| border-width | 像素值 | 設置邊框的寬度 |
| *border-radius | 像素值 | 設置對象使用圓角邊框 |
| *box-shadow | length1||length2||[length3]||[length4] | 設置對象的陰影效果 |
5. 背景(Background)
| 屬性 | 取值 | 作用 |
|---|---|---|
| background | 顏色||url||repeat||attachmetn||position | 設置背景的屬性 |
| background-color | color屬性 | 設置背景的顏色 |
| background-image | url | 添加背景圖片 |
| background-repeat | repeat-x|repeat-y|repeat|no-repeat | 設置背景圖片如何平鋪 |
| background-position | 像素值|left|right|top|bottom | 設置背景圖片的位置 |
| background-attachment | fixed(背景圖像固定)|scroll(默認值) | 設置背景圖片是否固定 |
| background-size | 像素值 | 設置背景圖片的尺寸大小 |
6. 內補白(Padding)
| 屬性 | 取值 | 作用 |
|---|---|---|
| *padding | length1||length2||length3||length4 | 設置對象的四邊內部邊距 |
| padding-top | 像素值 | 設置對象的頂邊內部邊距 |
| padding-right | 像素值 | 設置對象的右邊內部邊距 |
| padding-bottom | 像素值 | 設置對象的底邊內部邊距 |
| padding-left | 像素值 | 設置對象的左邊內部邊距 |
7. 外補白(Margin)
| 屬性 | 取值 | 作用 |
|---|---|---|
| *margin | length1||length2||length3||length4 | 設置對象的四邊外部邊距 |
| margin-top | 像素值 | 設置對象的頂邊外部邊距 |
| margin-right | 像素值 | 設置對象的右邊外部邊距 |
| margin-bottom | 像素值 | 設置對象的底邊外部邊距 |
| margin-left | 像素值 | 設置對象的左邊外部邊距 |
8. 定位(Position)
| 屬性 | 取值 | 作用 |
|---|---|---|
| *position | static|relative|absolute|fixed | 檢索對象的定位方式 |
| *z-index | auto|整數值 | |
| *top | 像素值 | |
| right | 像素值 | |
| bottom | 像素值 | |
| *left | 像素值 |
9. 布局(Layout)
| 屬性 | 取值 | 作用 |
|---|---|---|
| *display | none|block(塊)|table(表格)|…… | 設置對象顯示的類型 |
| *float | none|left|right | 設置對象如何浮動 |
| *clear | none|left|right|both(不允許有浮動) | 清楚對象的浮動效果 |
| visibility | visible|hidden|collapse | 設置對象是否顯示 |
| clip | rect(1||2||3|| 4) | |
| *overflow | visible(不剪切內容)|hidden | 設置其指定內容超過寬度及高度如何顯示 |
| overflow-x | visible(不剪切內容)|hidden | 設置其指定內容超過寬度如何顯示 |
| overflow-y | visible(不剪切內容)|hidden | 設置其指定內容超過高度如何顯示 |
行標簽和塊標簽
| 行標簽 | 塊標簽 |
|---|---|
| a | h1 |
| b | div |
| em | p |
| strong | pre |
| i | li |
| span |
10. 用戶界面(User Interface)
| 屬性 | 取值 | 作用 |
|---|---|---|
| cursor | ne-resize|nw-resize | 設置對象上的移動的鼠標光標樣式 |
| zoom | normal|數值|百分比 | 設置對象的縮放比例 |
| …… |
邊框、背景、內外補白、定位、布局、用戶界面--使用實例
<!DOCTYPE html>
<html>
<head>
<title>CSS中常用屬性二</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-image:url("9.jpg");
background-size:1000px;
/*background-repeat:no-repeat;*/
background-repeat:no-repeat;
background-attachment:fixed;
}
ul li{
margin:0px;
padding:0px;
}
ul,ol{
list-style:none;
}
ul>li{
width:200px;
height:200px;
border:1px solid red;
float:left;
margin:0px 10px;
}
ul li:last-child{
/*border-color:cyan;*/
border-top-color:#2bf666;
border-right-color:#f0c;
border-bottom-color:#71d;
border-left-color:#1fb;
}
ul li.two{
border-style:dashed;
border-bottom-style:solid;
border-width:2px;
border-bottom-width:3px;
}
ul li.three{
border-radius:30px 10px;
/*border-top-left-radius:10px;*/
box-shadow:2px 2px 8px 3px red;
}
div.div{
clear:both;
}
ol li:first-child{
width:200px;
background:url("map") repeat-x;
background-position:bottom;
margin:0px 10px;
/*background-image:url("2.jpg");*/
}
/*
倒影效果沒有做出來
h3{
box-reflect:below 10px;
}*/
div.one{
width:300px;
height:500px;
background-color:#eee;
/*position:absolute;*/
}
/*absolute基於瀏覽器的位置*/
div.two{
width:200px;
height:200px;
background-color:cyan;
position:absolute;
top:120px;
}
div.three{
width:200px;
height:200px;
position:relative;
margin:30px;
background-color:#f0c;
}
div.four{
width:2000px;
height:200px;
background-color:#aaa;
position:fixed;
float:right;
right:-1800px;
}
div.four:hover{
left:0px;
}
span{
width:100px;
height:100px;
background-color:#333;
display:block;
cursor:nw-resize;
zoom:2;
}
</style>
</head>
<body>
<h3>邊框、背景、內外補白、定位、布局、用戶界面</h3>
<ul>
<li></li>
<li class="two"></li>
<li class="three"></li>
<li></li>
</ul>
<div class="div"></div>
<ol>
<li>1</li>
</ol>
<span>very good</span>
<div class="one">
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</body>
</html>註意：
- border,background,margin,padding 在取值時，四個像素值分別代表為上、右、下、左(順時針)。
- 文本倒影效果沒有實現出來
【筆記】CSS基礎知識