文章目录
为什么需要CSS样式表？
HTML标签的外观样式比较单一
颜色只有黑白
字体类型和大小无变化
样式表的作用相当于华丽的衣服
样式表能实现内容与样式的分离，方便团队开发
一、样式表的基本语法
- 样式表的基本结构
格式：
<style>
关键词 {属性名:属性值;属性名2:属性值2...}
</style>
把样式表给共享出来
<style>
.类名 {属性名:属性值...}
</style>
<STYLE type="text/css">
P {color:red;font-size:30px;font-family:隶书;}
......
</STYLE>
- 样式规则
P {color:red;font-size:30px;font-family:隶书;}
二、常用的样式属性
1、文本属性
| 文本属性 | 说明 |
|---|---|
| fontsize | 字体大小 |
| font-family | 字体类型 |
| font-style | 字体样式 |
| color | 设置或检索文本的颜色 |
| text-align | 文本对齐 |
2、背景属性
| 背景属性 | 说明 |
|---|---|
| background-color | 设置背景颜色 |
| background-image | 设置背景图像 |
| background-repeat | 设置一个指定的图像如何被重复可取值repeat-x、repeat、no-repeat、repeat-y |
3、行内（嵌入）样式表
样式表的修饰只针对某行来说的
格式：
<开始标签 style="属性1:属性值1;属性2:属性值2;..."></结束标签>
4、外部样式表文件
使用外部样式表文件样式表可以让一个网站中多个页面的样式保持一致。
根据样式文件与网页的关联方式又分为：
- 链接（LINK）外部样式
使用LINK（链接）标签
<HEAD>
<LINK href="newsyle.css"rel="stylesheet" type="text/css">
</HEAD>
- 导入（@import）外部样式
<HEAD>
<STYLE TYPE="text/css">
@import"newstyle.css";
</STYLE>
</HEAD>