1）内嵌式写法
<head>
<meta charset="utf-8">
<style type="text/css">css代码</style>
</head>
2）常用属性
Paste_Image.png
3）选择器的分类
一： 基础选择器
- 标签选择器
<head>
<meta charset="utf-8">
<style type="text/css">
p{
color: red;
font-size: 10px;
width: 40px;
height: 20px;
background-color: pink;
}
</style>
</head>
<body>
<p>文件子</p>
</body>
-
类选择器
a, 先定义类样式
<style type="text/css">
/* 类样式的定义 */
.fontcolor{
color: green;
}
</style>
b,然后要调用它
<p class="fontcolor">dfsdfsdfs</p>
调用两个样式
<p class="fontcolor fontsize">dfsdfsdfs</p>
c，命名规范
可以用中文，但是不推荐
不能以特殊字符开头比如@，但是‘_’可以。
不建议使用标签名，虽然可以使用
Paste_Image.png
- id选择器
1）id必须要唯一，不建议多个标签使用同一个id选择器样式
2)一个标签只能调用一个id样式
<p id="p_color p_size">p1</p>这样的写法不正确
<head>
<meta charset="utf-8">
<style type="text/css">
#p_color{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p id="p_color">p1</p>
<p>p1</p>
<p>p1</p>
</body>
- 通配符选择器
1)将页面中的所有的标签的样式都改变
2)进行页面样式初始化
<head>
<meta charset="utf-8">
<style type="text/css">
*{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>p1</p>
<div>div</div>
<span>span1</span>
</body>
二： 复合选择器
- 标签指定式选择器
既。。又
1，两个条件都要满足的标签
1）
p.two{
color: green;
}
<p class="two">字体1</p>
2）
p#one{
color: pink;
}
<p id="one">字体2</p>
-
后代选择器
1，选择器之间必须要有空格
2，后面的是前面的子代，在父代的基础上选择子代
第一种
<head>
<meta charset="utf-8">
<style type="text/css">
div p{
color: red;
}
</style>
</head>
<body>
<div>
<p>niahifahdfioej</p>
</div>
<p >字体1</p>
</body>
第二种
<head>
<meta charset="utf-8">
<style type="text/css">
.one p{
color: red;
}
</style>
</head>
<body>
<div class="one">
<p>niahifahdfioej</p>
</div>
<p >字体1</p>
</body>
第三种
div.one p{
color: red;
}
- 并集选择器
1，将样式集体声明，比通配符选择器要弱点可以自己选择。
<head>
<meta charset="utf-8">
<style type="text/css">
div,span{
color: red;
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<span>span</span>
</body>