目录
1.style——css三种使用style的方式
1）内联式：样式代码写在双引号中，多条可以写在一起，用;分隔
<p style="color:red;">文案</p>2）嵌入式：写在<style></style>之间
<style type="text/css">
p{
color:red;
}
</style>
<p>text</p>3）外部式：把css代码写在单独的文件中，命名以.css为扩展名，使用<link>标签将css文件引入
<link href="style.css" rel="stylesheet" type="text/css"/>2 选择器
2.1 定义
选择器是每一条css样式的声明，选择器指明了样式的作用对象。
选择器 {
样式；
}2.2 分类
1）标签选择器/元素选择器：html代码中的标签，权值为1
<html> <body><h1><p><img>2）类选择器： .+类选择器名 +修改，权值为10
.color {
color:red
}
<p class="color">文案</p> 3） ID选择器： #+选择器名+修改，权值为100
#color {
color:red;
}
<p id="color">...——》类选择器和ID选择器的相同点和不同点：
- 相同点：可以应用于任何元素
- 不同点：id只能使用一次，类选择器可以使用多次
4）全部选择器： * +修饰，对全部标签元素进行修改
*{
color:red;
}5）子选择器： 父类名+>/空格+子类名
.food > li{
}6）伪选择器：是对标签状态的某种修饰
//鼠标划过标签
a:hover{color:red;}3 工具使用——debug
3.1 console
- 根据级别打印日志
- 统计执行的时间：console.time()，console.timeEnd()
- 执行次数：count()
- 查看dom节点：dirxml(node)
- 自定义输出样式：console.log("%c内容","样式")
3.2 debugger
- 在待调试代码前，加debugger;
- 运行程序，会自动断点到写debugger的地方
3.3 chrome工具
- F12
- Elements可查看dom节点
- console可查看日志，输入命令
- sources查看网页的资源，可看到压缩后的js文件代码，采用加断点的方式，可进行调试
- 断点调试
7827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
