Java EE入門（二）——CSS基礎

本文轉載自查看原文 2020-02-11 11:31 274 Java EE入門

Java EE入門（二）——CSS基礎
　　iwehdio的博客園：https://www.cnblogs.com/iwehdio/

1、CSS基礎

HTML 表格布局的缺陷：
1. 嵌套層級太多，容易出現嵌套順序錯亂。
2. 頁面不夠靈活，想更改某一部分就需要改變整個表格布局。
- 可以使用 DIV + CSS 來解決這些問題。
HTML 的塊標簽：div 和 span ：
- div 標簽：<div></div>，默認占一行，自動換行。
- span 標簽：<span></span>，內容顯示在同一行。
CSS：層疊樣式表（Cascading Style Sheets），用來美化 HTML 頁面，提高代碼的復用性。（HTML決定網頁骨架，CSS優化網頁表現效果）
CSS簡單語法：
- 在一個 style 標簽中，去編寫 CSS 內容，最好在 style 標簽寫在 head 標簽中。語法結構：
```
<style>
選擇器{
    屬性名稱1：屬性的值1；
    屬性名稱2：屬性的值2；
}
</style>
```

選擇器幫助找到所要修飾的標簽或者元素。

元素選擇器：

元素的名稱{
    屬性名稱1：屬性的值1；
    屬性名稱2：屬性的值2；
}

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		div{
			color: aquamarine;
			font-size: 50px;
		}
	</style>
</head>
<body>
	<div>AAAA</div>
	<div>BBBB</div>
</body>

ID 選擇器：以 # 開頭。ID 是指定的塊標簽的標識。ID 必須是唯一的，不然一般會默認設置第一個。

#ID{
    屬性名稱1：屬性的值1；
    屬性名稱2：屬性的值2；
}

<head>
	<meta charset="utf-8">
	<title></title>
    <style>
        #div1{
            color: aquamarine;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="div1">AAAA</div>
    <div>BBBB</div>
</body>

類選擇器：以 . 開頭。class 是指定的塊標簽的類別，可以將一類的塊標簽的 class 屬性指定為相同。

. 類名{
    屬性名稱1：屬性的值1；
    屬性名稱2：屬性的值2；
}

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.part1{
			color: aquamarine;
			font-size: 50px;
		}
	</style>
</head>
<body>
	<div class="part1">AAAA</div>
	<div>BBBB</div>
	<div class="part1">CCCC</div>
	<div>DDDD</div>
</body>

CSS 選擇器分組：多個選擇器用逗號，分隔。

屬性選擇器：以標簽類型開頭，用 [ ] 中填寫所指定的屬性。然后樣式會應用於具有這些屬性的標簽，同時也可以對這些屬性指定值。

標簽[屬性]{
	屬性名稱1：屬性的值1；
    屬性名稱2：屬性的值2；
}

<head>
	<meta charset="utf-8">
	<title></title>
	<style>	/* 只會改變AAA的顏色 */
		a[href][title='a']{
			color: crimson;
		}
	</style>
</head>
<body>
	<a href="#" title="a">AAA</a>
	<a href="#" title="b">BBB</a>
</body>

后代選擇器：標簽1和標簽2由空格分隔，選擇標簽1下的標簽2的后代的樣式，標簽2是標簽1的后代，也就是說對於標簽1下包含的所有標簽2都會改變樣式。如果是標簽1 > 標簽2，則只改變父代的直接子代，不改變其子代的子代。

祖先 子代{
	屬性名稱1：屬性的值1；
    屬性名稱2：屬性的值2；
}
父代 > 子代{
	屬性名稱1：屬性的值1；
    屬性名稱2：屬性的值2；
}
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		h1 em{
			color: crimson;
		}
	</style>
</head>
<body>
	<h1>
		<p>AAAAA</p>
		<p>BBBBB</p>
		<em>CCCC</em>
		<p>
			<em>DDDDD</em>	<!--如果是 > 則此項不變色-->
		</p>
	</h1>
</body>

偽類選擇器：主要用於超鏈接 a 標簽。

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		a:link {color: black}	/*未訪問的鏈接*/
		a:visited {color: pink}	/*已訪問的鏈接*/
		a:hover {color: green}	/*鼠標移動到鏈接上*/
		a:active {color: blue}	/*選定的鏈接*/
	</style>
</head>
<body>
	<a href="#">BBBB</a>
</body>

CSS 的引入方式：
- 外部樣式引入：創建一個 .css 文件，將 style 標簽中的內容粘貼到 .css文件中。然后再在原 style 標簽的位置，用<link>標簽引入。
  
  rel 表示引入的類型，stylesheet 表示引入的是樣式表。href 指向引入的 .css 文件的相對路徑。
