CSS学习笔记1

2023-02-27 10:06:48 浏览数 (1)

CSS技术: 1.简介:他是层叠样式表。Cascading stytle sheet,他的作用是增强网页的显示效果。 目的:使用CSS让网页内容和样式分离,便于网站代码后续的维护。 书写规范: 选择器[属性1: 值1; 属性2: 值2; ] 2.CSS样式的引入方式 CSS不能单独使用,必须和html网页配合使用,引入css有四种方式:链入式、行内式、内嵌式、导入式。 1.行内式:直接在html标记里面使用CSS样式 语法:<div style=“background-color:red”>div的行内式效果</div> 2.内嵌式:

代码语言:javascript复制
语法:<style type=”text/css”>
           Css 代码
       </style>

位置:一定要放置在标记里面 3.链入式 语法:<link type="text/css" rel="styleSheet" href="简历测试.css" ></link> 步骤: 1创建一个CSS文件 2在网页里面使用link标签来引入外部的CSS文件 4.导入式

代码语言:javascript复制
<style type=”text/css”>
          @import url(外部css的url);
</style>

链接式和导入式的区别

<link> 1、属于XHTML 2、优先加载CSS文件到页面 @import 1、属于CSS2.1 2、先加载HTML结构在加载CSS文件。

1.3.CSS选择器和常用属性 1.标记选择器:直接使用html标记作为选择器 比如:<div>标记选择器</div> 语法: div{属性:值;} 2。类选择器:直接使用html标记的class属性的值作为选择器 比如:<div class=”divclass”>class选择器</div> 语法:.divclass{属性:值;} 3.id选择器:直接使用html标记的id属性的值作为选择器 比如:<div id=”divid”>id选择器</div> 语法:#divid{属性:值;} 4.通配符选择器:让所有的标记显示相同的样式 语法:* {属性:值;} 选择器优先级:id选择器>class选择器>标记选择器>通配符选择器 比如:

代码语言:javascript复制
<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {background-color:red;}
			.divclass {background-color:blue;}
			#divid {background-color: green;}
			* {background-color: gray ;}
		</style>
	</head>
	<body>
		<!--选择器优先级:id选择器>class选择器>标记选择器>通配符选择器-->
		<div>标记选择器</div>
		<div class="divclass">测试--选择器</div>
		<div class="divclass">class选择器</div>
		<div id="divid">id选择器</div>
	</body>

注意:id属性的值必须唯一,class属性的值可以相同

0 人点赞