文章目录
前言
刚刚学过HTML引入css样式的三种方式和选择器的三种样式，下面就来分享一下我的笔记吧一. css样式的三种方式
第一种：内联定义方式
<body>
<div style ="样式名：样式值"></div>
</body>
第二种： 样式块
<head>
<title></title>
<style type="text/css">
/*选择器*/
</style>
</head>
第三种：引入外部独立css文件
- 在css文件中写入选择器及内容，可以是多个
- css文件的引入 ：
<head> <title></title> <link rel=" stylesheet" type="text/css" href="文件路径"> </head>
二. 选择器的三种样式
第一种：id选择器
#id{
样式名：样式值；
样式名：样式值；
样式名：样式值；
…}
例如:
<head>
<title></title>
<style type="text/css">
#a{
color:red;
font-size:12px;
}
</style>
</head>
<body>
<span id="a">你好!</span>
</body>
第二种：标签选择器
标签{
样式名：样式值；
样式名：样式值；
样式名：样式值；
…}
例如：
<head>
<title></title>
<style type="text/css">
div{
color:red;
font-size:12px;
}
</style>
</head>
<body>
<div>你好!</div>
</body>
第三种：类选择器
.类名{
样式名：样式值；
样式名：样式值；
样式名：样式值；
…
}
例如：
<head>
<title></title>
<style type="text/css">
.student{
color:red;
font-size:12px;
}
</style>
</head>
<body>
<div class="student">你好，我是学生！</div>
<span class="student">你好，我是一名学生！</span>
</body>
三. css的绝对定位
对某一部分的位置进行设定
<head>
<title></title>
<style type="text/css">
#div1{
background-color: red;
border :1px black solid;
width: 300px;
height: 300px;
position: absolute;/*绝对定位*/
left: 100px; /*距离左边框*/
top: 100px; /*距离上边框*/
}
</style>
</head>
<body>
<div id="div1"></div>
</body>