Topic 1 ：CSS的第一个书写方式 ：
CSS不属于标签；
css的一个小案例：
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS体验</title>
<!----设置为css的纯文本模式----->
<style type="text/css">
p{color:green; font-size:40px; font-family:"宋体"; text-align: center;}
h1{text-align: center;}
</style>
</head>
<body>
<h1>七步诗</h1>
<p>
煮豆燃豆萁，豆在釜中泣。<br>
本是同根生，相煎何太急。
</p>
</body>
</html>
Topic 2 ：文字控制三属性：
颜色 -- color
字号 --font-size
字体 --font-family
文字加粗 --font-weight：bold（100,200,300....） -- bold就等于700
内容对齐属性 --text-align：left|center|right
Topic 3 ：实体化三属性：
实体化三属性虽然简单，但是真的很重要，兼容性好不好，css学的好不好，全都体现在实体化三属性是否运用得当
宽度 -- width
高度 -- height
背景色 --background
总结：在css2.0阶段，所有标签都是矩形，如果出现了非矩形的标签需要切图制作
Topic 4 ：显示模式：
div：大容器、大盒子。通常用作网页的布局和排版，结构的搭建；内部可以存放任何标签、任何内容。
span：小容器、小盒子、通常存放特殊效果的文字或小图标、小图片等等。
就是盒子在页面中的显示方式
所有html标签按显示模式划分为两类：块级标签和行内标签
块级标签：最具代表性的标签就是div。特点：独占一行，可以设置宽高并能生效
行内标签：最具代表性的标签就是span。特点：一行可以共存多个，可以设置宽高但是不生效，自身尺寸受内容的控制。行内块（由css制造出来的显示模式） -- inline-block；特点：既有块级标签的优点（成功设置宽高）又有行内标签的优点（一行可以共存多个）
/*
div是块状标签 span是行内标签 二者可以相互转化
还有一种显示模式就是 行内块 inline-block
display:none;不占位置隐藏
visibility:hidden; 占位置隐藏；
*/
编写这样的网页：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>显示模式</title>
<style typ="css/text">
/*
div是块状标签 span是行内标签 二者可以相互转化
还有一种显示模式就是 行内块 inline-block
display:none;不占位置隐藏
visibility:hidden; 占位置隐藏；
*/
div{width:500px; height:300px; background:red; display:inline-block; /*display:none;*/ visibility:hidden; }
span{width:300px; height:200px; background:green; display:inline-block; }
</style>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
</body>
</html>
Topic 5 ：css的书写模式：
行内式：
写法：在标签身上添加style这个html属性，style=“css键值对”
1 <div style="width:300px; height:300px; background:pink;"></div> |
注意：行内式没有实现结构与样式分离，不推荐前台工作人员使用，一般都是后台开发人员css比较薄弱，比较习惯这种行内式
内嵌式：
我们刚开始介绍的就是这种写法；
将css嵌入到html页面
结构与样式实现半分离
外链式：
前台工作人员最常用的书写方式。外部链接式才是实现了真正的结构与样式分离
代码示例 ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>外链式测试</title>
<link type="text/css" rel="stylesheet" href="3.3.css" />
</head>
<body>
<div>测试一下外链式</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
div{background: red; }Topic 5 ：选择器：
选择器在定义的时候要注意：
规则为：不能出现中文；不能使用特殊符号；不能以数字开头，可以以数字结尾
标签选择器： 就是对应的标签
id选择器： #
类选择器： .
通配符选择器 *（选中所有的标签包括废标签） 它的针对性最低 所以权重最低 （开发中就不用他了 浏览器要执行时间长）
注意：
Id选择器权重大于类选择器大于标签选择器
谁针对性高谁优先生效 所以行内属性权重最高
！important 提权 -- 可以将权重提高到最高
！important书写在键值对分号之前
代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css" >
#id{background: red; }
.class{background: green; }
div{background: pink!important; }
</style>
</head>
<body>
<div id="id" class="class" style="background: orange;">选择器权重比较</div>
</body>
</html>
Topic 5 ：我们写一个简单的百度：
网页示例如下：
代码示例如下：
注意：
我们都是用div来布局
我们h1都是默认写公司的logo
我们都把导航的class命名为nav
我们用btn来表示按钮的class
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<style type="text/css">
/*
注意：
我们都是用div来布局
我们h1都是默认写公司的logo
我们都把导航的class命名为nav
我们用btn来表示按钮的class
*/
h1{text-align:center; }
.nav{text-align:center; }
.nav.span{font-weight:bold; }
.search{text-align:center; }
.text{width:650px; height:50px; }
.btn{ width:100px;height:50px; }
</style>
</head>
<body>
<div>
<h1><img src="../image/baidulogo.jpg" width="270px" height="129px"/></h1>
</div>
<div class="nav">
<a href="#">新 闻</a> <span>网 页</span> <a href="#">贴 吧</a> <a href="#">知 道</a> <a href="#">音 乐</a> <a href="#">图 片</a> <a href="#">视 频</a> <a href="#">地 图</a>
</div>
<div class="search"><br>
<input type="text" class="text" />
<input type="button" value="百度一下" class="btn"/>
</div>
</body>
</html>
注意：
HTML中不认识回车只认识标签；
空格只认识一个；
所以回车是<br/>;
空格是 : " "