<!doctype html>

<html>

<head>

           <meta http-equiv="content-type" content="text/html";

            charset="utf-8">

           <title>html和css的关系</title>

           <style type="text/css">

            h1{

                 font-size:12px;

                 color:#930;

                 text-align:center;

                 }
            span{
                 color:yellow;
                }

           </style>

</head>

<body>

           <h1><span>Hello</span> World</h1>

</body>

</html>

css的组成：选择器，声明=属性与属性值

css的语法：选择器{属性：属性值；}

说明：1）属性和属性值之间用：连接，声明必须要在花括号内

2）一个选择器可以有多个属性，属性和属性之间用；分号隔开。

3）一个属性可以用多个属性值，属性值与属性值之间用空格隔开

meta标签支持html中的全局属性。

http-equiv属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先要传送给浏览器的mime文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送很多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一格：content-type:text/html。这将告诉浏览器准备一个接受的html文档。（当然现在大多数浏览器都能自动识别HTML文档）

style type="text/css"  这段代表中间内容的风格是css格式。

例如：font-size:12px  是控制字体的大小

color:#930       是控制字体的颜色

text-align:center 是控制文字居中

span标签没有语义的它的作用就是为了设置单独的样式。在两种颜色或更多种颜色中它会选择最下面那种颜色。



<!doctype html>

<html>

<head>

           <meta charset="utf-8">

           <title>css之中的三种语法</title>

           <link href="css的文件地址.css" rel="stylesheet" type="text/css" />

           <style type="text/css">

               span{

                   color:blue;

                   font-size:20px;

                     }

           </style>

</head>

<body>

           <p style="color:red；font-size:12px">这里的颜色是红色</p>

           <p>这是另外的<span>一个段落</span></p>

</body>

</html>


 以上是3种css的格式： 1）内联样式表就是<p style="color:red；font-size:12px"></p>
css内联样式表就是把css代码直接写在现有的html标签中。
                    2)嵌入式样式表<style type="text/css"></style>
嵌入式css样式就是可以把css样式代码写在style标签之中。一般情况下嵌入式css样式写在<head></head>之间。
                    3)外联样式表


 <link href="css的文件地址.css" rel="stylesheet" type="text/css" />
外联css样式就是把css代码写在一个单独的外部文件中，这个css样式文件以".css"为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到html文件内。


注意：rel="stylesheet"type="text/css"是固定写法不可修改，使用外联样式的好处可以让用户打开网页的速度有所提升。
三种样式表如果在同一个标签内，它们的优先级：内联>嵌入>外联。


 




												


											
html进阶css（1）的更多相关文章
	

    
						
  1. html进阶css(5)
		
    css定位机制 css有三种基本的定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在html中的位置决定. 块级框从上到下一个接一个的 ...
    
		
    2. 
						
  2. html进阶css（４）
		
    盒子模型-边框 首先请看下图 <!doctype html> <html> <head> <meta charset="utf-8"> ...
    
		
    3. 
						
  3. html进阶css（3）
		
    css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许格式不仅应用于某个特定html标签元素,而且应用于其后代. <!doctype html> <html> ...
    
		
    4. 
						
  4. html进阶css（2）
		
    选择器的类型 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...
    
		
    5. 
								
  5. HTML5总结整理
		
    (仅供大家学习分享交流) 一.简介 1.前端开发最核心技术 我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最 主要由3部分组成:结构.表现和行为.网页现在新的标准 ...
    
		
    6. 
						
  6. Matplotlib数据可视化（3）：文本与轴
		
      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
    
		
    7. 
						
  7. 【CSS进阶】试试酷炫的 3D 视角
		
    写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 ...
    
		
    8. 
						
  8. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
		
    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
    
		
    9. 
						
  9. 2. web前端开发分享-css,js进阶篇
		
    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
			
    节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...
    
			
    2. 
						
  2. Winform改变Textbox边框颜色（转）
			
    namespace MyTextBoxOne { //使用时必须把文本框的BorderStyle为FixedSingle才能使用 //一些控件(如TextBox.Button等)是由系统进程绘制,重载 ...
    
			
    3. 
						
  3. 使用hibernate优化
			
    a. 在查询字符串中,应该总是使用jdbc的占位符?,或使用使用命名参数:,不要自查询中使用字符串值来代替非常量值.   b.  Flush会影响性能,频繁刷新影响性能,尽量减少不必要的刷新.   c ...
    
			
    4. 
						
  4. 分享到QQ空间、新浪微博、腾讯微博的代码！
			
    给网页加上分享代码,借助网友的力量推广网站,目前已经很流行了 以下是网页代码 QQ空间分享代码如下: <a href="javascript:void(0);" onclic ...
    
			
    5. 
						
  5. 1169  二叉树遍历（XCOJ DFS）
			
    给出一棵二叉树的中序与后序排列.求出它的先序排列.(约定树结点用不同的大写字母表示,长度≤8). 样例输入 BADC BDCA 样例输出 ABCD #include <iostream>  ...
    
			
    6. 
						
  6. 初识cross apply & outer apply
			
    1. 2. 3.参考地址: http://blog.csdn.net/htl258/article/details/4537421
    
			
    7. 
						
  7. C语言解析日志，存储数据到伯克利DB
			
    编译命令 gcc -o dbwriter dbwriter.c -ldb dbwriter.c #include <assert.h> #include <stdlib.h>  ...
    
			
    8. 
						
  8. android run process
			
    http://www.jb51.net/article/32798.htm http://www.elecfans.com/tongxin/119/20120315263977.html 图 1 详细 ...
    
			
    9. 
						
  9. Linux 下的下载文件命令
			
    普通文件只需 wget  fileAddr 下载带有登录验证的文件 [chen@localhost Downloads]$ wget --user='av\bname' --ask-password  ...
    
			
    10. 
						
  10. 转：完善eclipse+pdt作php开发中的代码提示能力
			
    在eclipse开发中 ,可能由于各种原因导致项目文件(eclipse内置)丢失或错乱, 因而, 失去一些能力.. 以下是经过被痛苦折磨后查阅总结的一点东西 设置完下面内容, 支持以下特性 PHP:  ...
    
			
    11.