爱站程序员基地
1. CSS简介
- css是层叠样式表(Cascading Style Sheets)的缩写
- css可以用来为网页创建样式表，通过样式表可以对网页进行装饰
- 所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的
- 而css就可以分别为网页的各个层次设置样式
- 总之，css用来设置网页中元素的样式
2. CSS编写位置
2.1 内联样式
使用css修改元素的样式的第一种方式是，内联样式，也叫行内样式
特点：
- 在标签内部通过style属性来设置元素的样式
缺点：
- 使用内联样式，只能对一个标签生效
- 希望影响到多个元素时必须在每个元素中复制一遍
- 当样式需要发生改变时，每个样式都需要改变
注意：开发中绝不推荐使用内联样式
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title></head><body><!-- 第一种方式：内联样式(行内样式) --><!-- 字体颜色设置为红色，像素设置为60px --><p style=\"color:red; font: size 60px;\">今天天气真不错</p></body></html>
2.2 内部样式表
使用css修改元素的样式的第二种方式是，内部样式表
特点：
- 将样式编写到head的style标签中，通过css的选择器选中元素并为其设置各种样式
- 可以同时为多个标签设置样式，修改时只需修改一处
- 注意：style标签中的语法为css语法，不再是html语法
缺点：
- 内部样式只能对一个网页其作用，其内容不能跨网页复用
注意：开发中不经常使用内部样式表，但为了方便举例，文章中多使用这一方式
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>p{/* 设置p标签的颜色为绿色，大小为60px */color:green;font: size 60px;;}</style></head><body></body></html>
2.3 外部样式表
使用css修改元素的样式的第三种方式是，外部样式表
特点：
- 可以将css样式编写到一个外部css文件中，然后通过head的link标签引入外部的css文件
- 这代表着该样式可以在不同页面间进行复用
- 这种方式可以使用浏览器的缓存机制，加快网页的加载速度
注意：开发中推荐使用这种方式
/*该文件命名为style01.css*/p{color:red;font: size 70px;}
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><!-- 使用link标签，填入css文件地址 --><link rel=\"stylesheet\" href=\"style01.css\"></head><body><p>今天天气真不错！</p></body></html>
3. CSS语法形式
css的基本语法有：选择器和声明块
选择器：
- 通过选择器可以选中页面中的指定元素，比如p的作用就是选中页面中的所有p
p{}
声明块：
-
通过声明块来指定为元素设置的样式
-
声明块由一个个声明组成
-
声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以’ : ‘连接，以’ ; \’结尾
color:red;font: size 70px;
