Css技术入门笔记01

在学习html的时候,html中的标签都具备了特定功能,或者含义,以及相应的样式效果。可是在有些时候我们可能仅仅希望使用
html标签把要显示的数据封装起来,而不需要任何的样式效果。这时就需要单独的标签来封装数据,而这些标签不能会数据做任何的修饰。
这时我们就可以使用html中的DIV和SPAN标签。这2个标签都是用来封装数据,它们封装的数据没有任何的修饰。

1、CSS演示
  		div标签:div标签主要用来封装要显示数据,而不会对封装的内容做任何的修饰,它封装的数据会单独的占据一行
  		span标签:也是用来封装数据,不会对数据做任何的修饰,但是它封装的数据仅仅只占用数据所需的区域,后面可以继续出现其他的数据
  		p标签:段落标签,它封装的数据,也需要单独占用一行,它封装的数据段前和段后都会有空行。
  		
  		html标签的分类:
  			块级标签:标签单独占用一行区域,这些标签称为块级标签。
  				div、p、body、列表标签、table、form等
  			行内标签:span、input、select、textarea等
  			
  		在html技术的发展过程中,到了后期开发网页的时候,我们更习惯使用html标签来封装页面上的数据,而数据的样式效果修饰,不再使用
  		html标签来完成。而是使用后期出现CSS技术来负责整个页面的样式效果修饰。
  		
  		在早期html标签不仅仅需要封装数据,还要负责数据样式修饰。样式和数据结合在一起,不利于网站维护。
  		因此我们把数据的封装和样式的修饰进行分离,分离后,[使用html标签只封装数据,而使用CSS技术负责数据的样式]。
  		
  		流行网页开发:DIV+CSS  DIV 封装数据  CSS 负责样式修饰
  		
  	=============================================
  	要使用CSS对页面上内容进行样式的设定,需要在标签上使用style属性,[任何一个html标签都具备这个属性]。
  	在style属性中就可以书写具体的CSS代码

  <div style="color:red ; font-size: 30px;  border: thick double yellow;">div区域1</div>
  <div style="background-color: rgb(223,71,177)">div区域2</div>
  <span style="background-color: rgb(100,0,255)">span区域1</span>
  <span>span区域2</span>
  <p>段落1</p>
  <p>段落2</p>


