1.CSS 初步认识
web 标准
w3c
结构 xhtml table p hr br td img a
表现 CSS
CSS 最大的好处 就是让 结构和表现 实现了分离
CSS 就是层叠样式表
所以我们为什么要学习CSS
注意： 以后的代码标签的属性值，就全部放到 CSS里面了。
<table width=500>
<table>
2.CSS 语法规范
格式： 选择器 { 属性： 值；}
例如： p{color：red；}
解析：
选择器：说到底目的是 选定某个标签用的。（给谁改样式）
几点要求：
1.首先还是采取键值对的格式，但是，属性和值之间用冒号隔开。
2.每个键值对 结束用分号表示。
3.键值对都是包含在一对大括号内的。
4.键值对可以有多组。（用分号隔开）
5.font-size:12px; 字体大小用font-size 一般情况下所有数字带单位（px）
0除外 0后面不要跟单位。
3.CSS的位置分类
1.行内样式表
行内样式表写在标签内部。格式如下：
<p style=” color:red ;”></p>
这种情况尽量少用。一般适合于很少情况下。或者为了提高权重，因为行内样式表的权重最高。
2.内嵌样式表
内嵌样式表 写在html文件内，放在<head></head> 之间 ，几乎都是贴着</head>上方
格式如下：
<style type=”text/css”>
p{color:red;}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{font-size:12px; color:red;}
div{font-size:14px; color:#03C;}
</style>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<div> </div>
<div> </div>
<ul> </ul>
<dl></dl>
</body>
</html>
3.外部样式表
外部样式表写在站点内部。单独新建一个CSS 文件 （css文件的后缀名是.CSS）
可以通过 链接 或者 导入的方式 进入到 html 页面中。
第一链接方式：
<title>无标题文档</title> <link rel="stylesheet" href="link.css" type="text/css" /> </head>
link这个语句也是放到 </head> 的上方
好处：
1. 页面的加载速度快
2. 可以控制多个页面
3. 统一修改方便。
第二 导入样式表 （相对较少，不提倡用）
是把一个CSS 文件 导入的到另外一个CSS 文件中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>规范</title> <style type="text/css"> @import url(link.css); </style> </head> <body> <p></p> <p></p> <p></p> <div></div> <div></div> <ul></ul> <dl></dl> </body> </html>
1. 行内样式表
权重最高 但是只能控制一个标签样式
2. 内嵌样式表
权重其次 但是可以控制整个页面 样式
3.外部样式表 （链接式 导入式）
权重最低 但是可控制 整个站点（网站）的文件样式
4.网页显示模式
不同元素有不同的显示方式
1.块级显示模式
代表： div p li ul ol dl ...
特点:
1. 自己单独占一行 （比较霸道） 自上而下 显示
2. 可以设置高度和宽度
ps： 给盒子指定了 宽 高 背景之后 就可以显示实体 ，我们称之为 实体化。
2.行内显示模式
代表：span font b i em a ....
特点：
1. 一行内显示。自左往右显示。
2. 不能设置宽和高。
3.行内块显示模式
没有标签是这种显示模式。
先空着
给标签使用 : display:inline-block; 转换成行内块显示模式。
特点：既有行内 一行内显示 又有 块级的宽和高。
5.显示模式之间的相互转换
块级显示模式可以转换成行内显示模式： display 显示 display: inline;
行内显示模式转化为 块级显示元素： dispaly:block;
6.Css 选择器（选择符）分类
css 基础选择器
css 复合选择器
先看基础选择器：
1.类选择器 以“点” . 来定义 用 class 来引用
注意：
1.必须以 点 开头 不能省略。
2.后面类的名字 不要用 标签名 不要以数字开头 更不能纯数字。
3.上面定义，下面使用， class=”类名” class=”lan”
font-weight:bold css 字体加粗 bold = 700 等价
2.ID选择器 以 # 来定义 用 id 来引用
类选择器和id选择器的区别
1.class 选择器 多次使用 没有限制
2.id 选择器 用且仅用一次 唯一的
id 要比 class 执行速度快很多
3.标签选择器
注意：CSS写法
text-align:center 文本居中对齐
text-indent:2em; 首行缩进2个字
em 是一个相对单位 1em 就是一个字的距离
line-height: 25px; 行高
letter-spacing:1px 字间距
7.CSS 层叠性 继承性 优先级
1.层叠性
CSS 层叠样式表
层叠性： 就是后面的标签样式会覆盖原先标签样式。（后来居上）远亲不如近邻 优先执行最近的标签样式青出于蓝而胜于蓝
2.继承性
龙生龙 凤生风 老鼠生的孩子会打洞 子级标签会大部分继承父级标签的样式。（一般文字元素的样式都会继承）
3.优先级
外部样式表 < 内嵌样式表 < 行内样式表
标签选择器< 类选择器 < id 选择器 < 行内样式表
1 10 100 1000
class 里面可以放多个类名：
格式是： class=”类名1 类名2”
版权之类的符号： 必须用font-family:Arial； 特殊声明
倾斜 em 改成正常字体 ： font-style:normal
加粗 strong 改成正常字体 font-weight：normal；
转载请注明出处