javaEE 初阶 — CSS 的 基本语法 与 引入方式
文章目录
- 1. 基本语法规范
- 2. 三种引入方式
1. 基本语法规范
CSS 的基本语法规范是由 选择器 和 若干个声明 组成的。
选择器选中一个元素之后，这些属性都是针对于这个元素展开的。
先来看一个没有 CSS 的效果。
<body><p>这是一个段落</p>
</body>
可以看到此时只是显示出了内容，并没有什么特殊的效果，接下来我们引入 CSS代码。
这里的 style 标签可以放到任意位置，推荐的位置是 head 标签中。
<body><style>p {color: red;}</style><p>这是一个段落</p>
</body>
上述 style 标签里的 p 标签就是一个选择器，它所描述的就是当前代码中所有的 p 标签。
大括号里面的内容就是要针对这所有的 p 标签设置成什么样的属性。
上述的属性就是将字体颜色设置成 红色。
大括号里的 CSS 属性可以是一个或者多个，每个属性都是一个键值对，
键和值之间使用 : 分割。键值对之间 ; 分割。每个键值对可以独占一行，也可以不独占一行。
下面来演示多个属性
<body><style>p {color: red;font-size: 40px;}</style><p>这是一个段落</p>
</body>
上述的 font-size 属性就是将字体大小设置为 40像素 。
2. 三种引入方式
1、内部样式
使用 style 标签，直接把 CSS 写到 html 文件当中，此时的 style 标签可以放到任意位置，一般建议的是放到 head 标签中。
这个方式在上述的 基础语法规范演示过了，下面不再演示。
2、内联样式
使用 style 属性针对指定的元素设置样式。（此时不需要写选择器，直接写属性键值对）
这个时候的样式只针对当前的元素有效。
<body><p style="color:green; font-size: 40px;">这是一个段落</p><p>这是另一个段落</p>
</body>
上述代码里的属性只针对第一个 p 标签有效，对于第二个 p 标签无效。
当 内部样式 与 内联样式 冲突时，内联样式优先。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我真帅</title><style>p{color: red;}</style></head>
<body><p style="color:green; font-size: 40px;">这是一个段落</p><p>这是另一个段落</p>
</body>
</html>
可以看到内部样式只对第二个 p 标签生效。
3、外部样式
把 CSS 文件单独作为一个**.css文件**，再通过 link 属性让 html 引入该 css 文件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我真帅</title>
</head>
<body><p>这是一个段落</p><p>这是另一个段落</p>
</body>
</html>
以下是 .css 文件，需要注意的是如果没有通过 link 属性引入，是不会起到作用的。
上述就是一个 .CSS文件。
可以看到在以上并没有使用 link 属性引入这个文件的时候，此时不会有任何的效果。
link 属性也是建议写到 head 标签里面。
<link rel="stylesheet" href="style.css">
href 里填写的就是你的 .CSS 文件名。
可以看到此时就起了效果。