my.css
p {
color: yellow;
}demo1.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><!-- 2.內(nèi)部樣式:在head元素內(nèi)部的style標(biāo)簽內(nèi)
寫樣式,這種樣式可以在當(dāng)前網(wǎng)頁(yè)上復(fù)用. --><style>
/*CSS的注釋是這樣的*/
h2 {
color: blue;
}</style><!-- 3.外部樣式:在單獨(dú)的css文件中寫樣式,
需要通過link標(biāo)簽將其引入到網(wǎng)頁(yè)上才有效.
這種樣式可以在任意的網(wǎng)頁(yè)上復(fù)用. --><link rel="stylesheet" href="my.css"/></head><body>
<!-- 1.內(nèi)聯(lián)樣式:在元素的style屬性里寫樣式,
這種樣式只對(duì)這一個(gè)元素有效,無(wú)法復(fù)用. -->
<h1 style="color:red;">CSS是層疊樣式表</h1>
<h2>CSS有3種使用方式</h2>
<p>1.內(nèi)聯(lián)樣式</p>
<p>2.內(nèi)部樣式</p>
<p>3.外部樣式</p></body></html>demo2.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
/*1.繼承性:在父元素上寫的樣式,可以被子元素
繼承,注意只有字體、顏色可以繼承。*/
body {
font-family:
"微軟雅黑","文泉驛正黑","黑體";
}
/*2.層疊性:先后給一個(gè)元素設(shè)置不同的樣式,
其效果會(huì)疊加在一起. */
h1 {
color: red;
font-size: 50px;
}
/*3.優(yōu)先級(jí):先后給一個(gè)元素設(shè)置相同的樣式,
其效果是以后者為準(zhǔn),也叫就近原則.*/
h2 {
color: blue;
}
/*...*/
h2 {
color: green;
}</style></head><body>
<h1>蒼老師</h1>
<h2>范傳奇</h2></body></html>demo3.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
/*1.元素選擇器:略*/
/*2.類選擇器:選擇一類(class="某值")
具有共性的元素*/
.girl {
color: pink;
}
/*3.id選擇器:根據(jù)id選擇唯一的元素*/
#p4 {
color: red;
}
/*4.選擇器組:寫出一組選擇器,會(huì)選中每個(gè)
選擇器所對(duì)應(yīng)的目標(biāo)的并集(合計(jì)).*/
.girl,#p4 {
/*字體加粗*/
font-weight: bold;
}
/*5.派生選擇器:
選擇某元素滿足條件的后代 */
/*5.1選擇子孫*/
#p5 b {
color: red;
}
/*5.2選擇兒子*/
#p5>b {
font-size: 30px;
}
/*6.偽類選擇器:根據(jù)元素的狀態(tài)選擇元素*/
/*6.1選擇未訪問過的超鏈接*/
a:link {
color: green;
}
/*6.2選擇已訪問過的超鏈接*/
a:visited {
color: red;
}
/*6.3選擇激活態(tài)(正在點(diǎn))的按鈕*/
#b1:active {
background-color: green;
}
/*6.4選擇有焦點(diǎn)(光標(biāo)閃爍)的文本框*/
#t1:focus {
background-color: yellow;
}
/*6.5選擇懸停態(tài)的圖片*/
img:hover {
width: 250px;
height: 250px;
}</style></head><body>
<p class="girl">蒼老師呀蒼老師</p>
<p>范傳奇呀范傳奇</p>
<p class="girl">王克晶呀王克晶</p>
<p id="p4">瞧你們那點(diǎn)破事</p>
<p id="p5">北京市<u>海淀區(qū)<b>北三環(huán)</b>西路</u>甲18號(hào)<b>中鼎大廈</b>B座8層</p>
<p>
<a href="http://www.tmooc.cn">達(dá)內(nèi)</a>
<a href="http://www.sb.com">隨便</a>
</p>
<p><input type="button" value="按鈕1" id="b1"/></p>
<p><input type="text" id="t1"/></p>
<p>
<img src="../images/01.jpg"/>
<img src="../images/02.jpg"/>
<img src="../images/03.jpg"/>
</p></body></html>demo4.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
/*1.單個(gè)邊設(shè)置邊框(left/right/top/bottom)*/
h1 {
border-left: 10px solid blue;
}
/*2.四個(gè)邊設(shè)置相同的邊框*/
p {
border: 1px dashed red;
}</style></head><body>
<h1>蒼老師</h1>
<p>
劉蒼松,系達(dá)內(nèi)Java教學(xué)總監(jiān).
是Java教學(xué)改革的先驅(qū).
同時(shí)他也是一名攝影愛好者,
他拍的片都很么么噠!
他最擅長(zhǎng)捕捉肉體和靈魂的契合點(diǎn),
能夠折射出對(duì)人性的思考與鞭撻! </p></body></html>demo1.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
p {
border: 1px solid red;
width: 100px;
height: 100px;
}
/*1.四個(gè)邊一起設(shè)置相同的邊距*/
#d1 {
padding: 20px;
margin: 30px;
}
/*2.四個(gè)邊一起設(shè)置不同的邊距(上右下左)*/
#d2 {
padding: 10px 20px 30px 40px;
margin: 40px 30px 20px 10px;
}
/*3.單個(gè)邊設(shè)置邊距(left/right/top/bottom)*/
#d3 {
padding-left: 30px;
margin-bottom: 20px;
}
/*4.對(duì)邊設(shè)置邊距(上下 左右)*/
#d4 {
padding: 20px 30px;
margin: 20px 30px;
}
/*5.外邊距的特殊用法:
當(dāng)采用對(duì)邊設(shè)置外邊距的時(shí)候,若
第二個(gè)值為auto,則該元素水平居中. */
#d5 {
margin: 50px auto;
}</style></head><body>
<p id="d0">d0</p>
<p id="d1">d1</p>
<p id="d2">d2</p>
<p id="d3">d3</p>
<p id="d4">d4</p>
<p id="d5">d5</p></body></html>demo2.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
/*1.設(shè)置背景圖*/
body {
background-image:
url(../images/background.png);
background-repeat: repeat-y;
background-position: center;
}
p {
border: 1px solid red;
width: 125px;
height: 125px;
margin: 10px auto;
}
/*2.采用簡(jiǎn)化的方式設(shè)置背景(色和圖)
background:顏色 圖片 平鋪 位置;
上述4個(gè)值可以酌情省略,但至少要保留
顏色或圖片之一 */
.enemy {
background:
url(../images/airplane.png)
no-repeat center;
}
.hero {
background:
url(../images/hero0.png)
no-repeat center;
}
/*3.固定背景圖*/
body {
background-attachment: fixed;
}</style></head><body>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="hero"></p>
<p class="hero"></p></body></html>demo3.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
h1,p {
border: 1px solid red;
width: 300px;
}
h1 {
text-align: center;
text-decoration: underline;
}
p {
text-indent: 2em;
line-height: 2em;
}
h1 {
height: 100px;
/*當(dāng)行高=元素的高時(shí),文字垂直居中*/
line-height: 100px;
}</style></head><body>
<h1>范傳奇</h1>
<p>
華燈輕撫蠶絲被,
錦墻呢喃訴床幃.
情郎翹首索芳心,
佳人回眸送秋水.
丹心不畏相思苦,
濃情何懼歲月催.
萬(wàn)水千山終有路,
幾度良宵幾輪回. </p></body></html>demo1.html 演示浮動(dòng)定位
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
.d0,p {
width: 400px;
border: 1px solid red;
}
.d1,.d2,.d3 {
width: 100px;
height: 100px;
margin: 10px;
}
.d1 {
background-color: red;
}
.d2 {
background-color: green;
}
.d3 {
background-color: blue;
}
/*浮動(dòng)*/
.d1,.d2,.d3 {
float: left;
}
/*消除浮動(dòng)影響*/
p {
/*clear: left;*/
}
.d4 {
clear: left;
}</style></head><body>
<p class="d0">
<p class="d1"></p>
<p class="d2"></p>
<p class="d3"></p>
<!-- 僅僅是用來(lái)消除浮動(dòng)影響的 -->
<p class="d4"></p>
</p>
<p>浮動(dòng)時(shí)看看我的位置</p></body></html>demo2.html 照片墻案例，演示浮動(dòng)定位
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
body {
background-color: #066;
}
ul {
width: 780px;
margin: 20px auto;
/*border: 1px solid red;*/
/*去掉列表左側(cè)的符號(hào)*/
list-style-type: none;
/*將列表自帶的內(nèi)邊距去掉*/
padding: 0;
}
li {
border: 1px solid #ccc;
width: 218px;
padding: 10px;
margin: 10px;
/*為了保證詩(shī)的順序必須左浮動(dòng)*/
float: left;
background-color: #FFF;
}
p {
text-align: center;
}
/*鼠標(biāo)懸停時(shí),讓li偏移2px的位置,
從而實(shí)現(xiàn)一個(gè)抖動(dòng)的特效. */
li:hover {
position: relative;
left: 2px;
top: -2px;
}</style></head><body>
<ul>
<li>
<img src="../images/01.jpg"/>
<p>啊,Teacher蒼!</p>
</li>
<li>
<img src="../images/02.jpg"/>
<p>你在何方?</p>
</li>
<li>
<img src="../images/03.jpg"/>
<p>難道是去了東洋?</p>
</li>
<li>
<img src="../images/04.jpg"/>
<p>那邊的癡漢很多很多,</p>
</li>
<li>
<img src="../images/05.jpg"/>
<p>你一定要穿好衣裳,</p>
</li>
<li>
<img src="../images/06.jpg"/>
<p>別走光!</p>
</li>
</ul></body></html>demo3.html 演示絕對(duì)定位
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
p {
border: 1px solid red;
width: 318px;
/*只聲明定位,不設(shè)置偏移量,
其位置不動(dòng),不受任何影響.
這樣做僅僅是為了將該元素
作為絕對(duì)定位的目標(biāo)而已.*/
position: relative;
}
p {
position: absolute;
bottom: 50px;
width: 318px;
background-color: #FFF;
text-align: center;
}
p {
height: 318px;
}</style></head><body>
<p>
<img src="../images/3.jpg"/>
<p>蒼老師到此一游</p>
</p></body></html>demo4.html 演示固定定位(回到頂部)
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
p {
border: 1px solid #ccc;
width: 40px;
line-height: 30px;
position: fixed;
right: 10px;
bottom: 30px;
text-align: center;
}</style></head><body>
<h1>iPhone7 Plus</h1>
<p>這是一個(gè)新款手機(jī)</p>
<p>它可以防火</p>
<p>它可以防盜</p>
<p>它可以防閨蜜</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>
<a href="#">頂部</a>
</p></body></html>go_to_top.html
demo1.html 設(shè)置圖片選中懸浮
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
p {
width: 800px;
height: 500px;
margin: 20px auto;
background-color: #066;
position: relative;
}
img {
position: absolute;
}
.i1 {
left: 150px;
top: 100px;
}
.i2 {
left: 200px;
top: 150px;
}
.i3 {
left: 250px;
top: 50px;
}
img:hover {
z-index: 999;
}</style></head><body>
<p>
<img src="../images/1.jpg" class="i1"/>
<img src="../images/2.jpg" class="i2"/>
<img src="../images/3.jpg" class="i3"/>
</p></body></html>demo2.html 設(shè)置列表序列樣式
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
ol {
list-style-type: upper-roman;
}
ul {
list-style-type: square;
}
.south {
list-style-image:
url(../images/add.png);
}</style></head><body>
<ol>
<li>河北省</li>
<li>黑龍江</li>
<li>山東省</li>
</ol>
<ul>
<li>北京</li>
<li class="south">上海</li>
<li class="south">廣州</li>
<li class="south">深圳</li>
<li class="south">杭州</li>
</ul></body></html>demo3.html
行內(nèi)元素轉(zhuǎn)成塊元素
塊元素轉(zhuǎn)換成行內(nèi)元素
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
p {
display: inline;
}
span {
display: block;
}
img {
display: block;
}
p {
display: none;
}</style></head><body>
<p>
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
</p>
<p>
<span>111</span>
<span>222</span>
<span>333</span>
</p>
<p>
<img src="../images/01.jpg"/>
<img src="../images/02.jpg"/>
<img src="../images/03.jpg"/>
</p></body></html>更多Unit02： CSS 概述 、 CSS 語(yǔ)法 、 CSS 選擇器 、 CSS聲明相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
