CSS基本语法和基础选择器

最新推荐文章于 2022-09-09 12:18:43 发布

黯黯°

最新推荐文章于 2022-09-09 12:18:43 发布

阅读量151

点赞数

分类专栏：学习经验文章标签： css css3

本文链接：https://blog.csdn.net/weixin_44272970/article/details/103662364

版权

学习经验专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前端学习经验（5）

CSS

CSS基础

基本语法

<style>部分：一般来说<style>放在<head> </head>中。
	<style>
		div{
    		height: 100px;
    		width: 300px;
    		border: solid green;
			}
	</style>

<body>部分：
	<body>
		 <div >这是一个盒子</div>
	</body>

CSS的引用方式：

标签内引用：直接在标签内添加样式。
	
	<div style = "border: blue solid 10px;height: 100px;width: 300px">这是一个盒子1</div>

内部引用：在<head></head>内添加<style>样式。
	<head>
		<style>
			div{
				border:dashed red 1px;
				height:200px;
				width:300px;
				}
		<style>
	<head>
	<body>
		<div>这是一个盒子2</div>
	</body>
dashed：定义div框的外框线为虚线。


外部引用：在外部写一个css文件，通过链接引入到内部进行使用。
	<head>
		<link rel = "stylesheet" href = "index.css">
	</head>
	<body>
		<div>这是一个盒子3</div>
	</body>

编写一个后缀名为index.css的文件:
	div{
		border:orange solid 3px;
		height:300px;
		width:200px;
		}

选择器

标签选择器：选中指定标签，进行样式

  标签名{
		样式表
		}
如：
	div{
		border:orange solid 3px;
		height:300px;
		width:200px;
		}

类选择器：所有标签都具有class属性，给class设置一个值，然后对这个值(作为选择器使用)进行样式。同一个页面中类选择器可以多次使用。

	.值{
		样式表
		}
如：
	<head>
		<style>
			 .a{
				border:orange solid 3px;
				height:300px;
				width:200px;
				}	
		</style>
	</head>
	<body>
		<div class = "a">这是一个盒子4<div>
	</body>

id选择器：选中指定的带有id属性的标签，给id设置一个值，然后对这个值进行样式，同一个页面中id选择器建议使用一次。

	#值{
		样式表
		}
如：<head>
		<style>
			#aa{
				border:orange solid 3px;
				height:300px;
				width:200px;
				}	
		</style>
	</head>
	<body>
		<div id= "aa">这是一个盒子5<div>
	</body>