在学习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. R语言中函数调试

    有时候会用R语言写一下简单的脚本处理函数,加入需要调试的话可以按照下面的步骤进行: fun <- function(x , y){ x + y x - y x * y x / y } debug ...

  2. python脚本文件传参并通过token登录后爬取数据实例

    from bs4 import BeautifulSoup import requests import sys class Zabbix(object): def __init__(self, he ...

  3. Django网站制作

    创建mysite目录 django-admin.py startproject mysite这个命令作用是:这将创建在当前目录创建一个mysite目录 前提是从命令行上cd到你想储存你代码的目录,然后 ...

  4. PHP HTTP 函数

    PHP HTTP 简介 HTTP 函数允许您在其他输出被发送之前,对由 Web 服务器发送到浏览器的信息进行操作. 安装 HTTP 函数是 PHP 核心的组成部分.无需安装即可使用这些函数. PHP ...

  5. PHP 实例 AJAX 投票

    AJAX 投票 在下面的实例中,我们将演示一个投票程序,通过它,投票结果在网页不进行刷新的情况下被显示. Do you like PHP and AJAX so far? Yes: No: 实例解释 ...

  6. Docker Kubernetes 项目

    Kubernetes 是 Google 团队发起并维护的基于Docker的开源容器集群管理系统,它不仅支持常见的云平台,而且支持内部数据中心. 建于Docker之上的Kubernetes可以构建一个容 ...

  7. Linux（十七）动态监控进程

    17.1 介绍 top与ps命令很相似.它们都用来显示正在执行的进程.top与ps最大的不同之处,在于top在执行一段时间可以更新正在运行的进程 17.2 语法 top    [选项] 常用选项   ...

  8. Android进阶 | 摆脱斗图 | 行业交流 | 深度学习 | 付费

    Android进阶 | 摆脱斗图 | 行业交流 | 深度学习 | 付费 其实在很早的时候我就有想过,是不是退出一些群,因为群太多了,里面的水友也多,基友也多,就难免会水起来,这样既耽误学习又耽误工作, ...

  9. LOG4J日志级别详解

    日志记录器(Logger)是日志处理的核心组件. org.apache.log4j.Level类提供以下级别,但也可以通过Level类的子类自定义级别. Level 描述 ALL 各级包括自定义级别 ...

  10. 有一台机器，上面有m个储存空间。然后有n个请求，第i个请求计算时需要占 R[i]个空间，储存计算结果则需要占据O[i]个空间（据O[i]个空间（其中O[i]<R[i]）。问怎么安排这n个请求的顺序，使

    有一台机器,上面有m个储存空间.然后有n个请求,第i个请求计算时需要占 R[i]个空间,储存计算结果则需要占据O[i]个空间(据O[i]个空间(其中O[i]<R[i]).问怎么安排这n个请求的顺 ...