基础
# css基础
CSS的主要使用场景就是美化网页，布局页面 样式表
# 语法规范
选择器 + 说明
<style>
p{
color:red;
font-size:12px
}
</style>
<body>
<p>文本</p>
</body>
2
3
4
5
6
7
8
9
10
# css代码风格
- 展开风格
h3 {
color: red;
font-size: 20px;
}
2
3
4
样式大小写
空格规范 键值对冒号后保留一个空格
选择器和大括号后保留一个空格
# 基础选择器
# 标签选择器
HTML标签名直接作为选择器
h1 {
}
2
3
优点：能快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部的当前标签
# 类选择器
语法
比较常用 类名可以是数字、字母、下划线不能以数字开头
.类名 {
键值对
}
2
3
<style>
.red {
color: red;
}
</style>
<div class="red">
2
3
4
5
6
一个标签可以有多个类名
<div class="big small"></div>
有简化代码的作用
# ID选择器
语法
#id名 {
键值对
}
<div id="onename">
2
3
4
id是唯一的 一般用于页面唯一性的元素上
# 通配符选择器
* 代表所有的标签
一般用于清楚页面标签元素的内外边距 特殊使用
# 字体属性
CSS Fonts
# 字体系列
font-family
//建议使用系统自带的字体 多个单词用单引号包裹起来
body {
font-family: 'Microsoft YaHei','Times New Roman';
}
2
3
4
# 字体系列
sans-serif
无衬线字体 ， 文字笔画粗细均匀 并且首尾无装饰
serif
衬线字体， 文字笔画粗细不均 并且首位有笔锋修饰
monospace
等宽字体， 每个字母或文字的宽度相等
# 字体大小
font-size: 20px
body {
font-size: 20px;
}
/* 标题标签 需要单独指定大小 */
h2 {
font-size: 20px;
}
2
3
4
5
6
7
# 字体粗细
font-weight
.blod {
font-weight: 700;
}
400:normal 700:blod
2
3
4
# 字体样式
font-style
normal 正常 italic 倾斜
em {
font-style: normal;
}
2
3
# 字体复合属性
div {
/* font: font-style font-weigth font-size/height font-family
必须按照顺序 后面两个属性不能省略（size、family）
*/
font: italic 700 20px 'Microsoft YaHei'
}
2
3
4
5
6
# 文本属性
# 文本颜色
color
div {
color: red;
/*
预定义 red
十六进制 #ff0000
RGB (255,255,255)
*/
}
2
3
4
5
6
7
8
# 对齐文本
text-align : left center right
h1 {
text-align: center;
//本质上是让盒子中的文字居中对齐
}
2
3
4
# 装饰文本
text-decoration : none underline overline line-through
a {
text-decoration: none;
}
2
3
# 文本缩进
text-indent
p {
text-indent: 20px;
text-indent: 2em;
}
2
3
4
em是一个相对单位，就是当前文字的大小
# 行间距
text-height
p {
line-height: 20px;
}
2
3
行间距包括文本的高度+上下间距
上一行的最上沿到文字的最下沿 因为上下间距是相等的
# CSS引入方式
# 内部样式表
内嵌样式表 是写到 html 页面内部 ，是将所有的CSS代码抽取出来，单独放到
<style>标签中
<html>
<head>
<style>
//内部样式表
</style>
</head>
<body>
<div>
...
</div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
# 行内样式表
内联样式表 是在元素标签内部的 style 属性中设定CSS样式，使用于修改简单的样式
<div style="color: red; font-size= 20px;">
</div>
2
3
# 外部样式表
适用于样式较多的情况 ，样式单独写到CSS文件中，之后把css文件引入到HTML页面中使用
<head>
<link rel="stylesheet" href="URL">
</head>
2
3
引入样式表