Web知识整理03

最新推荐文章于 2024-04-02 03:30:00 发布

lao_kai_ybqy

最新推荐文章于 2024-04-02 03:30:00 发布

阅读量185

点赞数 1

分类专栏：网页设计文章标签： css html js

本文链接：https://blog.csdn.net/weixin_47701814/article/details/108667770

版权

网页设计专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>

演示效果

在这里插入图片描述

Web_01链接
 Web_02链接
 Web_03链接
 Web_04链接
 Web_05链接
 Web_06链接

lao_kai_ybqy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web知识整理03

CSS优化style标签拥有一个整体的属性类型可多次使用让代码更简洁通过选择器去调整格式选择器包括元素选择器比如< div >id选择器自定义名字 id的名最好是唯一的类选择器自定义类名<style> 元素选择器{ 属性名1:属性值1; 属性名2:属性值2 } #id选择器{ 属性名:属性值; } .类选择器{ 属性名:属性值 } </style>...
复制链接

扫一扫