CSS简介
在昨天我学完HTML基本语法之后,我今天准备加速学习CSS,加油!!!
CSS指的是Cascading Style Sheet(层叠样式表),是用来控制网页外观的一项技术。
首先我们得知道,HTML是用于控制网页的结构,而CSS用于控制网页的外观,JavaScript控制的是网页的行为。
CSS样式的引入方式
有三种方式:
- (1)外部样式表
- (2)内部样式表
- (3)行内样式表
(1)外部样式表
语法:
<link rel="stylesheet" type="text/css" href="文件路径" />
在这里:rel、type、href都是固定的值。
(2)内部样式表
<style type="text/css">
…………
</style>
将style标签放在head标签里面
(3)行内样式表
语法:
<div style="color:red;">抓紧复习</div>
在实际开发中,一般都是使用外部样式表。
还有设置样式时注意他的id和class,通过这两个属性可以精准控制每个部分的样式,id不能相同,class可以相同。
CSS选择器
选择器就是为了选择你想要修改样式的地方的工具,相当于一个定位工具,精准定位。
有五种最实用的选择器:
(1)元素选择器
(2)id选择器
(3)class选择器
(4)后代选择器
(5)群组选择器
(1)元素选择器
选择不同的标签,来修改样式,如div、p、h1等
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器练习</title>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<p>元素选择器</p>
<hr>
<div>
<p>这是一个段落</p>
<h4>这是一个大标题</h4>
<div>最后一行</div>
</div>
<p>元素选择器</p>
<hr>
<p>元素选择器</p>
<hr>
<p>元素选择器</p>
<hr>
<p>元素选择器</p>
<hr>
</body>
</html>
显示效果:
(2)id选择器
通过标签的属性的id来选择,id名前面加上"#"来修改样式。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器练习</title>
<style type="text/css">
#abc {
color: red;
}
</style>
</head>
<body>
<p>元素选择器</p>
<hr>
<div>
<p>这是一个段落</p>
<h4>这是一个大标题</h4>
<div>最后一行</div>
</div>
<p id="abc">元素选择器</p>
<hr>
<p>元素选择器</p>
<hr>
<p>元素选择器</p>
<hr>
<p>元素选择器</p>
<hr>
</body>
</html>
显示效果:
(3)class选择器
通过标签的属性的class来选择,class名前面加上"."来修改样式。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器练习</title>
<style type="text/css">
.name {
color: red;
}
</style>
</head>
<body>
<p>元素选择器</p>
<hr>
<div class="name">
<p>这是一个段落</p>
<h4>这是一个大标题</h4>
<div>最后一行</div>
</div>
<p id="abc">元素选择器1</p>
<hr>
<p class="name">元素选择器2</p>
<hr>
<p class="name">元素选择器3</p>
<hr>
<p>元素选择器4</p>
<hr>
</body>
</html>
显示效果:
(4)后代选择器
后面通过代码直接举例子
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器练习</title>
<style type="text/css">
.name p {
color: red;
}
.name1 h4{
color: burlywood;
}
#name3 h3{
color: darkgoldenrod;
}
</style>
</head>
<body>
<p>元素选择器</p>
<hr>
<div class="name">
<p>这是一个段落</p>
<h4>这是一个大标题</h4>
<div>最后一行</div>
</div>
<div class="name1">
<p id="abc">元素选择器1</p>
<hr>
<p class="name">元素选择器2</p>
<h4>这是一个大标题1</h4>
<h4>这是一个大标题2</h4>
<hr>
<p class="name">元素选择器3</p>
<hr>
<h4>这是一个大标题3</h4>
<p>元素选择器4</p>
</div>
<div id="name3">
<p>这是一个段落</p>
<h3>这是一个大标题</h3>
<div>最后一行</div>
</div>
<hr>
</body>
</html>
显示效果:
(5)群组选择器
选择多个,中间以逗号隔开。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器练习</title>
<style type="text/css">
div,p{
color:cadetblue;
}
</style>
</head>
<body>
<p>元素选择器</p>
<hr>
<div class="name">
<p>这是一个段落</p>
<h4>这是一个大标题</h4>
<div>最后一行</div>
</div>
<!-- <div class="name1"> -->
<p id="abc">元素选择器1</p>
<hr>
<p class="name">元素选择器2</p>
<h4>这是一个大标题1</h4>
<h4>这是一个大标题2</h4>
<hr>
<p class="name">元素选择器3</p>
<hr>
<h4>这是一个大标题3</h4>
<p>元素选择器4</p>
<!-- </div> -->
<div id="name3">
<p>这是一个段落</p>
<h3>这是一个大标题</h3>
<div>最后一行</div>
</div>
<hr>
</body>
</html>
显示效果:
在这五种里面群组选择器效率最高了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。