html基础知识(四):css基础知识
一、 css:层叠样式表
作用:美化页面
样式分类:
1、行内样式表
<p style="color: rebeccapurple;font-size: 48px;font-family:sans-serif">段落标签</p>
2、内部样式表
<head>
<style>
选择器{ 属性名称:属性值; }
</style>
</head>
3、 外部样式表
1.创建css文件写入样式
2.引入css文件
<head>
<link rel="stylesheet" href="css/css.css"/>
</head>
二、css中的选择器
选择器分类
/*
标签选择器:对对应的标签进行渲染
格式:
标签名{
属性: 值;
}
*/
p{
font-size: 48px;
color: rebeccapurple;
}
/*
类选择器
.类名{
属性:值;
}
*/
.p1{
color: tan;
}
.p2{
color:red;
}
/*
id选择器:对id进行渲染
#id{
属性:值;
}
*/
#p3{
color: palevioletred;
}
应用:
<p class="p2">段落</p>
<p id="p3">段落</p>
/*
选择器分类: 权重越大选择器的能力越强
行类样式 1000
id选择器 “#id” 100
类选择器 “.类名” 10
标签选择器 “标签名” 1
通配符选择器 “*” 0
子代选择器 “>”
后代选择器 “空格”
群组选择器 ","
*/
<style>
p{
color: greenyellow;
}
/*后代选择器
选择器 选择器{
}
*/
div p{
color: blue;
}
/*
子代选择器
父标签>子选择器{
}
*/
div>p{
color: palevioletred;
}
strong>p{
color: bisque;
}
/*通配符*/
*{
color: brown;
}
/*
群组选择器
*/
div,p{
color: tan;
}