亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 34
粉絲 0
評論 0
訪問量 28343
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
CSS基礎(chǔ)與選擇器-九期線上班
只貓
原創(chuàng)
899人瀏覽過

1、元素按顯示方式分為哪幾種，并舉例，正確描述它們

元素按顯示方式分為塊級元素和行內(nèi)元素。

塊級元素總是獨(dú)占一行，兩邊不允許有元素，總是追求最大化把父級元素?fù)螡M，高度是其子元素的總高度，塊級元素允許并需要設(shè)置寬高，例如<div>、<p>、<table>、<tr>、<td>、<ul>、<li>、<form>、<iframe>、<h1>~<h6>...

行內(nèi)元素通常在一行中進(jìn)行設(shè)置，兩邊允許有內(nèi)容，它的寬高追求最小化。高度和兩邊的內(nèi)容一致，寬度是自身當(dāng)前內(nèi)容的寬度，不可自己設(shè)置寬高，設(shè)置了也沒用。例如<span>、<input>、<a>、<em>、<strong>、<i>、<label>...


2、CSS是什么? 它的主要作用是什么?

CSS是層疊樣式表(Cascading Style Sheets)，它的主要作用是設(shè)置HTML元素在文檔中的布局和顯示方式。它能精確的找到網(wǎng)頁中元素的位置并給元素添加樣式，使html頁面看起來更加整潔美觀。


3、什么是CSS選擇器，它的樣式聲明是哪二部分組成?

CSS選擇器是用來選擇頁面中某一個或某一組標(biāo)簽，它的樣式聲明由一個鍵值對組成，分別是屬性名:屬性值。


4、舉例演示CSS簡單選擇器(全部)

優(yōu)先級：id選擇器>class選擇器>元素選擇器

(1) 元素選擇器 ——按名稱

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css元素選擇器</title>
	<link rel="stylesheet" href="static/css/style1.css">
</head>
<body>
	<p>作為“亞洲第一男團(tuán)”的德云社，向來自帶熱搜體質(zhì)，今天又是緊緊貼在榜首</p>
	<p>一批新規(guī)自11月起施行 將影響你我的生活</p>
	<p>位于日本沖繩縣那霸市的首里城31日凌晨突發(fā)火災(zāi)</p>
	<h3>今日練習(xí)CSS</h3>
</body>
</html>
p{	
    /*文本前景色*/
    color: red;
}

效果

QQ圖片20191031130740.png

(2) 屬性選擇器 (class和id都是屬性選擇器的一種)

    2.1 類/class選擇器

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css類選擇器</title>
	<link rel="stylesheet" href="static/css/style1.css">
</head>
<body>
	<p class="blue">作為“亞洲第一男團(tuán)”的德云社，向來自帶熱搜體質(zhì)，今天又是緊緊貼在榜首</p>
	<p class="blue">一批新規(guī)自11月起施行 將影響你我的生活</p>
	<p>位于日本沖繩縣那霸市的首里城31日凌晨突發(fā)火災(zāi)</p>
	<h3>今日練習(xí)CSS</h3>
</body>
</html>
p[class="blue"]{
	color:blue;
}

類選擇器可簡寫為

.blue{	
	color: blue;
}

效果

QQ圖片20191031132120.png

    2.2 id選擇器

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>id選擇器</title>
	<link rel="stylesheet" href="static/css/style1.css">
</head>
<body>
	<p class="blue">作為“亞洲第一男團(tuán)”的德云社，向來自帶熱搜體質(zhì)，今天又是緊緊貼在榜首</p>
	<p class="blue" id="p1">一批新規(guī)自11月起施行 將影響你我的生活</p>
	<p>位于日本沖繩縣那霸市的首里城31日凌晨突發(fā)火災(zāi)</p>
	<h3>今日練習(xí)CSS</h3>
</body>
</html>

style1.css

p[id="p1"]{
	font-size: 25px;
}

id選擇器可簡寫為

#p1{	
font-size: 25px;
}

結(jié)果

QQ圖片20191031134843.png

(3) 群組選擇器

實(shí)例

.blue,#p1,h3{
	background-color: lightcyan;
}

效果

1.png

(4) 通配符選擇器

實(shí)例

body *{
	background-color: #ccc;
}

效果

QQ圖片20191031140843.png


5、舉例演示CSS上下文選擇器(全部)

