css学习2

最新推荐文章于 2024-09-02 18:56:47 发布

你若信

最新推荐文章于 2024-09-02 18:56:47 发布

阅读量95

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_44152890/article/details/121130588

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、第一种方式

<!doctype html>
<html>
	<head>
		<title>第一种方式</title>
	</head>
	<body>
	<!--
	border:10px solid black;和 border-width:10px;border-style:solid:border-color:black:相等
	border-width设置边框的宽度 
    border-style设置边框的样式，solid为实线边框
    border-color设置边框的颜色
    display为布局样式，block为显示对象，none为隐藏对象
	-->
		<div style="width:300px;height:300px;border:10px solid black;background-color:#008000;display:block;"/>
	</body>
</html>

在这里插入图片描述
2、第二种方式

<!doctype html>
<html>
	<head>
		<title>第二种方式</title>
		<style type="text/css">
		/*
		css的注释
		*/

		/*id选择器
		#id的名字{
				样式名:样式值;
		}
		*/
		#ser{
			width:300px;
			height:300px;
			color:mediumspringgreen;
		}

		/*标签选择器，作用范围广
		标签名{
				样式名:样式值;
		}
		*/
		div {
			background-color : black;
			border : 1px solid red;
			width : 100px;
			height : 100px;
		}

		/*类选择器，可以跨标签使用
		.类名{
			样式名:样式值;
		}
		*/
		.se{
			border : 1px solid red;
			width : 400px;
			height : 30px;
		}
		</style>
	</head>
	<body>
		<span id="ser">对不起</span>
		<div></div>
		<div></div>
		<!--class设置类名-->
		<input typle="text" class="se"/>
	</body>
</html>