在学习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>

Css技术入门笔记01的更多相关文章

  1. Css技术入门笔记02

    第一篇见Css入门笔记01http://blog.csdn.net/qq_32059827/article/details/51406674 4.其他选择器 4.1.关联选择器 有时在页面上会出现我们 ...

  2. 【Zigbee技术入门教程-01】Zigbee无线组网技术入门的学习路线

    [Zigbee技术入门教程-01]Zigbee无线组网技术入门的学习路线 广东职业技术学院  欧浩源 一.引言    在物联网技术应用的知识体系中,Zigbee无线组网技术是非常重要的一环,也是大家感 ...

  3. JAVA数据库编程(JDBC技术)-入门笔记

    本菜鸟才介入Java,我现在不急着去看那些基本的语法或者一些Java里面的版本的特征或者是一些晋级的知识,因为有一点.Net的OOP编程思想,所以对于Java的这些语法以及什么的在用到的时候在去发现学 ...

  4. css通用小笔记01——导航背景

    很多刚接触前端的可能遇到一些css能解决的小问题,我现在总结了一些,将会逐渐和大家分享,先是导航的背景问题,在网页中常常看到,当鼠标放到一个导航按钮上面是,就会出现一些特效,比如背景,这是最常用的,我 ...

  5. CSS Secrets 翻译笔记 01: CSS coding tips

    .firDemoButton{ padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0 ...

  6. 【python3两小时快速入门】入门笔记01：基础

    又要我搞爬虫了,这次的源网站使用的ajax加载数据,我用java爬下来的页面内容部分全都是空,虽然java也有插件,但是使用起来感觉很麻烦,所以,python!老子来了.    1. 版本:pytho ...

  7. Docker技术入门与实战 第二版-学习笔记-10-Docker Machine 项目-2-driver

    1>使用的driver 1〉generic 使用带有SSH的现有VM/主机创建机器. 如果你使用的是机器不直接支持的provider,或者希望导入现有主机以允许Docker Machine进行管 ...

  8. Docker技术入门与实战 第二版-学习笔记-8-网络功能network-3-容器访问控制和自定义网桥

    1)容器访问控制 容器的访问控制,主要通过 Linux 上的 iptables防火墙来进行管理和实现. iptables是 Linux 上默认的防火墙软件,在大部分发行版中都自带. 容器访问外部网络 ...

  9. Redis 笔记 01：入门篇

    Redis 笔记 01:入门篇 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ...

随机推荐

  1. WebRTC 音频算法 附完整C代码

    WebRTC提供一套音频处理引擎, 包含以下算法: AGC自动增益控制(Automatic Gain Control) ANS噪音抑制(Automatic Noise Suppression) AEC ...

  2. Bootstrap3 排版-标题

    HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. h1. Boots ...

  3. 多线程（四） 实现线程范围内模块之间共享数据及线程间数据独立（Map集合）

    多个线程访问共享对象和数据的方式 1.如果每个线程执行的代码相同,可以使用同一个Runnable对象,这个Runnable对象中有那个共享数据,例如,买票系统就可以这么做. 2.如果每个线程执行的代码 ...

  4. Scala:访问修饰符、运算符和循环

    http://blog.csdn.net/pipisorry/article/details/52902234 Scala 访问修饰符 Scala 访问修饰符基本和Java的一样,分别有:privat ...

  5. Android TV开发总结（四）通过RecycleView构建一个TV app列表页（仿腾讯视频TV版）

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52854131 前言:昨晚看锤子手 ...

  6. 如果用一个循环数组q[0..m-1]表示队列时,该队列只有一个队列头指针front,不设队列尾指针rear，求这个队列中从队列投到队列尾的元素个数（包含队列头、队列尾）。

    #include <iostream> using namespace std; //循环队列(少用一个空间)长度 #define M (8+1) typedef struct node ...

  7. Java异常处理-----自行处理

    自行处理 1.try{//可能发生异常的代码 }catch(异常类 变量名){//处理}. 2.案例除法运算的异常处理. 3.如果没有进行try catch处理,出现异常程序就停止.进行处理后,程序会 ...

  8. Dynamics CRM2016 Web API之更新记录

    本篇继续探索web api,介绍如何通过web api更新记录. 下面是一段简单的更新代码,更新了几个不同类型的字段,entity的赋值和前篇创建时候的一样的. var entity = {}; en ...

  9. EBS业务学习之应付管理

    应付款系统是供应链管理的最后一个环节,它使公司能够支付供应商提供的货物和服务的费用.供应链管理的目标是保持低库存量但又有充足的存货以满足要求,仓库中的库存就等于钱,因此,应付款管理的目标是尽可能地推迟 ...

  10. 自己动手实现一个Android Studio插件

    在使用Android Studio开发的时候,大部分人都会使用一些插件来提高开发效率,例如我们所熟知的butternife,selector,,GsonFormat等,这些分别从不同的原理来帮助我们提 ...