CSS 入門

時間 2020-01-28

標籤 css 入門欄目 CSS 简体版

原文原文鏈接

1、CSS簡介

1.什麼是css

css指層疊樣式表（ascading Style Sheets）
樣式定義如何顯示HTML樣式
樣式一般儲存在樣式表中
外部樣式表能夠極大的提升工做效率
實際就是學習選擇器和css屬性

2.CSS語法

選擇器{屬性：屬性值;屬性：屬性值;}
div{color:blue;font-size:20px;}css

實例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實例</title>
<style>
body {background-color:red;}
h1   {font-size:40pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>
<body>
<h1>這個標題設置的大小爲 40 px</h1>
<h2>這個標題設置的顏色爲藍色：blue</h2>
<p>這個段落的左外邊距爲 50 像素：50px</p> 
</body>
</html>

運行結果：

實例2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實例2</title>
<style>
body {background-color:tan;}
h1   {color:maroon;font-size:20pt;}
hr   {color:navy;}
p    {font-size:11pt;margin-left:15px;}
a:link    {color:green;}
a:visited {color:yellow;}
a:hover   {color:black;}
a:active  {color:blue;}
</style>
</head>

<body>

<h1>這是標題</h1>
<hr>
<p>你能夠看到這個段落是被設定的 CSS 渲染的。</p>

<p><a href="#" 
target="_blank">這是一個連接</a></p>

</body>
</html>

運行結果：

3.id和class選擇器

若是你須要在HTML裏設置CSS樣式，你須要在元素中設置"id" 和 "class"選擇器。html

id選擇器實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>選擇器</title> 
<style>
#para{
    text-align:center;
    color:red;
} 
</style>
</head>

<body>
<p id="para">Hello World!</p>
<p>這個段落不受該樣式的影響。</p>
</body>
</html>

運行結果：

class選擇器實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>選擇器</title> 
<style>
.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">這個標題居中</h1>
<p class="center">這個段落居中。</p> 
</body>
</html>

運行結果：

2、CSS基礎

1.文本

color:#fff; 修飾字體顏色
text-align:left/center/right/justify 設置文本對齊
text-indent:2em; 設置文本縮進

2.字體

font-family:Microsoft YaHei; 改變字體樣式
font-size:14px; 修改文字大小
font-weight:blod; 字體加粗

3.連接

a:link - 正常，未訪問過的連接
a:visited - 用戶已訪問過的連接
a:hover - 當用戶鼠標放在連接上時
a:active - 連接被點擊的那一刻

4.列表樣式（ul）

無序列表 - 列表項標記用特殊圖形（如小黑點、小方框等）
有序列表 - 列表項的標記有數字或字母

使用css，能夠列出進一步的樣式，並可用圖形作列表項標記佈局

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>列表樣式</title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>無序列表實例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表實例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>