CSS基础-01选择器和样式（id选择器、class选择器、内联
2022-06-11 本文已影响0人
玄德公笔记
1. 选择器
1.1 id 选择器
- 语法
用 "
#标签名" 定义
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">受id选择器影响</p>
<p>不受选择器影响</p>
</body>
</html>
-
显示结果
image.png
1.2 class 选择器
- 语法
用 "
元素.标签名" 定义
如：p.class1
不写元素表示所有
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-SONG</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
2. 样式
2.1 内联样式
- 作用
当个别元素需要使用特殊样式时
- 方法
在相关标签中加入样式属性。
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body style="background-color:red;">
<h2 style="background-color:yellow;color:blue">黄底蓝字的标题</h2>
<p style="background-color:green;">绿底黑字的段落</p>
</body>
</html>
2.2 内部样式表
- 语法
在head中定义CSS表
- 示例
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<h1 style="text-align:center;">标题</h1>
<p>段落内容和body是head中style定义的</p>
</body>
</html>
-
输出
image.png
2.3 外部样式表
指定外部文件定义CSS表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
说明：
- rel 是链接的类型，此处说明是 style sheet
- type 是外联文件的类型
- href 是外联文件的位置
2.4 多重样式优先级
如果一个元素有几个样式则
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
image.png
