設計師學習HTML/CSS之路-07

時間 2019-11-30

標籤設計師學習 html css 之路欄目 HTML 简体版

原文原文鏈接

不瞭解前端的UI不是好美工，如下是慕課網HTML+CSS基礎教程學習筆記，不廢話，Start!css

第7章 CSS樣式基本知識

7-1 內聯式css樣式，直接寫在現有的HTML標籤中

CSS樣式代碼插入的形式分3種：
1.內聯式：把CSS代碼直接寫在現有的html標籤中，以下代碼：html

這裏的文字是紅色，字號爲12px。前端

<p style="color:red;font-size:12px">
這裏的文字是紅色，字號爲12px。
</p>
複製代碼

css樣式要寫在style=""雙引號中，多條樣式代碼中間用分號隔開。bash

7-2 嵌入式CSS樣式，寫在當前文的文件中

嵌入式的優點在於能夠一對多修改樣式。
學習

嵌入式css樣式代碼寫在<style type="text/css">...</style>之間。
把須要帶有css樣式的文字放在<span></span>標籤之間。ui

<head>
 <style type="text/css">
 span{
    color:red;
    font-size:20px;
 }
 </style>
</head>
複製代碼

嵌入式css樣式必須寫在<style></style>之間，而且通常狀況下嵌入式css樣式寫在<head></head>之間。spa

7-3 外部式CSS樣式，寫在單獨的一個文件中

外部式css樣式是把css代碼寫在一個單獨的外部文件中管理。這個css樣式以「.css」爲擴展名，在<head>內使用<link>標籤。以下：code

<link href="h1.css" rel="stylesheet" type="text/css" />
複製代碼

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css樣式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <p>外部式css樣式是把<span>css代碼</span>寫在一個單獨的外部文件中管理。這個css樣式以「.css」爲擴展名。
   </P>
</body>
</html>
複製代碼

單獨外部文件以下：cdn

注意：
1. css樣式文件名稱以有意義的英文字母命名，如h1.css。<br>
2. 同嵌入式同樣，把須要帶有css樣式的文字放在<span></span>標籤之間。<br>
3. rel="stylesheet" type="text/css"是固定寫法。<br>
4. <link>標籤通常寫在<head>內。
複製代碼