CSS.jpg
CSS让很多HTML标签下岗了，让我们看一下认识这些新的方式和废弃的方式。
| No. | 作用 | CSS | 废弃方式 |
|---|---|---|---|
| 1 | 字体颜色 | <span style="color:颜色值;"> |
<font color="颜色值"> |
| 2 | 字体大小 | <span style="font-size:像素;"> |
<font size="1~7"> |
| 3 | 字体 | <span style="font-family:字体名;"> |
<font face="字体名"> |
| 4 | 粗体 | <span style="font-weight:bold;"> |
<b> |
| 5 | 斜体 | <span style="font-style:italic;"> |
<i> |
| 6 | 下划线 | <span style="text-decoration:underline;"> |
<u> |
| 7 | 文本对齐 | text-align: center |
<center> |
| 8 | 宽 | width |
img等属性width
|
| 9 | 高 | height |
img等属性height
|
display是CSS非常重要的概念，请童鞋们记住他们的区别区别：
display |
换行 | 设置宽高 |
|---|---|---|
inline |
共享一行 |
width height不起作用 |
block |
独占一行 |
width height起作用 |
inline-block |
共享一行 |
width height起作用 |
CSS内联样式
CSS在标签里面加上属性style="CSS属性名1:CSS属性值1;CSS属性名2:CSS属性值2;"
CSS内部样式表
两步把内联样式改成内部样式。
- 在
head中加上style标签。 - 把HTML中
style属性值写入style标签中。注意选择使用合适的选择器。
CSS外部样式表
把CSS从style标签移除HTML
- 创建文件style.css
- 把style标签CSS代码剪切到style.css
- 删除HTML的style标签
- 把style.css链接到HTML
在head标签中加入link标签。
<link rel="stylesheet" href="css/style.css">注意：
1. rel="stylesheet"不能缺少
2. href的值是CSS文件路径
选择器
什么是选择器？
选择标签/元素的东西。
CSS语法
选择器{
CSS属性1:CSS属性值1;
CSS属性2:CSS属性值2;
}
选择器
1. 标签/元素选择器
- 写法：直接使用标签名
- 作用：把所有相同标签的元素选择出来
2. class/类选择器
- 写法：
.类名 - 作用：把使用类名的元素选择出来
- 注意：类选择器可以在不同标签中使用。
类名命名规则：
- 必须是字母、数字、下划线、中划线组成。（不能是中文、不能使用* \ # @ /）
- 不能数字开头
3. ID选择器
- 写法：#ID名
- 作用：把使用ID名的元素选择出来。
- 注意：只对一个标签使用。
ID命名规则：
- 必须是字母、数字、下划线、中划线组成。（不能是中文、不能使用* \ # @ /）
- 不能数字开头.
4. 伪类
:hover
- 写法：
选择器:hover - 作用：不做选择的效果，只能在鼠标放在已经选择的元素上显示效果。
*注意：一般与其他选择器组合使用。
