<!DOCTYPE html>
<html lang="en">
<!--css的三种引入方式:行内式;内接式;外接式-->
<head>
<meta charset="UTF-8">
<style type="text/css">
<!-- 内接样式:需借用style,且有四类选择器 -->
/* 选择器作用:选中标签,设置属性 */
<!--选择器:(1)标签选择器,会选中页面中所有的该标签,不管嵌套多少层,如span.当把几个标签放在一起用逗号隔开时,就成了组合选择器-->
<!--(2)类选择器,会选中页面中所有有该类属性的标签,一个标签可以继承多个类,两个类之间用空格隔开,比较常用-->
<!--(3)id选择器,借用'#'选中特定标签,一般用于js中-->
<!--(4)*通配符选择器,会获取所有类型选择器所能选中的标签,这类选择器工作中不要用-->
span{
color:red;
font-size: 30px
}
<!-- 组合选择器-->
p,span{
color:red;
}
.active{
color:yellow;/*格式: ".类名" */
}
#p1{
color:green;/*选中id为'p1'的标签进行修饰*/
}
*{
padding:0;
margin:0;/*只要我们一开始写css,那我们就需要重置布局页面,而通配符选择器可以实现页面的重置,但因为他会选择页面中的所有标签进行修改
因此我们不能用它,应该去用一个reset库中的css脚本*/
}
<!-- 重置样式-->
ul{
list-style:none;/*用该方法可以去掉列表前的小点*/
}
a{
text-decoration: none;/*此方法可去掉a标签中超链接的下划线*/
cursor: pointer;/*此方法可以给超链接加一个小手游标*/
}
input{
border: none;/*清除掉输入框的边框*/
400px;
height: 40px;
border: 1px solid red;/*自己给边框设置高度,宽度(1px)和颜色(red), 因此自己想要设置边框时需要同时加上三个属性*/
font-size: 22px; /*改变输入框输入文字的大小*/
}
</style>
<!-- 外接样式,需借用link对css文件进行链接-->
<link rel="stylesheet" href="./index.css">
</head>
<body>
<!--行内式:直接在标签内用style进行修饰.行内样式优先级是最高的-->
<p style="color: red; font-size:30px;">wusir</p>
<p id="p1">alex</p>
</body>
</html>