前端笔记02–css基础
1）css的基本语法
选择器{
属性：属性值；
属性：属性值；
}
选择器：查找页面元素的方法
{}声明规则
2）css特点
- 基本语法有两个部分组成 : 选择器和样式声明 ( 样式规则 ) ;
- {}被称之为样式声明 , 声明中的属性和属性值使用冒号 ( : ) 链接 ;
- 每一组属性和属性值结束后需要使用分号 ( ; ) 进行分割 ;
- 如果是最后一组属性和属性值 , 我们可以不用添加分号 , 但是我们推荐一定要进行添加 , 方便我们后续继续添加对应的修饰 ;
3）css样式的使用位置
1.在行内，直接在HTML标签里的style属性里写的css代码
<p style="color: red;">
2.内部样式：在head部分，通过<style>标签包含的css代码
<head>
<style>
p { color: blue; }
</style>
</head>
3.外部样式：创建单独的css文件，并将文件通过<link>导入到HTML文件的head部分中
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
4）常见选择器
1.标签选择器
含义 : 标签选择器, 是将标签名字当做查找页面元素的方式, 只要有对应名字的标签, 无论嵌套级别多么深入都可以被匹配到. 任何一个标签名字都可以当做选择器
基本语法 : p{样式声明} div{样式声明}
优缺点 :
优点:直接匹配
缺点:匹配范围过于广泛, 精准度不够高, 不能达到精准匹配
2.class选择器
含义 : 使用class属性给元素起一个class类名, 然后再CSS文件中通过类名查找页面中的元素
基本语法 :
起名: <div class="box">
查找: .box{样式规则}
注意事项 :
1)类名不能使用特殊符号, 不能使用中文, 不能以数字开头
2)类名使用的时候点(.)不能省略
3.通配符选择器
含义 : 用来匹配页面中的所有元素, 或者是某一个区域中的所有元素
基本语法 :
{样式规则} div>{样式规则}
注意事项 :
1)*{}主要用来取消元素自带的内边距和外边距
4.伪类选择器
含义 : 元素本身没有对应的效果, 需要通过鼠标事件才能完成对应的效果
基本语法 :
选择器:hover{样式规则}
代表的是鼠标划过的时候出现的对应的样式
5.子代选择器
含义 : 查找当前元素内所有符合条件的儿子辈分的元素
基本语法 :
选择器1>选择器2{样式规则}
注意事项 : 使用符号为(>)
5）选择器权重值
！importang 高于选择器
id>类/伪类>标签>通配
继承的样式最低
扫一扫
2381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
