文章目录
前言一. css样式的三种方式第一种：内联定义方式第二种： 样式块第三种：引入外部独立css文件二. 选择器的三种样式第一种：id选择器第二种：标签选择器第三种：类选择器三. css的绝对定位前言
刚刚学过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>
