css初学笔记:css三种书写方式及基本选择器

本文深入讲解CSS的基础知识,包括行内式、嵌入式、外链式三种书写方式,以及标签选择器、ID选择器、类选择器和通配符等核心选择器的使用技巧。适合初学者快速掌握CSS的基本应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

css学习笔记:
一:css书写使用;
1.行内式:
直接书写在标签中的一个style属性中,属性值是包含所有的css样式属性。
例如:<div style="width:300px;height:300px;background-color: red;font-size: 30px;">我是div标签</div>
2.嵌入式(内嵌式):
书写在head标签里一个style标签里。
例如:

<style type="text/css">
div{
		width: 100px;
		height: 200px;
		background-color: blue;
		font-size:50px;
	}	
</style>

3.外链式:通过link标签引入外部的css文件。
Css文件,拓展名.css。Css文件的样式可直接书写,不用style样式包裹。
例如:书写header样式;
1.在css文件中写header样式:

`<style type="text/css">
	div{
		width: 100px;
		height: 200px;
		background-color: blue;
		font-size:50px;
	}	
</style>`

2>.在head标签里书写link标签

<link rel="stylesheet" type="text/css" href="" />

①Rel:css文件和html的关系,属性值“stylesheet”样式表。
②Type:类型。属性值“text/css”表示css文件为纯文本。(type类型可省略不写)
③Href:路径。外部引入css文件的路径。
4.css一些杂项。
1.Css中键值对的书写语法:
K:v
k: key:属性名 v:属性值
例如:width:200px;height:200px;
2.css中每一条样式属性以分号结尾。
3.css中每条属性独占一行,逐条书写。(便于我们初学者读自己代码)
4.css中对空格,缩进,换行不敏感。
例如:

1,div{
		width: 100px;
		height: 200px;
		background-color: blue;
		font-size:50px;
	}	
2,div{
		width: 100px;height: 200px;background-color: blue;font-size:50px;
	}	

二,css选择器
1>标签选择器
1.书写:

<div>我是一个div标签</div>
<style>
		div{
			width: 200px;
			height:200px;
		}
	</style>

2.标签选择器可以选中页面所有的同种标签,不管标签嵌套的多深,都可以选中。
3.用途:
①用于清楚或者重置默认样式。

div{                          
			margin: 0;
			padding: 0;
	}

②清除ul列表小圆点。

ul{
			list-style: none;
		}

③3.清除超级链接蓝色,下划线。

a{
			color: black;
			text-decoration: none;
		}

2id选择器
①Id选择器:通过标签的id属性进行选择。
②Id属性值命名规则:严格区分大小写。(check!=CHECK)必须以字母开头,可以有数字和下划线,短横。
③#id属性值 id属性名和#之间无空格。
④一个网页中只能出现一个id名(id属性名唯一)
⑤同一个标签既可以被标签选择器选中,也可以被id选择器选中,设置不同的样式属性,渲染在页面上。(css的层叠性)。
例如:

<p id="tom">我是一个p标签</p>
#tom{
			width: 200px;
			height: 200px;
			font-size: 50px;
			font-family: "微软雅黑";
		}

3类选择器
①类选择器是通过标签的class属性进行选择。
写法:类名(点和类名之间没有空格)类名命名规范和id属性的命名规范相同。
例如:

<p class="jack">我是一个p标签</p>
.jack{
			width: 100px;
			height: 100px;
			background-color: red;
			
		}

②使用注意点:
类选择器的特殊应用:原子类,(公共类)。我们可以将一个类名只保存一个属性,某个元素想添加该类名,便于书写。
例如:

.fs20{
			font-size: 20px;
		}

给上述jack添加字号为20px:<p class="jack fs20" >我是一个p标签</p>
【可以将原子类fs20添加给任何一个p标签,原子类可自己定义。实际运用要书写相同样式,可以直接书写相同类名。】
(一个标签可以有多个类名,类名之间用空格隔开。)
4.通配符
通配符会选中页面上所有的标签,甚至包括body.
用于:快速清除默认样式;
例如:

*{
	padding:0;
	margin:0;	
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值