<!--
（1）CSS 层叠样式表
作用：修饰网页结构
（2）css的三种引入方式
权重： 优先级高 权重大 谁在页面谁的权重大
- 行内样式
注意：行内样式的优先级是最高的
- 内接样式
- 外接样式
（3）基本选择器
id选择器 #
选中的是特性 唯一的，不能重复 （与js有关系）
标签选择器
选中的是页面中共性的标签
类选择器 .
选中的也是页面中共性的标签，类名可以有多个
通配符选择器
通常是对页面进行重置样式表
border: 1px solid #e0e0e0 设置input的边框颜色和宽度
<a href="javascript:void(0);">百度一下</a> 去除a 标签的下划线
text-decoration: underline; 普通文字加下划线
cursor: pointer; 显示小手的状态
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css三种引入方式 和四种基本选择器</title>
<!-- 外接样式 -->
<link rel="stylesheet" href="./index.css">
<!--内接样式-->
<style type="text/css">
/*内接样式*/
/*1 选择器 选中的是 ‘共性’ */
span{
color: green;
font-size: 30px;
}
/*组合选择器*/
ul,ol{
list-style: none;
}
/*2 类选择器 .类名 选中的也是共性 可以有多个*/
.active{
color:blue
font-size: 30px;
}
/*3.id选择器 选中的是‘特性’ # id是唯一的*/
#p1{
color: green;
}
/*4. 通配符选择器 * 在以后工作中不要用这个 */
/*一开始布局页面如果写css,一定要重置*/
/* 将所有的边界空隙都设置为 不空格
*{
padding: 0;
margin: 0;
}
*/
a{
/*清除a标签的下划线*/
text-decoration: none;
}
.baidu{
color: blue;
/*加下划线*/
text-decoration: underline;
/*显示小手的状态*/
cursor: pointer;
}
input{
border: none;
width: 400px;
height: 40px;
border: 1px solid #e0e0e0;
font-size: 22px;
}
</style>
<!--引入js文件-->
<!--js文件中的内容 ： alert(22222) 网页提示;-->
<script type="text/javascript" src="./javascript/index.js"></script>
</head>
<body>
<!-- 行内样式 的优先级是最高最高的 -->
<p style="color: red; font-size: 30px;">行内样式</p>
<span style="color: purple;">行内样式2</span>
<p id="p1">p1的id</p>
<p id="p2">p2的id</p>
<ul>
<li class="active">
王先生
</li>
</ul>
<!--a 标签的下划线被去掉了 javascript:void(0); 点击不变化正常是锚点点击刷新-->
<a href="javascript:void(0);">百度一下</a>
<span class="baidu">百度一下</span>
<input type="text">
</body>
</html>
