前端开发基础入门篇——CSS基本属性
1. 什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)。是一种用来表现HTML的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。样式定义如何显示 HTML 元素。
2. 如何css的引入？
内联样式：将css样式写在标签的style属性中；
内部样式：将css样式写在<style>标签；
引入外部样式：通过<link>元素引入外部的一个css文件；
导入外部样式：在<style>元素中，使用@import导入一个外部的css文件。
3. CSS语法
选择器是你需要改变样式的 HTML 元素标签。CSS声明总是以分号(;)结束，声明总以大括号({})括起来，声明是你要改的样式，每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute），每个属性有一个值。属性和值被冒号分开。
3. 常用CSS选择器
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS 中 id 选择器以 "#" 来定义。
class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号定义。
4. CSS常用属性
CSS 背景属性
用于定义HTML元素的背景。CSS 属性常用定义背景效果:
| 属性 | 描述 |
|---|---|
| background | 简写属性。将背景属性设置在一个声明中。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 设置图像背景。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
CSS 文本属性
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
备注：颜色属性（color）的定义方式: a. 十六进制值。 如: ＃000000；b. RGB值 。 如: RGB(255,0,0)；c. 颜色的名称。 如: red。
文本排列属性（text-align）是用来设置文本的水平对齐方式。文本可居中（center）、左对齐（left）、右对齐（right）、两端对齐（justify）。
CSS 字体属性
| 属性 | 描述 |
|---|---|
| font | 简写属性。在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-weight | 指定字体的粗细。 |
CSS 链接属性
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。四个链接状态是：
CSS列表属性
1）a:link：未访问过的链接。
2）a:visited：用户已访问过的链接。
3）a:hover：当用户鼠标放在链接上时。
4）a:active：链接被点击的那一刻。
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图像设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
HTML中，有两种类型的列表：
1）无序列表 ：列表项标记用特殊图形（如小黑点、小方框等）
2）有序列表 ：列表项的标记有数字或字母
- 点赞
- 收藏
- 关注作者
评论（0）