实例参考：https://www.w3school.com.cn/example/csse_examples.asp

1.基础

1.1 简介

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

1.2 语法

h1 {color:red; font-size:14px;}

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;  #多个声明
  }

选择器分组

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

继承及其问题

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

body 的子元素都应该显示 Verdana 字体,这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd

派生选择器

li strong {
    font-style: italic;
    font-weight: normal;
  }

如果<strong> 标签是在<li> 里面就符合上面的规则，如果不是则不会，这里有个上下文关系。

id 选择器

id 选择器用 # 表示

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

#red {color:red;}
#green {color:green;}

id 选择器与派生选择器

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

类选择器

类选择器用 . 表示

.center {text-align: center}

属性选择器

属性选择器以 [ ] 表示

[title]
{
color:red;
}

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

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

创建样式表

插入样式表的方法有三种：

1.外部插入

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

mysqlstyle.css

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

2.内部样式表

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

3.内联样式表

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

4.多重样式表

多重样式，如果同时存在外部和内联，会取并集，相同的规则以内联的规则有优先。

2.样式

2.1 背景

2.1.1 背景色

p {background-color: gray; padding: 20px;}

2.1.2 背景图片

body {background-image: url(/i/eg_bg_04.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif);}
a.radio {background-image: url(/i/eg_bg_07.gif);}

2.1.3 背景重复

对背景图像进行平铺

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;  #repeat-x 和 repeat-y,no-repeat
  }

2.1.4 背景定位

可以利用 background-position 属性改变图像在背景中的位置。

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;   #  top、bottom、left、right 和 center
    background-position:50% 50%;  #  
    background-position:50px 100px; #
  }

2.1.5 背景关联

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed # fixed图像不会随着文字滚动而滚动，scroll 这个默认值则会。
  }

https://www.w3school.com.cn/css/css_background.asp 这里面有很多样例，拉到最底下。

2.2 文本

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

https://www.w3school.com.cn/css/css_text.asp

2.3 字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

https://www.w3school.com.cn/css/css_font.asp

2.4 链接

a:link - 普通的、未被访问的链接
    a:visited - 用户已访问的链接
    a:hover - 鼠标指针位于链接的上方
    a:active - 链接被点击的时刻

a:link {color:#FF0000;}     /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */

https://www.w3school.com.cn/css/css_link.asp

2.5 列表

https://www.w3school.com.cn/css/css_list.asp

<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>

<body>
<ul class="disc">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>

<ul class="circle">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>

<ul class="square">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>

<ul class="none">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>

</html>

2.6 表格

https://www.w3school.com.cn/css/css_table.asp

设置一个漂亮的表格

<html>
<head>
<style type="text/css">
#customers
  {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  width:100%;
  border-collapse:collapse;
  }

#customers td, #customers th 
  {
  font-size:1em;
  border:1px solid #98bf21;
  padding:3px 7px 2px 7px;
  }

#customers th 
  {
  font-size:1.1em;
  text-align:left;
  padding-top:5px;
  padding-bottom:4px;
  background-color:#A7C942;
  color:#ffffff;
  }

#customers tr.alt td 
  {
  color:#000000;
  background-color:#EAF2D3;
  }
</style>
</head>

<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>

<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>

<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>

<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>


</table>
</body>
</html>

2.7 轮廓

https://www.w3school.com.cn/css/css_outline.asp

CSS 基础(一)