文章目录
前言一. 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>