CSS优化
style标签 拥有一个整体的属性类型可多次使用让代码更简洁
通过选择器去调整格式 选择器包括元素选择器比如< div >
id选择器 自定义名字 id的名最好是唯一的 类选择器 自定义类名
<style>
元素选择器{
属性名1:属性值1;
属性名2:属性值2
}
#id选择器{
属性名:属性值;
}引入时要在标签内写id="id名"
.类选择器{
属性名:属性值
}引用时需要在标签内写class="类名"
</style>
样式优先级 行内样式>id选择器>类选择器>元素选择器
若有两个相同等级的选择器就默认就近原则
后代选择器:选择器1 选择器2 找出所有包含都1 2的部分改变样式
子代选择器:选择器1>选择器2 找出有选择器1且下一个选择器为2的部分改变样式
CSS的引入方式:
外部样式:通过link标签引入一个外部的CSS文件
内部样式:直接在style标签内编写CSS代码
行内样式:直接在标签中添加一个style属性,编写CSS样式
CSS浮动
style中的 float属性: left right
好处:可以使两个模块显示在同一行 ,可以根据页面的大小自动调整显示内容模块,也可以用浮动模块与不浮动模块结合实现图文环绕
clear属性:清除浮动
both:两边都不浮动
left:左边不允许浮动
right:右边不允许浮动
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d{
color: yellowgreen;font-size:medium;
}
.z{
color: blueviolet;font-size: x-large;
}
</style>
</head>
<body>
<div id="d">哈哈哈哈</div>
<div class="z">哈哈哈哈</div>
<div style="width: 200px;height: 200px; background-color:yellow"></div>
<div style="float: left;width: 200px;height: 200px; background-color: #8A2BE2;"></div>
<div style="float: left;width: 200px;height: 200px; background-color:brown"></div>
<div style="float: left;width: 200px;height: 200px; background-color:deeppink"></div>
</body>
</html>