二、CSS样式

最新推荐文章于 2024-07-09 15:49:17 发布

神奇的海螺呀

最新推荐文章于 2024-07-09 15:49:17 发布

阅读量128

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/GRuion/article/details/120989104

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML样式

1.直接定义样式 <body bgcolor="#cccccc">

2.间接CSS样式 body{background-color:#cccccc}

CSS引入方式

1.CSS 内联样式表

 <body style="background-color:#cccccc;">

2.CSS 内部样式表

<!DOCTYPE html>

<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>主页</title>
		<style type="text/css">
		    body{background-color:#CCFFFF}
		</style>
	</head>
	
	<body></body>
</html>

3.外部样式表（link标签、@import）

新建style.css

body{background-color:#CCFFFF}

HTML中引入css

<!DOCTYPE html>

<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>主页</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	
	<body></body>
</html>

4.CSS优先级：内联>内部>外部

选择器

HTML选择器-选择器是HTML元素名称-div{}

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>测试</title>
		<style>
		    body{font-size: 10px;}
		    p{font-size: 30px;}
		    div{font-size:50px;}
		</style>
	</head>
	
	<body>
	    你好
	    <p>你好</p>
	    <div>你好</div>
	</body>
</html>

ID选择器-使用HTML元素的id属性，同页面元素id必须唯一。#id{}

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>测试</title>
		<style>
		    div{font-size:50px;}
		    #div2{font-size:80px;}
		</style>
	</head>
	
	<body>
	    <div>你好</div>
	    <div id="div2">你好</div>
	</body>
</html>

类选择器 可确定多个不同类型的元素 class.class{}

<1>元素添加class属性

<2>.class值{属性:属性值}

组合：

组合选择器（一般通过元素选择器与类选择器获得唯一一个元素）div.class{} 元素选择器类选择器{ 属性 : 属性值 }

选择器组（使用基本选择器组合，获得多个元素）：基本选择器 , 基本选择器 , 基本选择器 { 属性 :属性值 }

后代选择器（通过祖辈或父辈获取元素）：祖辈基本选择器后代基本选择器 { 属性 : 属性值 }

伪类选择器格式：基本选择器 : 事件类型 { 属性 : 属性值 ;} 事件类型： hover 鼠标悬停， focus 元素获取焦点， visited 已被访问链接

更多： CSS 选择器

CSS盒子模型

border边框

border：边框宽度边框样式边框颜色

margin(外边距)padding(内边距)

margin：上右下左

margin：上下左右

margin：四边距

定位方式

流定位（默认定位方式）

<!DOCTYPE html>

<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>猜一猜</title>
		<style>
		    #div1{
		        background-color:#CC3333;
		        height:200px;
		        width:200px;
		    }
		    #div2{
		        background-color:#CCCCCC;
		        height:200px;
		        width:200px;
		    }
		    #div3{
		        background-color:#003366;
		        height:200px;
		        width:200px;
		    }
		</style>
	</head>
	
	<body>
	    <div id="div1"></div>
	    <div id="div2"></div>
	    <div id="div3"></div>
	</body>
</html>

浮动定位（元素横向定位，靠左|靠右）【float：right】

<!DOCTYPE html>

<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>猜一猜</title>
		<style>
		    #div1{
		        background-color:#CC3333;
		        height:200px;
		        width:200px;
		    }
		    #div2{
		        background-color:#CCCCCC;
		        height:200px;
		        width:200px;
		    }
		    #div3{
		        background-color:#003366;
		        height:200px;
		        width:200px;
		    }
		    div{
		        float:right;
		    }
		</style>
	</head>
	
	<body>
	    <div id="div1"></div>
	    <div id="div2"></div>
	    <div id="div3"></div>
	</body>
</html>

相对定位（元素与原位置变化不大）【position：relative；left：10px；】

{注：相对定位以自身为参照}

<!DOCTYPE html>

<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>猜一猜</title>
		<style>
		img:hover{
				/*实现元素与原来位置细微移动*/
				position:relative;
				left:10px;
				bottom:10px;
			}
		</style>
	</head>
	
	<body>
		<img src="iamge/01.jpg">
		<img src="iamge/02.jpg">
		<img src="iamge/03.jpg">
	</body>
</html>

绝对定位（元素较原位置发生巨大变化）【position：absolute；top：5px】

{注：绝对定位以父辈或祖辈为参照，父祖辈以position:relative为标识，无标识时以body为参照}

<!DOCTYPE html>

<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>猜一猜</title>
		<style>
			div{
				width:600px;
				height:400px;
				
			}
			img{
				position:absolute;
				left:300px;
				top:200px;
			}
		</style>
	</head>
	
	<body>
		<div>
			<img src="iamge/01.jpg">
		</div>
	</body>
</html>

固定定位（元素固定在相对于窗口的指定位置，不随页面滚动）【position:fixed；top:5px；】

<!DOCTYPE html>

<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>猜一猜</title>
		<style>
			div{height:100px}
			#tops{
				position:fixed;
				right:10px;
				top:100px;
			}
		</style>
	</head>
	
	<body>
		<div id="abc">1111</div>
		<div>1111</div>
		<div>1111</div>
		<div>1111</div>
		<div>1111</div>
		<div>1111</div>
		<div>1111</div>
		<div>1111</div>
		<div>1111</div>
		<div>1111</div>
		<div>1111</div>
		<div>1111</div>
		<div id="tops"><a href="#abc">顶部</a></div>
	</body>
</html>

堆叠（元素发生遮挡，按元素优先级显示）【z-index:数值】

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>猜一猜</title>
		<style>
		div{
		    position: relative;
		}
		#img1{
		    position: absolute;
		    left:200px;
		    top: 100px;
		}
		#img2{
		    position: absolute;
		    left:250px;
		    top: 150px;
		}
    	#img3{
		    position: absolute;
		    left:300px;
		    top: 200px;
		}
		img:hover{
		    z-index: 999;
		}
		</style>
	</head>
	
	<body>
	    <div>
    	    <img id="img1" src="iamge/01.jpg">
    		<img id="img2" src="iamge/02.jpg">
    		<img id="img3" src="iamge/03.jpg">	        
	    </div>
	</body>
</html>

注：

相对定位不释放原位置，不脱离流，后面元素不会占据相对定位原位置；

浮动|绝对定位

神奇的海螺呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
二、CSS样式

引入方式HTML直接定义样式<body bgcolor="#cccccc">CSS 间接控制样式body{background-color:#cccccc}CSS 内联样式表 <body style="background-color:#cccccc;">CSS 内部样式表<!DOCTYPE html><html> <head> <meta http-equ...
复制链接

扫一扫