CSS
层叠样式表,用来美化页面,对html标签进行样式控制,使HTML样式更丰富,另外CSS何以解耦HTML
有了CSS之后,HTML只需要定义网页元素,至于HTML元素的展示,由CSS来做。两者结合的方式:
1、内联样式 将CSS写在标签上,每一个标签都会存在一个style属性,和style的值 内联样式一次只能控制一个标签的展示样式,书写凌乱。
2、内部样式 将CSS抽取到一个style标签,标签定义在<head>,配合一个选择器(就是选中一个或多个标签的语法),可以复用
3、外部样式 将CSS抽取到单独的文件中,多个页面可以引用CSS文件,复用性更好
内部样式的重点在选择器:
1、ID选择器:一次只能选择一个标签,且前面加#
2、类选择器:<body>内部加类名,<head> .类选择器 可以选择多个标签
3、标签名选择器:根据标签名选择一个或多个标签
举例:<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link{
color: yellow;
}
a:hover{
font-size: 50px;
}
a:active{
color: aqua;
}
a:visited{
color: gray;
}
</style>
</head>
<body>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</body>
选择器的优先级:当多个选择器,选中同一个标签,如果没有冲突就叠加生效。发生冲突,会执行优先级高的
内联样式>>ID选择器>>类选择器==属性选择器>>伪类选择器>>标签名选择器>>伪属性选择器
子选择器:若子类没有属性渲染,可以继承父类的渲染效果,不可跨过
相邻选择器: h1+h2{} 相邻所有选择器:h1~h2{}
CSS的作用
实现了样式和html的代码分离。
弥补html对属性的的控制不足。
精确的控制页面的布局。
可以提高页面的执行效率。
css还有特殊的功能。
CSS的继承性
<html>
<head>
<title>CSS的继承性</title>
<style>
body{
font-size:150px;
color:red;
}
p{
font-size:25px;
}</style>
</head>
<body>
<p>helloword</p>
</body>
</html>
页面定位
页面原点,在页面左上角。页面定位有两种方式:相对定位和相对定位
默认都是相对定位:第一个元素在原点位置,后续元素参照上一个元素的位置,相对定位元素互相参考。
绝对定位:各个元素都参考原点元素位置
<style type="text/css">
button{
position: absolute; 绝对定位
}
</style>