2、CSS和html结合方式

  	CSS代码和html代码结合方式有4种:
  	第一种:
  		由于任何的html标签都具备style属性,因此在任何的html标签上都可以属性CSS代码。
  		CSS代码书写在style属性中。
	  	书写CSS代码的时候,要求CSS代码必须是 	指定的  key  : 对应的value值
	  	CSS代码中的key值,可以到CSS的手册查找。而对应的value值,需要根据当前的属性来确定。
  		如果在标签上书写CSS代码,那么在style属性中,多个CSS代码之间必须使用分号隔开。
  		style="color:red ; font-size: 30px;  border: thick double yellow;"
  		
  	第二种:
  		第一种CSS代码和html代码的结合方式,会导致需要在每个html标签上书写具体的CSS代码。
  		这样导致每个标签如果CSS样式相同,那么需要书写多个CSS代码。会导致CSS代码严重重复,代码的复用性极差。
  		我们可以把相同的CSS单独抽离出来,当那个标签需要使用CSS样式时,就把这个CSS样式作用在当前这个标签上。
  		
  		如果抽离出来的CSS代码,依然书写在当前的html文件中,这些CSS代码也需要相应的html标签来封装
  		<style type="text/css">
    	</style>  		使用style标签封装CSS代码。 在style标签中type属性,这个属性用来指定当前
    		style标签中书写的文本是css文本。	抽离出来的css代码需要使用大括号封装。
    	当抽离出来的CSS样式要作用在那个标签上,这时需要在抽离出来的CSS前面书写具体的标签名称,那么这时这个CSS
    	样式就可以作用在对应标签名的标签上。
    	
    	注意:如果需要在html文件中书写CSS代码,这时CSS代码需要写head标签中。
    	
    	如果CSS样式出现了重叠,那么以最后一次加载的样式为准。相同的样式会被覆盖,但不同的样式全部都会被作用在标签上。
    	
    	
   	第三种:
   		 CSS和html的第二种结合方式,针对一个网页而言,的确可以提高CSS代码的复用性。如果多个网页都需要相同的CSS样式
   		 那么如果使用第二种方式,就会导致每个网页中都需要书写相同的CSS代码,又会导致CSS代码严重重复。
   		 
   		 这时就可以把CSS代码从html文件中单独抽离出来,然后创建一个新的文件,在这个文件中书写具体的CSS代码。
   		 当那个页面需要这个CSS样式的时候,在这个页面中导入这个CSS文件即可
   		在单独的文件中书写CSS代码的时候,这时不需要书写style标签了,直接书写CSS代码即可
   		
   		当在某个页面上引入外部的CSS文件时,可以使用
	   	    <style type="text/css">
	    		@import url("具体CSS文件的路径");
	   		</style>
	   如果一个页面要引入多CSS文件,此时可以创建一个文件,把所有的CSS文件都在此文件中引入,
	   然后在页面上只引入包含需要引入的css文件的那个文件即可。
	   
   
   	第四种引入 方式:
   		在head标签中直接使用link标签引入
   		<link rel="stylesheet" type="text/css" href="./styles.css">
   		rel="stylesheet" 告诉浏览器当前link标签引入的是一个样式表
   		type="text/css" 告诉浏览器当前引入的样式表是CSS样式表
   		href="./styles.css" 引入的css文件的位置


3、CSS中的选择器(重要)
选择器:就是要选择当前的CSS样式到底需要作用的标签是谁。
CSS的选择器分类:最基本的3类:
标签名选择器:
直接使用html的标签名称,然后指定当前的CSS样式作用的标签
格式:
标签名{
CSS代码
}

例如:
span{
	color:lime;
	font-size:20px;
	border: blue dotted 1px;
}
当前的CSS代码需要作用在span标签上。页面上的所有span标签都会作用当前的CSS样式


类选择器:
所有的html标签,都有class属性,在html标签中,如果【不同的标签】需要作用【相同的CSS样式】,这时可以给这些需要作用相同的CSS样式的标签使用class属性,然后把这些标签的class属性的属性值定义成相同的,那么在定义CSS的时候,就业使用class的属性值来选择当前CSS要作用的标签。

格式:
. class属性值{
CSS代码
}



id选择器:
所有的html标签,都有id属性。在让CSS作用在不同的标签上时,也可以使用id的属性名来完成。这种选择器称为id选择器。
格式:
#id属性值{
CSS代码
}

在页面上如果给标签指定id,要求所有的标签的id不能重复。只针对html和CSS而言id重复不会有影响。但是后期学习JavaScript和DOM技术时
getElementById方法,它是根据当前页面上标签的id值来选择页面上的标签的,如果页面上重复的id,就会导致选择出现错误。
要求书写html文件中的所有的标签的id唯一。

  <head>
    <title>class选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<style type="text/css">
		/*标签名选择器*/
		div{
			color:fuchsia;
		}
		/*class选择器  当前的CSS会作用在所有class属性值为one标签上*/
		.one{
			color:yellow;
			font-size: 30px;
		}
		.two{
			border: red solid 1px;
		}
		
		/*id选择器  当前的CSS会作用在id属性值为one标签上*/
		#one{
			background-color: orange;
		}
	
	</style>
  </head>
  <body>
	  <div class="one" id="one">div中的数据</div>
	  <div class="two" id="two">div中的数据</div>
	  <span class="one" >span中的数据</span>  	
	  <span>span中的数据</span>  	
	  
	  <a href="#" class="one">联系我们</a>  
 </body>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值