CSS一点点入门
一、CSS基本概念
CSS全称为cascading stylesheets，中文是层叠样式表。既然是样式表就代表不是一种编程语言，是用来告诉浏览器如何指定样式、布局的。一般和html等标记语言配合使用。
二、结构
2.1、基本格式
选择器 {
属性1：值1；
属性2：值2：
…
}
注意的点：
- 属性和值之间要用分号隔开
- 每一个属性赋值都要以分号结束
- 最后一个属性可以不加分号，但是建议都加上养成一个好习惯
2.2、选择器的写法
< p class=“paragraph” id=“para1” > lorem < /p >
上面是一句HTML语句，那么选择器常用的可以有以下三种写法：
- 以标签作为选择器
- 以class属性值作为选择器，格式是 .属性值
- 以标签id作为选择器，格式是 #id值
三、添加CSS方式
3.1 外部样式表
CSS保存在一个后缀为.css的文件中。在HTML里使用 < link > 引用
3.2 内部样式表
不使用外部的.css文件，将CSS放在HTML中的< head >下的< style >里
格式：
<html> <head> ... <style> 在此处写CSS </style> </head> <body> ... </body></html>3.3 内联样式
仅影响一个元素，在HTML元素的style属性中添加。
不推荐此方法，后期维护代码很麻烦
四、 颜色
使用属性 color
颜色选择方式：
- 关键词：black, white,blue等颜色单词
- RGB：三原色，例如（255， 0， 0）
- 十六进制：例如 #ff0000
- HSL：色相、饱和度、亮度，例如（0， 100%， 50%）
- RGBA：在RGB的基础上加上了一个参数代表透明度，取值在[0,1]，0为完全透明，1为完全不透明。例如（255， 0， 0， 0.5）
- HSLA：在HSL的基础上加上了一个参数代表透明度，取值在[0,1]，0为完全透明，1为完全不透明。例如（0， 100%， 50%， 0.5）
五、 字体
属性格式：font-family:字体名，字体名，… ，样式
注：
- 若字体名由多个单词构成，需要整体用双引号括起来
- 若字体名有多个则具有优先级，在前面的优先级高，若找不到对应的字体则往后看剩下的字体名
样式：
sans-serif：无衬线
serif：有衬线
monospace：等宽字体
六、 盒子模型
6.1 元素
- content：可理解为一个图片或一段文字。
- border：边框
- padding：内边距，指的是content和border之间的距离
- margin：外边距，和外界元素接触的距离。当两个盒子相邻时，外边距不会相加而实选择两个中大的那个作为这两个盒子之间的距离（外边距合并）
6.2 margin
格式：
- 分别使用margin-top(bottom、right、left)指定上下左右的外边距
- margin:上值，右值，下值，左值 （顺时针指定）
- 若左右边距相等、上下边距相等 margin:左右值，上下值
- 若所有边距都相等 margin:边距值
- 若上下边距不相等、左右边距相等：margin:上值，左右值，下值
七、常用样式
7.1 列表
通常要设置序号的格式
| 属性 | 作用 |
|---|---|
| list-style | 设置列表序号的样式 |
| list-style-image | 用图片代替列表序号 |
7.2 按钮
| 选择器名称 | 作用 |
|---|---|
| button | 正常情况下的按钮样式 |
| button:hover | 鼠标移动到按钮上但未点击时的样式 |
| button:active | 点击按钮时的样式 |
7.3 超链接
| 选择器名称 | 作用 |
|---|---|
| a | 正常情况下的超链接样式 |
| a:hover | 鼠标移动到超链接上但未点击时的样式 |
| a:visited | 点击过超链接后的样式 |
去除超链接下划线属性 text-decoration: none
赞 (0)