标签:元素 样式 标签 h1 id color HTML 选择器 CSS
html页面中引入css的方式
1.内联样式:在标签style中引入css样式
<div class="box">
<h1 style=color:red;font-size:50px;>这是一个善良的h1</h1>
</div>
2.内部样式:通过style标签引入CSS
<style type="text/css">
h1{color: purple; background-color: green;}
</style>
</head>
<body>
<h1>这是标题 1</h1>
</body>
3、外部样式:通过link标签引入外部css样式文件
/*style.css*/
h1{
color: purple;
background-color: green;
}
<link rel="stylesheet" href="first.css">
<body>
<h1>这是标题 1</h1>
</body>
优先级(多种引入方式操作同一个标签,以哪个为准)
- 内联优先级最高
- 内部和外部同时存在,则就近原则
- 标签默认效果优先级最低
选择器
1、标签名选择器:通过标签的名称找到指定标签
格式:元素名{ }
<style type="text/css">
h1{color: purple; background-color: green;}
</style>
</head>
<body>
<h1>这是标题 1</h1>
</body>
2、类选择器:通过标签的class属性值选中指定标签,多个标签可以有相同的class值
格式:.d1{ }
<style>
.demo{
color:red;
font-size:50px
}
</style>
</head>
<body>
<h1 class="demo">这是标题 1</h1>
</body>
3、id选择器:通过id找到标签,一个html文件中id不能重复
格式: #id{}
<style>
#demo{
color:red;
font-size:50px
}
</style>
</head>
<body>
<h1 id="demo">这是标题 1</h1>
</body>
4、派生选择器(后代选择器):类似于路径,找到符合要求的标签,会匹配所有的后代标签
格式: ul li a{} #id li a{}
<style>
div .demo{
color:red;
font-size:50px
}
</style>
</head>
<body>
<div>
<h1 class="demo">这是标题 1</h1>
</div>
</body>
5、子元素选择器:和后代类似,但是只能获得子元素
格式: ul>li>a{}
<style>
div h1{
color:red;
font-size:50px
}
</style>
</head>
<body>
<div>
<h1 class="demo">这是标题 1</h1>
</div>
</body>
6、分组选择器:可以将多种选择器结合到一起使用,用来统一设定样
格式: h1,h2,#abc,.m{ }
<style>
div,h1,h2{
color:red;
font-size:50px
}
</style>
</head>
<body>
<div>
<h1 class="demo">这是标题 1</h1>
</div>
<div>
<h2 class="demo">这是标题 1</h1>
</div>
</body>
7、伪元素选择器:伪元素选择器选择的是元素的状态,状态分为以下几种:
- link 表示元素未被点击时的状态
- hover 表示鼠标悬停时的状态
- active 表示元素被点击时的状态
- visited 表示元素被点击后的状态
格式: #id:hover{ }
展开查看
<meta charset="utf-8"/>
:checked+伪元素
<meta content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" name="author"/>
<body>