目录
一、CSS规则
- 书写位置:在<head>标签内,利用<style>标签(后面会学新的引入方式)
- 语法规则:选择器 {声明};
二、CSS基础选择器
1.标签选择器:为页面中某一类标签指定统一的CSS样式
标签名 {
属性1: 属性值1;
属性2: 属性值2;
}
2.类选择器:差异化选择不同的标签
/*样式点定义,结构类(class)调用*/
.类名 {
属性1: 属性值1;
属性2: 属性值2;
}
例子:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用类选择器画三个盒子</title>
<style>
.red {
/* 背景颜色 */
background-color:red;
}
.green {
background-color:green;
}
.box {
width: 150px;
height: 150px;
font-size: 35px;
}
</style>
</head>
<body>
<!-- 多类名:各类名中间用空格隔开 -->
<div class="red box">红色</div>
<div class="green box">绿色</div>
<div class="red box">红色</div>
</body>
</html>
3.id选择器:只能选择1个标签
/*样式#定义,结构id调用*/
#id名 {
属性1: 属性值1;
属性2: 属性值2;
}
4.通配符选择器:选取页面中所有元素(标签)
* {
属性1: 属性值1;
属性2: 属性值2;
}
三、CSS字体属性
1.font-family设置字体
font-family: ‘Microsoft YaHei’, Arial; /*优先使用第一种字体*/
2.font-size设置字体大小
属性值:
数字+px(如font-size: 16px;)
3.font-weight设置字体粗细
属性值:
- normal(相当于number=400)
- bold(相当于number=700)
- bolder
- lighter
- number(实际开发中,更提倡用数字)
4.font-style设置文本的风格
属性值:
- normal
- italic(浏览器会显示斜体的字体样式)
5.font字体连写
/* font:font-style font-weight font-size/line-height font-family */
<style>
body {
font: italic 700 16px 'Microsoft YaHei';
}
</style>
/* 不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性 */
四、CSS文本属性
1.color设置文本颜色
属性值表示:
- 预定义的颜色值:red,green,blue,…
- 十六进制:#FF0000,#FF6600,#29D724,…(常用)
- RGB代码:rgb(255,0,0),rgb(100%,0%,100%),…
2.text-align设置水平对齐方式
属性值:
- left(默认值,左对齐)
- center(居中对齐)
- right(右对齐)
3.text-decoration设置装饰线
属性值:
- none(默认值,没有装饰线)
- underline(下划线,链接a自带下划线)
- overline(上划线)
- line-through(删除线)
4.text-indent设置文本首行的缩进距离
属性值:
- 数字+px
- 数字+em(em是一个相对单位,就是当前元素1个文字的大小)
5.line-height设置行间距(行高)
属性值:
数字+px
五、CSS引入方式(三种样式表)
1.内部样式表(内嵌样式表)
在html页面内部写样式,将所有的CSS代码抽取出来,单独放到一个<style>标签中。
2.行内样式表(内联样式表)
在元素标签内部的style属性中设定CSS样式,适合修改简单样式。
3.外部样式表(外链式)
- 样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用。
引入步骤:
- 新建.css文件,把所有CSS代码放入该文件(只有样式没有标签)
- 在HTML页面中,使用<link>标签引入这个文件
<link rel=”stylesheet” href=”css文件路径”>
link属性 | 作用 |
rel | 定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。 |
href | 定义所链接外部样式表文件的URL。 |
六、Emmet语法
1.快速生成HTML结构语法
- 生成标签:直接输入标签名(如div),然后按Tab键
- 生成多个相同标签:加上*(如div*10),然后按Tab键
- 父子级关系的标签:加上>(如ul>li),然后按Tab键
- 兄弟关系的标签:用+(如div+p),然后按Tab键
- 生成带有类名的标签:标签.类名(标签默认为div,如p.gray),然后按Tab键
- 生成带有id名的标签:标签#id名,然后按Tab键
- 生成类名有顺序的标签:标签.类名$数字(如.demo$3),然后按Tab键
- 在生成的标签内部写内容:标签{内容},然后按Tab键
2.快速生成CSS样式语法
基本采取简写形式,如:
- w200+tab键生成width: 200px;
- lh26+tab键生成line-height: 26px;
- tac+tab键生成text-align: center;