```
.part1{
	color: aquamarine;
	font-size: 50px;
}
```
```
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="style1.css"/>
</head>
<body>
	<div class="part1">AAAA</div>
	<div>BBBB</div>
	<div class="part1">CCCC</div>
	<div>DDDD</div>
</body>
```
- 內部樣式：直接在 style 標簽內編寫 CSS 樣式。
- 行內樣式：直接在標簽中添加 style 屬性，編寫 CSS 樣式。
```
<div style="color: aqua;">AAAA</div>
```
CSS 的浮動：
- 實現流式布局。不添加時會自動換行，添加后會自適應的顯示在一行。
- 浮動的元素會脫離正常的文檔流，在正常的文檔流中不占空間。
- 通過指定 style 屬性中的 float 屬性，可以指定為 left 或 rigth。
```
<div style="float:left;width: 200px;height: 200px;background-color: aqua;"></div>
<div style="float:left;width: 200px;height: 200px;background-color: red;"></div>
<div style="float:left;width: 200px;height: 200px;background-color: blue;"></div>
	
```
- 使用 clear 屬性，可以清除浮動。指定為 both 是兩邊都不允許浮動，left 是左邊不允許浮動，right 是右邊不允許浮動。
- 如果想讓下方的 div 不受上方浮動的影響，需要先添加一個空的 div 並指定 clear 屬性，來清除浮動。
行高：指定 style 的 line-height 和 height 一致，就可以實現文字上下居中的效果。
CSS 選擇器的優先級：
- 行內樣式 > ID 選擇器 > 類選擇器 > 元素選擇器。
- 優先級高的會覆蓋優先級低的設置。
- 對於一個標簽可以設置多個類，具體的效果遵循就近原則。也就是說與標簽內的兩個類順序無關，選擇距離近的類選擇器效果。
盒子模型：外容器（也就是 boder 顯示的邊界）和容器中的內容之間存在內邊距 padding 。外容器與其他盒子也存在外邊距 margin 。可以通過修改邊距改變盒子和內容的位置。
- 內邊距：padding-top， padding-right， padding-bottom， padding-left。
- 外邊距：margin-top， margin-right， margin-bottom， margin-left。
- 簡易設置：padding 和 margin 屬性。
  - padding：10px；上下左右都是10px。
  - padding：10px 20px；上下是10px，左右是20px。
  - padding：10px 20px 30px；上10px，右20px，下30px，左20px（默認與右邊相同）。
  - 總之默認從上開始順時針方向。 margin 屬性同理。
CSS 絕對定位：指定屬性 position：absolute，開啟絕對位置，然后設置 top、left 屬性控制到頂部和左邊的位置。

2、案例

案例1：網站首頁的優化。

用類選擇器優化首頁的實現.

實現：

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
        /* logo、菜單、產品部分的樣式 */
		.logo{
			float: left;
			width: 33%;
			height: 60px;
			line-height: 60px;	/*行高*/
		}
		
		.amenu{
			color: white;
			text-decoration: none; /*去掉下划線*/
			line-height: 50px;
		}
		.product{
			float:left;
			text-align: center;
			width: 16%;
			height: 240px;
		}
	</style>
</head>
<body>
	<div>
		<!--第一部分 logo -->
		<div>
			<div class="logo">
				<img src="../img/logo2.png" />
			</div>
			<div class="logo">
				<img src="../img/header.png" />
			</div>
			<div class="logo">
				<a href="#">登陸</a>
				<a href="#">注冊</a>
			</div>
		</div>
		<div style="clear: both;"></div>
        <!--第二部分 菜單 -->
		<div style="background-color: black;height: 50px;">
			<a href="#" class="amenu">首頁</a>
			<a href="#" class="amenu">手機數碼</a>
			<a href="#" class="amenu">零食煙酒</a>
			<a href="#" class="amenu">日用百貨</a>
		</div>
		<!--第三部分 產品 -->
		<div>
			<img src="../img/1.jpg" width="100%"/>
		</div>
		<div>
			<div><h2>最新商品<img src="../img/title2.jpg" /></h2></div>
			<div style="float:left;width: 15%;height: 480px;">
				<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
			</div>
			<div style="float:left;width: 84%;height: 480px;">
				<div style="height: 240px;width: 50%;float:left;">
					<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
				</div>
				<div class="product">
					<img src="../products/hao/small01.jpg" />
					<p>榨汁機</p>
					<p style="color: red;">￥998</p>
				</div>
             </div>
        </div>
    </div>
</body>

iwehdio的博客園：https://www.cnblogs.com/iwehdio/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS基礎入門 Java EE基礎-request對象中方法含義 Java EE基礎-response和request頁面跳轉問題前端開發-css基礎入門 Web基礎--HTML、Css入門 CSS3基礎入門03 CSS3基礎入門01 【WEB基礎】HTML & CSS 基礎入門（1）初識【WEB基礎】HTML & CSS 基礎入門（8）表單 Eclipse for Java EE的安裝