CSS基础---网页布局div

最新推荐文章于 2024-09-04 14:59:40 发布

皮的皮卡丘

最新推荐文章于 2024-09-04 14:59:40 发布

阅读量137

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_42291052/article/details/108438639

版权

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">
			span{
				color: red;				
			}
		</style> -->
		<style type="text/css">
			/* 伪类选择器，针对a标签可以选择状态
			 1、默认链接状态
			 2、鼠标悬浮状态
			 3、鼠标按下状态
			 4、链接访问过后状态*/
			 a:link{
				 color: yellow;
			 }
			 a:hover{
				 font-size: 50px;
			 }
			 a:active{
				 color: aqua;
			 }
			 a:visited{
				 color: gray;
			 }
		</style>
	</head>
	<body>
		<!--内联样式  -->
		<!-- <span style="font-size: 200px;color: grey;font-family: 楷体;">纯净标签</span>
		<span style="font-size: 200px;color: grey;font-family: 楷体;">纯净标签</span> -->
		<!-- 内部样式 -->
		<!-- <span>yi</span>
		<span>yi</span>
		<span>yi</span>
		<span>yi</span>
		<span>yi</span> -->
		<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>

皮的皮卡丘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础---网页布局div

CSS层叠样式表，用来美化页面，对html标签进行样式控制，使HTML样式更丰富，另外CSS何以解耦HTML有了CSS之后，HTML只需要定义网页元素，至于HTML元素的展示，由CSS来做。两者结合的方式：1、内联样式将CSS写在标签上，每一个标签都会存在一个style属性，和style的值内联样式一次只能控制一个标签的展示样式，书写凌乱。2、内部样式将CSS抽取到一个style标签，标签定义在<head>，配合一个选择器(就是选中一个或多个标签的语法)，可以复用3、外部样式将
复制链接

扫一扫