上下文選擇器也叫結(jié)構(gòu)選擇器。

5.1 后代選擇器：父元素+空格 選子女

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>上下文選擇器</title>
	<link rel="stylesheet" type="text/css" href="static/css/style2.css">
</head>
<body>
<section>
	<div>
	    <h2>PHP</h2>
	    <h2>HTML</h2>
	    <h2>CSS</h2>
	</div>
	<h2>Java</h2>
	<h2>Python</h2>
	<h3>我大概不會被選中</h3>
</section>
</body>
</html>

style2.css

section h2{
	color: lightgreen;
}

結(jié)果

1572503638527781.png

5.2 父子選擇器 父元素+>選 直接子元素

section>h2{
	color: lightgreen;
}

結(jié)果

1572503811521999.png

5.3 同級相鄰選擇器

div+ *{
	background-color: #ccc;
}

1572504558468423.png

5.4 同級所有選擇器

div~ *{
	background-color: #ccc;
}


1572504586419709.png


6、舉例演示常用CSS結(jié)構(gòu)偽類選擇器(不少于四種)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>結(jié)構(gòu)偽類選擇器</title>
	<link rel="stylesheet" type="text/css" href="static/css/style3.css">
</head>
<body>
	<ul>
		<li>
			<h3>課程表</h3>
			<ul>
				<li>php</li>
				<li>html</li>
				<li>css</li>
			</ul>
		</li>
		<li>
			<h3>菜單</h3>
			<ul>
				<li>雞胸肉</li>
				<li>煮雞蛋</li>
				<li>蔬菜</li>
			</ul>
		</li>
		<li>
			<h3>娛樂項(xiàng)目</h3>
			<p>玩一會兒</p>
			<ul>
				<li>看電影</li>
				<li>玩游戲</li>
				<li>去蹦極</li>
			</ul>
			<p>別玩了</p>
		</li>

	</ul>
</body>
</html>

6.1 非限定類型的偽類選擇器

style3.css

 ul > :nth-child(2){
	background-color: grey;
}

 ul:first-child > :nth-child(2){
	background-color: lightgreen;
}
 
ul:first-child > :last-child{
	background-color: lightblue;
} 

ul:first-child > :last-child > p:nth-child(n+1){
	background-color: pink;
}
ul:first-child>:last-child li:nth-child(n+1){
	color: white;
	}

1572509900944008.png

6.2 限定類型的偽類選擇器
ul:first-of-type > :last-of-type > p:nth-of-type(n+1){
	color: blue;
}

ul:first-of-type>:last-of-type li:nth-of-type(n+1){
	color: white;
}

7、舉例演示常用CSS表單偽類選擇器(不少于三種)

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表單偽類選擇器</title>
	<link rel="stylesheet" type="text/css" href="static/css/style4.css">
</head>
<body>
	<h2>用戶登錄</h2>
	<form action="" method="">
		<p>
			<label for="email">郵箱：</label>
			<input type="email" name="email" id="email" required>
		</p>
		<p>
			<label for="pass">密碼：</label>
			<input type="password" name="pass" id="pass">
		</p>
		<p>
		<label for="warning">警告：</label>
			<input type="text" value="不允許重復(fù)登錄" id="warning" style="border:none;" disabled>
		</p>
		<p>
		<label for="save">保存密碼：</label>
			<input type="checkbox" name="save" id="save" checked>
		</p>
	</form>	
</body>
</html>

style4.css

input:enabled{	
	background-color: lightgreen;
}

input:disabled{
	background-color: pink;
}

input:required{
	background-color: yellow;
}

結(jié)果

1572511487604553.png

手抄代碼：


總結(jié)：CSS制作樣式要靈活運(yùn)用，首先各種選擇器要熟悉并牢記他們，之前看到各種選擇器只是大概知道，有時候可能還想不起來，通過這次作業(yè)也讓我對它們的印象更加深刻了一些。知道了頁面元素的分類讓我明白一些樣式該怎樣去正確添加才不做無用功，偽類選擇器的child屬性和上下文選擇器嵌套使用有一點(diǎn)難度，要掌握還需要能多的練習(xí)和實(shí)戰(zhàn)。

批改狀態(tài)：合格

老師批語：這種作業(yè)形式非常好, 將運(yùn)行結(jié)果直接發(fā)成截圖上來
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)