CSS 层叠样式表
HTML的局限性
- html 满足不了设计者的需求
- 操作 html 属性不方便
- html 里面添加样式带来的无尽的臃肿和繁琐
CSS 网页的美容师
让我们的网页更加的丰富多彩 , 布局更加灵活自如
css 最大的贡献就是 : 让 html 从样式中脱离 , 实现了 html 专注去做结构呈现 .
理想中的结果 : 结构与样式相分离
CSS 初识
- 概念 : CSS (Cascading Style Sheets) , 通常称为 CSS 样式表或层叠样式表
- 作用 :
- 主要用于设置 HTML 页面中的文本内容 , 图片的外形 , 版面的布局和外观的样式等 .
- CSS 以 HTML 为基础 , 提供了丰富的功能 , 如字体 , 颜色, 背景的控制以及排版等 , 并且可以针对不同的浏览器设置不同的样式 .
引入 CSS 样式表
行内式 (内联样式)
<h1 style="color: red;">我是标题</h1>内部样式表
<head>
<style type="text/css">
div {
color: red;
font-size: 20px;
}
</style>
</head>注意 :
- style 标签一般位于 head 标签中 , 当然理论上他可以放在 html 文档的任何地方
type="text/css" 在 html5 中可以省略 .
只能控制当前的页面
外部样式表 (外链式)
<head>
<link rel="stylesheet" type="text/css" href="./path/test.css" />
</head>总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式 | 书写方便 , 权重高 | 没有实现样式与结构分离 | 较少 | 控制一个标签 |
| 内部样式 | 部分结构与样式分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式 | 完全实现结构与样式分离 | 需要引入 | 最多 | 控制整个站点 |
CSS 选择器
CSS 基础选择器
标签选择器
概念 : 标签选择器是指HTML标签名作为选择器 , 按标签名称分类 , 为页面中某一类标签指定统一的样式
标签名 { 属性名: 属性值; }作用 : 标签选择器 可以把某一类标签全部选择出来 , 比如所有的 div 标签
优点 : 是能快速为页面中同类型的标签统一样式
缺点 : 不能设计差异化样式
类选择器
<p class="类名">内容</p>/* 英文 . 进行标识,后面紧跟类名 */ .类名 { 属性名: 属性值; }优点 : 可以为元素对象定义单独或相同的样式 , 可以选择一个或多个标签
注意 :
- 长名称或词组可以使用中横线命名类名
- 不要用纯数字 , 中文等命名 , 尽量使用英文字母命名
id 选择器
<p id="id名">内容</p>/* id 选择器使用 # 标识, 后面紧跟id名 */ #id名 { 属性名: 属性值; }- 元素的 id 值是唯一的 , 只能对应于文档中某一个具体的元素
注意 : id 名不允许重复 , 类名则可以重复
通配符选择器
/* 通配符选择器使用 * 标识, 就是选择所有标签 */ * { 属性名: 属性值; }- 注意 : 会匹配页面所有元素 , 降低页面速度 , 不建议随便使用
CSS 字体样式
font 字体
font-size : 大小
用来设置字号
p { font-size: 20px; }注意 : chrome 浏览器的默认字体大小是 16px ; 但是考虑到浏览器兼容 , 一般会给 body 设置一个字体大小 .
font-family : 字体
p { font-famliy: "微软雅黑"; }网页中常用的字体有 宋体 , 微软雅黑 , 黑体等 .
可以同时指定多个字体 , 中间以逗号隔开 , 表示浏览器不支持第一个字体 , 则会尝试下一个 , 直到找到合适的字体 .
p { font-family: Arial, 'Microsoft Yahei', '微软雅黑'; }
注意 :
- 各种字体之间必须用英文的逗号隔开 ;
- 中文字体需要加引号 , 英文字体一般不需要加引号 , 设置多个字体时 , 英文必须在中文的前面 ;
- 如果字体包含空格 , # $等符号 , 则必须加 引号
- 尽量使用系统默认字体 , 保证在任何用户的浏览器中能够正确显示 .
font-weight: 粗细
p { font-weight: normal; }属性值 描述 normal 默认值 ( 不加粗的 ) bold 定义粗体 100 - 900 400 等同于 normal, 700等同于 bold
注意 : 平时更提倡使用 数字
font-styke: 字体风格
p { font-style: italic; }属性值 描述 normal 正常字体 italic 斜体
font : 综合设置字体样式
p {
font: font-style font-weight font-size/line-height font-family;
}- 使用 font 属性时 , 必须按照上面的书写顺序 , 不能更改顺序 , 各个属性用空格隔开
- 其中不需要设置的属性可以省略 (取默认值) , 但必须保留 font-size 和 font-family 属性 , 否则 font 将不起作用
CSS 外观属性
color : 文本颜色
p {
color: #29D794;
}取值范围如下
| 表示 | 属性值 |
|---|---|
| 预定义颜色值 | red, yellow, blue 等 |
| 十六进制 | #29D794 |
| RGB代码 | rgb(255, 0, 0); rgb(100%, 0%, 0%) |
text-align : 文本水平对齐方式
作用 : 用于设置文本内容的水平对齐
p { text-align: center; }-
属性值 说明 center 居中对齐 right 右对齐 left 左对齐 ( 默认 ) 注意 : 是让盒子里面的内容水平居中 , 而不是盒子水平居中 ;
line-height: 行间距
作用 : line-height 属性用于设置行间距 , 就是行与行之间的距离 , 即字符的垂直间距 , 一般称为行高 .
技巧 : 一般情况下 行间距比字号大7-8像素左右
p { line-height: 22px; }
text-indent: 首行缩进
p {
/* 1em = 一个字的宽度 */
text-indent: 2em;
}text-decoration 文本的装饰
text-decoration 通常用于给链接修改装饰效果
a {
text-decoration: none;
}| 属性值 | 描述 |
|---|---|
| none | 默认 , 定义标准文本 ( 取消下划线 ) |
| underline | 定义文本下划线 , 同样也是链接自带的 |
| overline | 定义文本上划线 , 基本不用 |
| line-through | 定义文本删除线 , 基本不用 |