所有的效果展示
引入:
<link rel="stylesheet" href="./yourCssName.css">
标签选择器:
p{
color: brown;
font-size: 30px;
background-color: aqua;
width: 500px;
height: 50px;
}
所有的P标签生效
类选择器:
.red{
color: red;
width: 500px;
height: 50px;
background-color: aqua;
}
<p class="red"> class为red P 标签</p>
<p class="red 并列其他也生效"> class为red 和 其他class的标签</p>
ID选择器:
它的存在是为了配合JS找标签而存在的!一个标签只能有一个。
#blue{
color: blue;
text-align: center;
text-decoration: line-through;
}
<div id="blue"> 这是蓝色DIV</div>
通配符选择器:
整个页面全部生效, 一般用于去除内外边距的使用
*{
margin: 0;
padding: 0;
}
字体设置:
font-style: italic 倾斜 normal 正常
/* 控制是否倾斜等样式 */
font-style:inherit;
/* 控制粗细 */
font-size:30px;
/* 控制粗细 */
font-weight:700 ;
/* 缩进几个空格 */
text-indent: 6em;
/* 行间距 */
line-height: 1.7;
/* 如果没有第一个字体, 就按照后边的找, 全没有就随机 */
font-family: 黑体,sans-serif;
/* 水平对齐方式 */
text-align: center;
/* 文本修饰属性 */
text-decoration: line-through;
font 符合属性:
所有相关的Code:
<!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>Document</title>
<!-- <link rel="stylesheet" href="./css-1.css"> -->
<!-- <style>
/* css注释 */
/* 选择器 {} */
p{
color: brown;
font-size: 30px;
background-color: aqua;
width: 500px;
height: 50px;
}
</style> -->
<style>
.red{
color: red;
width: 500px;
height: 50px;
background-color: aqua;
}
.gree{
color: green;
margin: 0 auto;
}
.size{
size: 120px;
/* 控制 */
font-style:inherit;
/* 控制粗细 */
font-size:30px;
/* 控制粗细 */
font-weight:700
}
#blue{
color: blue;
text-align: center;
text-decoration: line-through;
}
#p{
color: rgb(165, 42, 136);
text-indent: 2em;
line-height: 1.7;
font: italic 700 50px/1.5 宋体;
}
body{
text-align: left;
}
</style>
</head>
<body>
<p > 普通标签</p>
<p class="red"> class为red P 标签</p>
<p class="size"> class为gree和 size</p>
<hr>
<div id="blue"> 这是蓝色DIV</div>
<hr>
<div id="blue"> 这是DIV</div>
<div> 这是DIV通配符</div>
<p id="p"> 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进</p>
<p> 这是DIV通配符</p>
<img src="./images/meizi2.jpeg" alt="" width="400">
</body>
</html>