CSS学习第一天
今天是CSS学习的第一天，老师讲了CSS的基本结构和写法，总起来还是比较简单的，但还是要多加练习~
CSS 层叠样式表
三种样式
1、内联式 写在body内
语法（属性式） style:"样式：样式值；" 其优点是控制精确，缺点是不灵活，代码冗余
2、内嵌式 写在head内
选择器{样式：样式值} 其优点是代码精简 缺点是 控制不精确
3、外部样式表 写在head内
<link rel="stylesheet" href="路径"> 优点是 精简html的文件代码 缺点是控制不够精确
4、注释的语法
/* 注释的内容 */
标签选择器
ID选择器 #ID名
类选择器 .class名
复合选择器 逗号 空格 点
代码示例：<style>
p{width: 200px; height: 200px; background-color: darkmagenta;}
#name1{width: 200px; height: 200px; background-color: coral;}
.name2{width: 200px; height: 200px; background-color: aquamarine;}
li.name3{width: 200px; height: 200px; background-color: cornflowerblue;}
li#name4{width: 200px; height: 200px; background-color: bisque;}
ol li{width: 200px; height: 200px; background-color: chartreuse}
</style>
表格样式：
代码示例：<style type="text/css">
*{margin: 0px; padding: 0px;}
table{background-color: aqua;}
td{background-color: chartreuse;}
</style>
页面的格式布局
position：fixed; 固定 top（必须设置） left right bottom z-index
position：absolute; 绝对定位
1、只有本身：在页面中定位（根据top属性来）
2、有嵌套关系 a.嵌套他的标签没有position：还是在页面中定位
b.嵌套他的标签有position：在嵌套他的标签里面定位
position：relative; 相对定位
做的示例小练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{position: fixed;
position: absolute;
position: relative;
}
#a{width: 400px; height: 100px; background-color: #00FFFF;position: fixed; top: 10px; border: 2px solid green}
#b{width: 400px; height: 100px; background-color: antiquewhite;position: fixed; top: 110px;border: 2px solid red}
#c{width: 90px; height: 40px; background-color: black;position:absolute;border: 2px solid coral;top: -80px; left: 10px;}
#d{width: 90px; height: 40px; background-color: lavenderblush;position:absolute; bottom: 10px; border: 2px solid darkgray;right: 20px;}
#e{width: 90px; height: 40px; background-color: hotpink;position:relative; left: 480px;border: 2px solid dodgerblue;top: 60px;}
</style>
</head>
<body>
<div id="a"></div>
<div id="b">
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
</div>
</body>
</html>
浙公网安备 33010602011771号