CSS Note
简介
是什么:层叠样式表
可以做什么:可以使页面更加美观,可以将代码和样式分离开来,以便后期的维护
怎么做:
1、css结合其他东西才能有用,与html的四种结合方式:
1.1利用被一个标签都有的属性:style
<div style="background-color:gray;color:red;">方式一</div>
1.2利用标签<style></style>写在头文件<head>里
写法:表示div标签里的内容的设置
<style type="text/css">
<!-- css代码 -->
div{
background-color: blue;
color:red;
}
</style>
1.3和第二种一样,写在头文件里,只是是引入一个css的文件(了解)
<style type="text/css">
<!-- 引入css文件 -->
@import url(div.css);
</style>
注:在有些浏览器下不起作用,需要另外写一个css文件
1.4使用头标签link,也是引入外部的css文件,实现了样式和网页代码的分离功能(开发常用)
-创建一个css文件
-在头文件中使用link引入该文件即可:
<link rel="stylesheet" type="text/css" href="css文件的路径">
css文件示例:div.css
div{
background-color: green;
color: black;
}
*** 优先级:(一般情况)
由上到下,由外到内。优先级由低到高。
即 后加载的优先级高
*** 格式 选择器名称{属性名:属性值;属性名:属性值;......}
2、css的选择器的种类:
2.1 标签选择器:使用标签名作为选择器的名称,
如:对标签<div>而言:
div{
background-color: blue;
color:red;
}
2.2 class选择器
所有html标签都有一个属性class
<div class="haha">aaaaaaaa</div>
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*div.haha{
background-color:gray;
color:red;
}
p.haha{
background-color:gray;
color:red;
}*/
/* 以上可以简写为: */
.haha{
background-color:gray;
color:red;
}
</style>
</head>
<body>
<div class="haha">床前明月光,疑是地上霜</div>
<p class="haha">举头望明月,低头思故乡</p>
</body>
</html>
2.3 id选择器:
所有标签都有属性id
<div id="hehe">bbbbb</div>
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* div#hehe{
background-color:gray;
color:red;
}
p#hehe{
background-color:gray;
color:red;
} */
#hehe{
background-color:gray;
color:blue;
}
</style>
</head>
<body>
<div id="hehe">路漫漫其修远兮</div>
<p id="hehe">吾将上下而求索</p>
</body>
</html>
选择器的优先级:
style>id选择器>class选择器>标签选择器
3、css的扩展选择器
3.1 关联选择器
<div>
<p>wwwww</p>
</div>
设置p标签(嵌套标签)的样式?
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div p{
background-color:gray;
color:orange;
}
</style>
</head>
<body>
<div>
<p>css的扩展选择器</p>
</div>
<p>wwwwwwwwwwww</p>
<!-- 只改变嵌套的p标签的样式 -->
</body>
</html>
3.2 组合选择器
如将两个或多个标签的样式设置成一样:
<!-- <div>div</div>
<p>ppppp</p> -->
用div,p{}
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div,p {
background-color:green;
color:orange;
}
</style>
</head>
<body>
<div>1111</div>
<p>22222</p>
</body>
</html>
3.3 伪元素选择器
css里面直接使用定义好的样式
如,一个超链接,有四种状态
状态: 原始 鼠标悬停 点击 点击后
伪选择器 :link :hover :active :visited
示例:(了解)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 原始状态 */
a:link{
background-color:white;color:red;
}
/* 悬停 */
a:hover{
background-color:blue;
}
/* 点击 */
a:active{
background-color:red;
}
/* 点击后 */
a:visited{
background-color:black;
}
</style>
</head>
<body>
<a href="www.baidu.com.cn" target="_blank">百度一下哈</a>
</body>
</html>
4、css的盒子模型
页面的布局通常使用div+css来布局
div相当于一块一块的数据,就是一个盒子,而用css可以调整这个盒子的位置、边框、盒子里面内容的位置
在head标签里调整:
4.1 边框border:指div这个盒子的边框
border的属性有:
粗细:多少px
样式:是哪种样式的线
颜色
如:border: 3px solid red
可以统一设置四条边框,也可以分别设置:
border-top
border-bottom
border-left
border-right
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 统一设置边框*/
div{
width: 200px;
height: 100px;
border: 2px solid red;
}
/* 设置div2右边边框的样式*/
#div2{
border-right: 2px solid green;
}
</style>
</head>
<body>
<div id="div1">我是盒子1</div>
<div id="div2">我是盒子2</div>
<div id="div3">我是盒子3</div>
</body>
</html>
4.2 内边距:指div里面的内容距离div边框的距离:padding
padding的属性值:
距离
同样可以统一设置内边距,也可以分别设置
padding-top
padding-left
padding-right
padding-bottom
不做示例。
4.3 外边距:指div这个盒子距离页面的距离:margin
margin的属性值:
距离
同样可以统一设置内边距,也可以分别设置
margin-top
margin-left
margin-right
margin-bottom
不做示例。
5、css的布局之漂浮(了解)
float:
属性:
left : 文本流向对象的右边
right : 文本流向对象的左边
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 100px;
border: 2px solid red;
}
/* 设置div1漂浮为right*/
#div1{
float: right;
}
</style>
</head>
<body>
<div id="div1">div01</div>
<div id="div2">div02</div>
<div id="div3">div03</div>
</body>
</html>
6、css布局之定位
position:
属性值:
1、absolute
-将对象从文档流中拖出去
-可以是top、bottom等属性进行定位
2、relative:
-不会将对象从文档流中拖出去
--可以是top、bottom等属性进行定位
区别就是会不会将对象从文档流中拖出去
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 设置宽高以及边框 */
div{
width: 200px;
height: 100px;
border: 2px solid blue;
}
/* 将第一个div拖出去 */
#div01{
background-color: orange;
position: absolute;
/* 并将设置它的位置 */
top:100px;
left:280px;
}
/* 可以发现将第一个拖出去后,第二个div随之在文本流中上移占据之前div1的位置 */
/* 将第二个对象不拖出,同时也设置其位置 */
#div02{
background-color: red;
position: relative;
top:10px;
left: 20px;
}
/* 不拖出后的效果是div3不会占据之前的div2的位置 */
#div03{
background-color: green;
}
</style>
</head>
<body>
<div id="div01">div01</div>
<div id="div02">div02</div>
<div id="div03">div03</div>
</body>
</html>
7、案例:图文混排
将文字和图片一起显示在页面上
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 设置整个div的样式 */
#imgtxt1{
width: 450px;
height:300px;
border: 2px dashed orange;
margin: 200px;
}
/* 设置图片漂浮为右 */
#img1{
float: right;
}
#txt1{
color: green;
}
</style>
</head>
<body>
<!-- 再用一个div将整个内容包起来 -->
<div id="imgtxt1">
<!-- 将图片和文字的内容分别用div包起来 -->
<div id="img1"><img src="a.jpg" alt="长春夜景" width="250" height="150"></div>
<div id="txt1"><font size="4" color="red">夜晚的长春南湖大桥,五颜六色流光溢彩,美妙的音乐喷泉让人流连忘返。</font>夜晚的长春南湖大桥,五颜六色流光溢彩,美妙的音乐喷泉让人流连忘返。夜晚的长春南湖大桥,五颜六色流光溢彩,美妙的音乐喷泉让人流连忘返。夜晚的长春南湖大桥,五颜六色流光溢彩,美妙的音乐喷泉让人流连忘返。夜晚的长春南湖大桥,五颜六色流光溢彩,美妙的音乐喷泉让人流连忘返。夜晚的长春南湖大桥,五颜六色流光溢彩,美妙的音乐喷泉让人流连忘返。</div>
</div>
</body>
</html>
8、图片的签名
利用文字在图片上显示
看案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#txt2{
position: absolute;
color: red;
top: 20px;
left: 30px;
}
</style>
</head>
<body>
<div id="img2"><img src="a.jpg" alt="夜景" width="300" height="200"></div>
<div id="txt2"><font size="4">美妙的音乐喷泉让人流连忘返</font></div>
</body>
</html>