语法内容
1.语法:选择器+(1或n条声明)
2.每个声明决定要修改的是那个标签
3.声明中的属性是键值对,键值对之间用: 结束用;
4.css可以单独使用也可以搭配在html中使用(能有让样式和界面结构分离),一般在head标签内放入选择器,
5.使用/* */注释
作用:
1.对网页中元素位置的排版进行像素级控制,美化页面。
2.实现页面的结构和样式分离。
<html>
<head>
<title>css选择器</title>
<style>
p{
/* 选择颜色 */
color:blue;
/* 设置字体 */
font-size: 50px;
}
</style>
</head>
<p>hello</p>
</html>
1.引入到html的方法
将CSS内容写在
1.内部样式表
1.内部样式表
<html>
<head>
<title>css选择器</title>
<style>
p{
/* 选择颜色 */
color:blue;
/* 设置字体 */
font-size: 50px;
}
</style>
</head>
<p>hello</p>
</html>
2.行内样式表
2.行内样式表
<style>
p{
/* 选择颜色 */
color:blue;
/* 设置字体 */
font-size: 50px;
}
</style>
<p style="color:red">hello</p>
将style作为属性加入行内标签。
不过这种写法的优先级高,虽然选择器已经是blue,但是最后还是red的颜色。
3.外部样式
因为外部样式的使用,可以让样式和结构完全分离,所以实际中一般都用外部样式。
使用方法:
1.在vscode中建立一个css文件,后缀为css。
2.在这文件中直接写好声明与属性。
3.在html文件中与css建立连接,一般写在head标签中
<head>
<title>css选择器</title>
<!-- 建立和外部css的链接 -->
<link rel="stylesheet" href="style.css">
</head>
<div>hello</div>
二.选择器
1.基础选择器
1. 标签选择器:
<style>
p{
color:aqua;
}
div{
color:red;
}
</style>
<p>张三</p>
<p>张三</p>
<p>张三</p>
<div>李四</div>
<div>李四</div>
<div>李四</div>
- 能将同类的标签都选择出来(同类标签颜色会变的一样)
- 但是不能在同类标签中选择其中的标签(同类标签颜色不能不一样)
2.类选择器
<style>
.blue{
color:blue;
}
</style>
<div class="blue">李四</div>
<div>李四</div>
- 可以给相同的标签中加入class属性(用来调用) 这样就可以让相同标签的内容呈现不一样的颜色。
- 可以让多个标签使用同一个标签(class中的内容)
- 差异化表示不同标签
- 类名用.开头
3.id选择器
- id选择器使用 # 加html中的某个元素的id值来表示
- id是唯一的,class不是唯一的(原因,id身份证唯一,class地址,姓名不唯一)
<style>
#name {
color: blue;
}
</style>
<div id="name">李四</div>
4.通配符选择器
- 使用*来选择全部标签 全部内容都会被改变颜色
<style>
* {
color: blue;
}
</style>
<div id="name">李四</div>
<div id="name">李四</div>
<div>李四</div>
<div>李四</div>
<div>李四</div>
<div id="name">李四</div>