为什分要使用CSS?
- 为了美化网页
- 标签的属性不能满足所有样式的需求
- 标签的属性使页面结构变得臃肿
- 为了实现结构与样式的相分离
什么是CSS?
css：(Cascading Style Sheets) 层叠样式表、级联样式表
样式表（三种）?
行内样式表（内联样式表）
格式 <开始标签 style="CSS的属性名A:CSS的属性值A;CSS的属性名B:CSS的属性值B;">
<h2 style="color: blue">我是头部标签二</h2>
特点
- 只能作用于单个的标签
- 没有实现结构与样式的相分离
内部样式表
格式：
<style>
//(写在<head>里面)
选择器{
CSS的属性名A:CSS的属性值A;
CSS的属性名B:CSS的属性值B;
</style>
特点：
- 只能作用域选择器相同的标签
- 部分实现了结构与样式的相分离
外部样式
格式
<head>
<link rel="stylesheet" href="./css/style.css" />
</head>
属性：rel:链接文件的类型 href:地址
特点：
- 作用于整个的站点
- 完全实现了结构与样式的相分离
css的属性（9种）
字体
字体大小font-size
- 普通的标签默认字体大小16px(像素)
- 一般用偶数，像素不低于12px
字体家族font-family
- 默认字体家族是宋体
- 属性值可以是汉字、英文、Unicode编码
字重属性 <b><strong>
- 默认字重是 (400=
normal) font-weight- 属性值可以是整百、英文。
bold=bolder=700
字体风格font-style
- 默认normal
- 属性值italic、oblique（斜体）
字体统一设置
font：倾斜 加粗 大小 家族
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
aside {
font: italic bolder 40px '黑体';
}
选择器
选择器：通过特定的符号选择指定的元素
CSS2选择器分类：
- 基础选择器：通配符选择器( { } )、标签选择器、类名选择器（.class*）、多类名选择器、ID选择器(#id)
- 复合选择器：并集选择器、交集选择器、子代选择器、后代选择器
- 伪类选择器：
:link :active :hover :visited
类名的命名规范：
- 见名知意
- 一般是英文、或者是英文+数字、或者是英文数字
外观属性(六种)
文本颜色 ：(color）
英文、rgb（0-255）、十六进制 （0~9 a~f） #rrggbb
<style>
h1 {
/* color: red; */
/* color: rgb(255, 255, 0); */
color: #000000;
}
</style>
首行缩进 ：（text-indent） 单位：em
<style>
.pro-1 {
text-indent: 2em;
}
</style>
文字间距 ：（letter-spacing）
<style>
aside {
letter-spacing:10px;
}
</style>
文本描述（text-decoration）
- 下划线 ：
underline - 上划线 ：
overline - 删除线：
line-through
<style>
#link {
font-size: 40px;
color: #ff3456;
/* text-decoration: underline; */
/* text-decoration: overline; */
text-decoration: line-through;
}
</style>
文本水平位置 (text-align）
- 文本内容相对于标签的水平位置
- 居左：
left - 居中：
center - 居右：
right
- 居左：
<style>
aside {
font-size: 40px;
text-align: right;
/* 宽高属性 width/height */
width: 800px;
height: 150px;
line-height: 200px;
}
</style>
文本垂直位置（line-height）
- 文本内容相对于标签的高度垂直位置
- 属性值小于高度值靠上，等于高度值居中，大于高度值靠下
<style>
aside {
line-height: 200px;
}
</style>
大小写转换（text-transform）
- capitalize 文本中的每个单词以大写字母开头
- lowercase 定义无大写字母，仅有小写字母
- text-transform:uppercase 定义无小写字母，仅有大写字母
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
