在学习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. Errors running builder 'DeploymentBuilder' on project '工程名'

    打开myEclipse就会报 Errors running builder 'DeploymentBuilder' on project '工程名' xxxNullpointException 的错误 ...

  2. C++笔记十二：C++对C的扩展——struct关键字类型增强

    C语言的struct定义了一组变量的集合,C编译器并不认为这是一种新的类型. C++中的struct是一个新类型的定义声明. struct Student { char name[100]; int  ...

  3. Dockerfile怎么创建镜像

    编写完成 Dockerfile 之后,可以通过 docker build 命令来创建镜像. 基本的格式为 docker build [选项] 路径,该命令将读取指定路径下(包括子目录)的 Docker ...

  4. Unity3D各平台Application.xxxPath的路径

    前几天我们游戏在一个同事的Android手机上启动时无法正常进入,经查发现Application.temporaryCachePath和Application.persistentDataPath返回 ...

  5. how to output quotes in bash prompt

    introduction In certain situations, quotes are required to be output in the command prompt. To do th ...

  6. Android开发使用Java8新特性

    Android 支持所有 Java 7 语言功能,以及一部分 Java 8 语言功能(具体因平台版本而异).本文介绍您可以使用的新语言功能.如何正确配置项目以使用这些功能,以及您可能遇到的任何已知问题 ...

  7. Android图表库MPAndroidChart(十二)——来点不一样的，正负堆叠条形图

    Android图表库MPAndroidChart(十二)--来点不一样的,正负堆叠条形图 接上篇,今天要说的,和上篇的类似,只是方向是有相反的两面,我们先看下效果 实际上这样就导致了我们的代码是比较类 ...

  8. TextView的升级版———AutoCompleteTextView

    TextView的升级版---AutoCompleteTextView AutoCompleteTextView顾名知义,可以自动提示的TextView,还可以提示错误信息. 这里介绍基本的使用,能够 ...

  9. pandas小记：pandas数据输入输出

    http://blog.csdn.net/pipisorry/article/details/52208727 数据输入输出 数据pickling pandas数据pickling比保存和读取csv文 ...

  10. nginx中configure脚本支持的常用选项，拍摄自《Nginx高性能Web服务器详解》