CSS 入门

yibawuqing

2019-06-27

关注关注

一、CSS简介

1.什么是css

css指层叠样式表（ascading Style Sheets）
样式定义如何显示HTML样式
样式通常储存在样式表中
外部样式表可以极大的提高工作效率
实际就是学习选择器和css属性

2.CSS语法

选择器{属性：属性值;属性：属性值;}
div{color:blue;font-size:20px;}

实例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>

运行结果：

CSS 入门

实例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>

运行结果：

CSS 入门

3.id和class选择器

如果你需要在HTML里设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

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>

运行结果：

CSS 入门

二、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>