CSS 入门

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

运行结果：

图片描述

实例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"选择器。

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基础

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>

运行结果：

图片描述

总结

本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。
你已经学会了如何使用CSS来添加背景、文字样式、以及链接样式，并定义列表样式。
如果需要更多CSS的信息，请关注我，我会持续更新。

CSS 入门

一、CSS简介

1.什么是css

2.CSS语法

实例1：

运行结果：

实例2：

运行结果：

3.id和class选择器

id选择器实例：

运行结果：

class选择器实例：

运行结果：

二、CSS基础

1.文本

2.字体

3.链接

4.列表样式（ul）

实例

运行结果：

总结

酷酷的波

引用和评论

js面向对象编程

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

Jerry和您聊聊Chrome开发者工具