CSS1（新聞案例）

情非得已的鎬發表於2020-10-21
CSS

CSS語法規範

由HTML專注去做結構呈現，樣式交給CSS，即結構（HTML）與樣式（CSS）相分離。CSS 主要美化網頁、佈局頁面
CSS規則由兩個主要的部分構成，選擇器以及一條或多條宣告

  • 選擇器是用於指定CSS樣式的HTML標籤，花括號內是對該物件設定的具體樣式
  • 展開格式，一行一個屬性
  • 屬性和屬性值以“鍵值對”的形式出現
  • 屬性是對指定的物件設定的樣式屬性，例如字型大小，文字顏色等
  • 屬性和屬性值之間用英文“：”分開
  • 多個“鍵值對”之間用英文“；”進行區分
<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title>體驗css的語法規範</title>
		<style>
			p {
				color: red;
				font-size: calc(12px);
			}
		</style>
	</head>
	<body>
	<p>有點意思</p>
	</body>
</html>

CSS 基礎選擇器

  • 選擇器作用：根據不同需求把不同的標籤選出來
  • 選擇器分類：基礎選擇器和複合選擇器
    • 基礎選擇器是由單個選擇器構成的
    • 基礎選擇器又包括：標籤選擇器，類選擇器，id選擇器和萬用字元選擇器
  • 標籤選擇器：快速為頁面中同型別的標籤統一設定樣式，但不能設計差異化樣式，只能選擇全部的當前標籤
  • 類選擇器
    • 如果想要差異化選擇不同的標籤，單獨選一個或者某幾個標籤，可以使用類選擇器
    • 類選擇器在HTML中以class屬性表示，在css中，類選擇器以一個點“.”號表示
    • 類選擇器的多類名使用方式（一個標籤多個名字）
      在標籤class屬性中寫多個類名
      多個類名中間必須用空格分開
      這個標籤就可以分別具有這些類名的樣式
      注意
    • 類選擇器使用“.”（英文點號）進行標識，後面緊跟類名（自定義，我們自己命名的）
    • 可以理解為給這個標籤起了一個名字，來表示
    • 長名稱或片語可以使用中橫線來為選擇器命名
    • 不要使用純數字、中文等命名，儘量使用英文字母來表示
    • 命名要有意義，儘量使別人一眼就知道這個類名的目的
      記憶口訣：樣式點定義，結構類呼叫，一個或多個，開發最常用
  • id 選擇器
    • id選擇器可以為標有特定的樣式
    • HTML元素以id屬性來設定id選擇器，css中id選擇器以“#”來定義
      id屬性只能在每個HTML文件中出現一次，口訣：樣式#定義，結構id呼叫，只能呼叫一次，別人切勿使用
  • id選擇器和類選擇器的區別：
    • 類選擇器好比別人的名字，一個人可以有多個名字，同時一個名字也可以被多個人也可以被多個人使用
    • id選擇器好比人的身份證號碼，全中國是唯一的，不得重複
    • id選擇器和類選擇器最大的不同在於使用次數上
    • 類選擇器在修改樣式中用的最多，id選擇器一般用於頁面唯一性的元素上，經常和JavaScript搭配使用
  • 萬用字元選擇器
    • 在CSS中，萬用字元選擇器使用“*”定義，它表示選取頁面中所有元素（標籤）
    • 萬用字元選擇器不需要呼叫，自動就給所有的元素使用樣式
    • 特殊情況才使用

字型屬性（字型系列、大小、粗細、樣式）

  • 字型系列（font-family:“Microsoft YaHei”）
  • 字型大小（font-size 注意標籤比較特殊，需要單獨指定大小）
    谷歌預設字型大小為16px，不同瀏覽器可能預設顯示的字號大小不一致，我們儘量給一個明確的大小值，不要預設大小
    可以給body指定整個頁面文字的大小
  • 字型粗細（font-weight）
    400 = normal（不加粗的）
    700 = bold（加粗）
    注意：這裡的數字後不加單位
  • 文字樣式（font-style：normal 正常的；italic 斜體）
  • 字型複合屬性（font字型連寫）
    • 順序為：font-style、font-weight、font-size、font-family
    • 使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，並且各個屬性間以空格隔開
    • 不需要設定的屬性可以省略（取預設值），但必須保留 font-size 和 font-family 屬性，否則font屬性將不起作用

