CSS基礎教程

時間 2019-11-09

標籤 css 基礎教程欄目 CSS 简体版

原文原文鏈接

CSS簡介

CSS概述

CSS指層疊樣式表（Cascading Style Sheets）
決定HTML元素如何顯示
內容與樣式分離
多個樣式定義可層疊爲一

層疊次序

瀏覽器缺省設置
外部樣式表
內部樣式表（位於 <head> 標籤內部）
內聯樣式（在 HTML 元素內部）

CSS基本語法

CSS語法結構

CSS高級語法

選擇器的分組

h1,h2,h3,h4,h5,h6 {
  color: green;
}

繼承

body  {
     font-family: Verdana, sans-serif;
}

<!-- 繼承body中的屬性 -->
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
}

<!-- 重寫從body中繼承的屬性 -->
p  {
     font-family: Times, "Times New Roman", serif;
}

派生選擇器

<!-- 只有h2標籤中的strong纔會是藍色-->
h2 strong {
     color: blue;
}

id選擇器

<!-- id選擇器 -->
#sidebar {
    border: 1px dotted #000;
}

<!-- 利用id建立派生選擇器 -->
#sidebar h2 {
    font-size: 1em;
}

類選擇器



<h1 class="center"></h1>



.fancy {
    color: #f60;
}

.fancy td {
    color: #f60;
}

td .fancy {
    color: #f60;
}

td.fancy {
    color: #f60;
}

屬性選擇器

[title]
{
    color:red;
}

[title=W3School]
{
    border:5px solid blue;
}

input[type="text"]
{
  width:150px;
}

CSS建立

外部樣式表

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

內部樣式表

<head>
<style type="text/css">
  p {margin-left: 20px;}
</style>
</head>

內聯樣式

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。