CSS学习笔记1

别团等shy哥发育

发布于 2023-02-27 10:06:48

3450

发布于 2023-02-27 10:06:48

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.内嵌式：

语法：<style type=”text/css”>
           Css 代码
       </style>

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

<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选择器>标记选择器>通配符选择器比如：

<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>