文字屬性

  • 文字顏色
    color屬性用於定義文字的顏色
    表示方式：預定義的顏色值；十六進位制；RGB程式碼
    開發中最常用的是十六進位制
  • 對齊文字（text-align）
    text-align 只能設定元素的水平對齊方式
  • 裝飾文字（text-decoration）
    規定新增到文字的修飾，可以給文字新增下劃線、上劃線、刪除線等
    屬性值：none（預設，沒有修飾線，最常用）；underline；overline；line-through（刪除線，不常用）
    重點記住如何新增下劃線，如何刪除下劃線
  • 文字縮排（text-indent）
    這裡 em 是一個相對單位，就是當前元素1個文字的大小，如果當前元素沒有設定大小，則會按照父元素的一個文字大小
  • 行間距（text-height）
    是由上間距，行高，下間距一起構成的一個

CSS引入方式

  • 內聯樣式表
    內嵌到HTML頭部檔案位置，單獨放到 style 標籤中，但並沒有實現結果與樣式完全分類
  • 行內樣式表
    直接在標籤內插入 style 屬性，適合修改簡單樣式
  • 外聯樣式表
    單獨寫到css檔案中再引入到HTML檔案中，在HTML中，使用link 標籤引入檔案
<link rel="stylesheet" href="css路徑">

綜合案例（冬季敷面膜）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>冬天如何敷面膜效果更好？</title>
		<style>
			body {
				font:16px/28px "微軟雅黑";
			}
			h1 {
				font-weight: 400;
				text-align: center;
			}
			a {
				text-decoration: none;
			}
			.gray {
				color: #888;
				font-size: 12px;
				text-align: center;
			}
			.search {
				color: #666;
				width: 170px;
			}
			p {
				/*首行縮排兩個字元*/
				text-indent: 2em;
			}
			.pic {
				text-align: center;
			}
			.footer {
				color: #888888;
			}
		</style>
	</head>
	<body>
		<h1>冬天如何敷面膜效果更好？</h1>
		<div class ="gray">2016年12月23日 07:00 <a href="http://www.weather.com.cn/" >中國天氣網</a>
			<input type="text" value="請輸入關鍵字搜尋"/>  <button>搜尋</button>
		</div>
		<hr>
		<p>雖然是寒冷的冬季，可是想要皮膚好，面膜不能少哦！可是，相比其他季節，冬季護膚顯得更為艱難，如何才能使面膜發揮最大功效呢？</p>
		<p class="pic">
			<img src="pic.jpg" alt = ""/>
		</p>
		<h4>1.臉部一定要溼潤</h4>
	<p>有多少人是洗完臉後擦乾再敷面膜的呀！小編要殘忍地告訴你，這種方法是錯的。最好在皮膚還溼潤的情況下敷面膜，也可以在乾燥的臉上拍些爽膚水再敷。<br>
	原因：溼潤的皮膚更能吸收水分和營養，因此在徹底清潔臉部後趁其還溼潤的時候就應該把面膜敷上。</p>
	<h4>2.敷完面膜馬上塗面霜或乳液</h4>
	<p>敷面膜後需馬上塗上面霜，以鎖住水分和精華。<br>
	原因：敷完面膜後皮膚呈現的是最好的保溼狀態，但如果認為這樣就算大功告成就大錯特錯了，剛敷完面膜後水分和精華還沒被皮膚完全吸收，
	如果直接暴露在空氣中會很快蒸發掉，因此敷完面膜後應該馬上塗上面霜，面霜可以將臉部剛剛從面膜中吸收的水分和精華鎖住，使保溼效果更加長久和明顯。</p>
	<h4>3.敷面膜不要太過頻繁</h4>
	<p>每週敷面膜次數和每次面膜在臉部停留的時間需控制，保溼效果才明顯。<br>
	原因：面膜一般都有使用的療程週期，如果每天都使用，皮膚會“吃不消”，效果反而不明顯。另外，冬季氣候乾燥，水分容易幹掉，
	一般面膜敷15-20分鐘為宜，面膜停留在臉部太久水分會蒸發，不但沒有保溼的效果，反而會蒸發臉部的水分。
	</p>
	<h4>4.蒸麵後敷更好</h4>
	<p>冬季可以用水蒸汽蒸麵或用蒸臉器蒸，這樣更利於吸收面膜的水分和精華。<br>
	原因：寒冬的時候氣溫低，毛孔處於收縮狀態，身體新陳代謝變慢，如果在敷面膜前用熱水將面膜加熱或者用水蒸氣蒸麵，
	這樣在敷面膜的時候不僅可以使臉部毛孔擴張還可以促進其血液迴圈，利於吸收面膜的水分和精華。
	</p>
	<p class="footer">標籤: 面膜&nbsp;&nbsp;效果&nbsp;&nbsp;水分&nbsp;&nbsp;臉部</p>
	</body>
</html>

結果顯示如下：
該圖片僅為部分截圖

相關文章