CSS, 是层叠样式表 (英文全称: Cascading Style Sheets) 是一种用来表现 html(标准通用标记语言的一个应用)或 xml(标准通用标记语言的一个子集)等文件样式的计算机语言.
CSS 具有以下特点:
1, 丰富的样式定义
CSS 提供了丰富的文档样式外观, 以及设置文本和背景属性的能力; 允许为任何元素创建边框, 以及元素边框与其他元素间的距离, 以及元素边框与元素内容间的距离; 允许随意改变文本的大小写方式, 修饰方式以及其他页面效果.
2, 易于使用和修改
CSS 可以将样式定义在 HTML 元素的 style 属性中, 也可以将其定义在 HTML 文档的 header 部分, 也可以将样式声明在一个专门的 CSS 文件中, 以供 HTML 页面引用. 总之, CSS 样式表可以将所有的样式声明统一存放, 进行统一管理.
3, 多页面应用
CSS 样式表可以单独存放在一个 CSS 文件中, 这样我们就可以在多个页面中使用同一个 CSS 样式表. CSS 样式表理论上不属于任何页面文件, 在任何页面文件中都可以将其引用. 这样就可以实现多个页面风格的统一.
4, 层叠
层叠就是对一个元素多次设置同一个样式, 这将使用最后一次设置的属性值. 例如对一个站点中的多个页面使用了同一套 CSS 样式表, 而某些页面中的某些元素想使用其他样式, 就可以针对这些样式单独定义一个样式表应用到页面中.
5, 页面压缩
在使用 HTML 定义页面效果的网站中, 往往需要大量或重复的表格和 font 元素形成各种规格的文字样式, 这样做的后果就是会产生大量的 HTML 标签, 从而使页面文件的大小增加.
而将样式的声明单独放到 CSS 样式表中, 可以大大的减小页面的体积, 这样在加载页面时使用的时间也会大大的减少. 另外, CSS 样式表的复用更大程序的缩减了页面的体积, 减少下载的时间.
接下来是 CSS 的一些基础知识:
一, 3 种引入方式:
1: 内联 在标签中引入样式
<标签名 ; 样式 2: 样式值 2></ 标签名>
2: 内嵌 在 head 标签中添加一个 style 标签
<head>
<style>
选择器{
样式 1: 样式值 1;
样式 2: 样式值 2;
- }
- </style>
- </head>
3: 外部引入 将样式放到 CSS 文件中, 然后用 link 标签在 head 标签中引入
<link href="xxx.css">
CSS 引入方式的优先级: 内联>内嵌>外部引入
二, 选择器(3 种):
1.id 选择器: 在标签中添加 id 属性
<标签名 id="id 值"></ 标签名>
注意: id 值不能重复
在 style 标签中
#id 值{
样式 1: 样式值 1;
样式 2: 样式值 2;
}
2.class 选择器: 在标签中添加 class 属性
<标签名 class="class 值"></ 标签名>
在 style 标签中
.class 值{
样式 1: 样式值 1;
样式 2: 样式值 2;
}
3. 元素选择器:
在 style 标签中
标签名{
样式 1: 样式值 1;
样式 2: 样式值 2;
}
选择器优先级 id>class > 元素选择器
三, 选择器关系: 1. 并列关系: 选择器 1, 选择器 2{样式 1: 样式值 1; 样式 2: 样式值 2;}2. 父子关系: 选择器 1 选择器 2{样式 1: 样式值 1; 样式 2: 样式值 2;}3. 兄弟关系: 选择器 1 + 选择器 2{样式 1: 样式值 1; 样式 2: 样式值 2;}四, 字体样式: font-family: 微软雅黑, Arial,Times New Roman;(字体类型, 微软雅黑, 一般不设置, 使用默认类型)
font-size:30px;(字体大小, 使用像素控制字体大小)font-weight:bold 加粗; lighter 加细;(字体粗细, 一般常用 bold 和 lighter, 也可使用数字控制)font-style:italic 斜体;(字体斜体)color:red 颜色 (颜色)五, 文本样式: text-decoration:line-through 删除线 underline 下划线 overline 顶划线 none 去除所有线 (可以用来去除 a 标签链接的自带下划线)text-transform:none 默认值, 无转换发生 uppercase 转换成大写 lowercase 转换成小写 capitalize 将每个英文单词的首字母转换成大写, 其余无转换发生 (空格隔开为一个英文单词)text-indent:2em;2em 代表缩进 2 个字符 px 代表缩进多少像素, 需要自己测量 text-align:center;left;right; 文本水平居中, 左对齐, 右对齐 line-height:30px; 行高, 自己设置六, 边框样式: border-width:10px; 边框的宽度 border-style:none; 无样式 solid; 实线 dashed; 虚线 dotted; 点线 double; 双线, 双线的宽度等于 border-width 的值 border-color:red; 定义边框的颜色边框样式需要三个属性同时存在, 简介的写法是: border:1px solid red; 局部边框样式: border-top:; 边框上面的线的样式 border-bottom 边框下面的线的样式 border-left 边框左边的线的样式 border-right 边框右边的线的样式
CSS 基础
来源: http://www.bubuko.com/infodetail-3421928.html