CSS语法介绍与CSS选择器
语法内容
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>
