转载自https://www.yuque.com/books/share/ef380286-9a88-4f63-b6df-750cf65c1e48/mgpg0f"
1.CSS简介
CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
- CSS 样式表极大地提高了工作效率
2.CSS基础语法
- CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明
- 每条声明由一个属性和一个值组成
- 选择器 { 属性名:属性值;属性名:属性值….}
- 由多组属性名和属性值组成,而且每一组属性名和属性值之间用分号隔开
selector {declaration1; declaration2; ... declarationN } //选择器{属性名: 属性值} selector {property: value} // 案例分析: h1 {color:red; font-size:14px;}
3.CSS引入方式
行内式
- 直接写在标签内,通过标签属性style引入;
- <开始标签 style = "属性名:属性值"> 内容 </ 结束标签>
<div style="color:red;">我是div元素</div>
内嵌式
- 将css代码写在style元素内,通过css选择器来选择html元素,将css样式添加给这个元素;
<style> div{color:red;} </style> <div>div1</div> <div>div1</div>
外链式
- 将css代码单独放在一个css文件中,再通过link标签将这个css文件引入到html页面中;
<link rel="stylesheet" href="css.css" type="text/css">
导入式
- 引入一个单独的css文件
- 在style元素或者link样式中;
- 它既不是html标签,也不是css样式;
- 它一条声明语句;
<style> @import "index.css"; </style>
4.外链式和导入式的差别(面试题)
- link和@import虽然都是引入外部的css文件,但是他们是由天差地别的区别的;
- link是html标签,@import完全是css提供的方式,要写在css文件或者style标签中;
- 他们的加载顺序也是有区别的,当一个页面被加载的时候,link引用的css文件会被同时加载,而@import引入的css文件会等页面全部下载完后再加载;
- 当使用javascript控制DOM去改变css样式的时候,只能使用link标签,因为@import是不能被DOM控制的;
5.CSS颜色设置
颜色的三种表示方式
- 十六进制颜色:十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
- RGB颜色:RGB 颜色值是这样规定的:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)
- 颜色的名称:例如: white,red,black等等;
RGBA的作用
- RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道, 它规定了对象的不透明度,alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。
常用的颜色
- 黑色: #000 、 rgb(0,0,0,)、black
- 白色: #fff、rgb(255,255,255)、white
6.CSS样式之Font文字设置
CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)
- font 复合样式 font-style | font-weight | font-size | line-height | font-family
- 字体风格: font-style
- 字体粗细: font-weight
- 字体大小: font-size
- 字体系列: font-family
7.CSS样式之Text文本设置
CSS文本属性可定义文本的外观,通过文本属性,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。
- 文本颜色: color
- 字符间距 : letter-spacing
- 设置行高: line-height
- 文本对齐方式: text-align
- 文本修饰: text-decoration
- 文本缩进: text-indent ( em缩进字符)
- 文本阴影: text-shadow
- 文本转换 : text-transform
- 设置元素的垂直对齐:vertical-align
- 设置元素中空白的处理方式: white-space
- 设置字间距 :word-spacing