zoukankan      html  css  js  c++  java
  • 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>
    
    
    
    
  • 相关阅读:
    ExecuteScalar requires the command to have a transaction when the connection assigned to the command is in a pending
    如何从vss中分离程序
    String or binary data would be truncated
    the pop3 service failed to retrieve authentication type and cannot continue
    The POP3 service failed to start because
    IIS Error he system cannot find the file specified _找不到页面
    pku2575Jolly Jumpers
    pku2940Wine Trading in Gergovia
    pku3219二项式系数
    pku1029false coin
  • 原文地址:https://www.cnblogs.com/wanghang/p/6299811.html
Copyright © 2011-2022 走看看