1.在HTML中引入CSS的方法

　　（1）行内式

　　　　行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。
 　　　　例如：
　　　　　　　 <h1 style=“color:white; background-color:blue”>这是一行文本/h1>

　　　　例1：

 <html>

     <head>

         <title>行内式</title>

     </head>

     <body>

         <h2 style="text-align: center;background-color: red;color: #eeeeee;">这是行内式</h2>

         <p style="text-align: center;background-color: blue;color: green;width:500px;height:200px;line-height:200px;">这是一个段落!</p>

     </body>

 </html>

　　（2）嵌入式
 　　　　嵌入式将对页面中各种元素的设置写在<head></head>之间。
 　　　　例如：
　　　　　　 <style type="text/css">
 　　　　　　h1{
　　　　　　　　　　 color:white; 
 　　　　　　　　　　background-color:blue；
　　　　　　　 }
 　　　　　　</style>

　　　　例2：

 <html>

     <head>

         <title>嵌入式</title>

         <style type="text/css">

             h2{

                 text-align: center;background-color: blue;color: green;

             }

             p{

                 text-align: center;background-color: red;color: #eeff11; width:300px;height:300px;line-height:300px;

             }

         </style>

     </head>

     <body>

         <h2>这是嵌入式</h2>

         <p>这是一个段落!</p>

     </body>

 </html>

　　（3）导入式
　　　　　<style type="text/css">
 　　　　　　　@import"mystyle.css";
　　　　　</style>

　　　例3： 1）

 <html>

     <head>

         <title>嵌入式</title>

         <style type="text/css">

             @import"mystyle.css";

         </style>

     </head>

     <body>

         <h2>这是嵌入式</h2>

         <p>这是一个段落!</p>

     </body>

 </html>

　　　　　　2）

 @charset "utf-8";

 /*css*/

     h2{

         text-align: center;background-color: blue;color: green;

         }

     p {

         text-align: center;background-color: red;color: #eeff11; width:300px;height:300px;line-height:300px;

     }

　

　　（4）链接式
　　　　<link href="mystyle.css" rel="stylesheet" type="text/css" />

　　例：

 <html>

     <head>

         <title>链接式</title>

         <link href="mystyle.css" rel="stylesheet" type="text/css"/>

     </head>

     <body>

         <h2>这是链接式</h2>

         <p>链接式的段落！</p>

     </body>

 </html>

　　mystyle.css

1 @charset "utf-8";

 /*css*/

 h2{background-color: red;color: blue;text-align: center;}

 p{background-color: blue;color: red;text-align: center;width: 500px;height: 300px;line-height:300px;}

CSS Day04 css核心基础的更多相关文章

  1. css核心基础总结篇

    今日这篇是整合前面的css补充知识的. 我觉得前面的关于css的知识补充进去有点乱,今日整理整理一下. 层叠样式表 层叠是什么意思?为什么这个词如此重要,以至于要出现在它的名称里. 层叠可以简单地理解 ...

  2. （1） css的核心基础

     css的核心基础 1.css的基本语法在具体使用css之前,请各位兄弟姐妹先思考一个生活中的问题,一般情况下我们是如何描述一个人的呢? 小明{ 民族:汉族: 性格:温柔: 性别:男: 体重:68kg ...

  3. CSS 设计彻底研究（一）(X)HTML与CSS核心基础

    第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...

  4. CSS学习篇核心之——盒子模型

    概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...

  5. CSS——（1）基础

    CSS(Cascading Style Sheets)层叠样式表 含义 一种计算机语言: 能够实现网页与内容分离: 用来表现文件样式,如HTML或XML: 比較 div与css 假设说div是容器的话 ...

  6. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  7. css简单的一些基础知识

    css层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...

  8. CSS学习笔记（基础篇）

    CSS概念 CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表) Css是用来美化html标签的,相当于页面化妆. 样式表书写位置: <head> < ...

  9. 「CSS」css基础

    1. 文字水平居中 将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center; 2. 容器水平居中 先该容器设置一个明确宽度,然后将margin的水平值 ...

随机推荐

  1. Apache Http Server和Tomcat 之区别

    转自:Apache Http Server和Tomcat 之区别 Apache官方网站:http://www.apache.org/Tomcat官方网站:http://tomcat.apache.or ...

  2. 鼠标点击 input，显示瞬间的边框颜色，对之修改与隐藏

    示例的是项目中的遇到的,要做成的效果是点击该图片按钮,达到切换图片的效果: HTML代码如下: <input class="dBox3Ulimg" type="im ...

  3. linux设置环境变量

    设置 Linux 环境变量可以通过 export 实现,也可以通过修改几个文件来实现,有必要弄清楚这两种方法以及这几个文件的区别. 通过文件设置 Linux 环境变量 首先是设置全局环境变量,对所有用 ...

  4. 关于Android L软件安装问题的发现

    android5.0可能存在的问题: 保留数据刷入导致通知栏无法下拉 按home键不能回到桌面 sdcard无法读取等等 刷了Android L之后,有一部分软件无法正常安装,多表现为 同一家公司开发 ...

  5. php基础（二）数组

    本文主要内容来自w3cschool 在 PHP 中,有三种数组类型: 索引数组 - 带有数字索引的数组 关联数组 - 带有指定键的数组 多维数组 - 包含一个或多个数组的数组 PHP 索引数组 有两种 ...

  6. ajax通过设置Access-Control-Allow-Origin来实现跨域访问

    [在被请求的Response header中加入] // 指定允许其他域名访问(*代表所有域名)header('Access-Control-Allow-Origin:*');// 响应类型heade ...

  7. nefu 1191 平行宇宙 （bfs）

    Description 小k是时空贸易者,他经常在两个平行宇宙之间往来经商,现在他要从S点到达E点,问最少需要多长时间.(已知小k在同一个宇宙中只能向上下左右四个方向移动,每次移动需要1个单位时间,且 ...

  8. 再次深入 C# Attribute

    了解attribute Attribute 只是将一些附加信息与某个目标元素关联起来的方式. Attribute 是一个类,这个类可以提供一些字段和属性,不应提供公共方法,事件等.在定义attribu ...

  9. WTL中菜单栏及工具栏项状态改变应注意的地方

    WTL中菜单栏项和工具栏按钮的状态可通过UISetCheck(int ITEM_ID, int STATE)进行设置 需要注意的是要将需要改变状态的控件ID添加到UI更新映射中 /* MainFram ...

  10. VS2010编译错误 LNK 2019 unresolved external symbol错误解决办法

    Link错误有很多种,主要是没有在连接中加入lib文件路径,或者lib配置正确,传参错误 一个solution里面多个project之间引用其他project函数会出现这个错误,由于包含了头文件而没处 ...