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. 为什么需要异步？why？来看一段代码。

    为什么需要异步?why?来看一段代码. 问题1: for(var i=0;i<100000;i++){ } alert('hello world!!!'); 这段代码的意思是执行100...次后 ...

  2. ARC下面的对象被释放的bug

    一般在ARC管理的方式之下,很难出现对象被过度释放的问题,下面是我将遇到的一个crash. * thread #: tid = , queue = , address=0x18) frame #: f ...

  3. NOIP2010-普及组复赛-第一题-数字统计

    题目描述 Description 请统计某个给定范围[L, R]的所有整数中,数字 2 出现的次数. 比如给定范围[2, 22],数字 2 在数 2 中出现了 1 次,在数 12 中出现 1 次,在数 ...

  4. 【其他】MySql常用命令

    Linux下: 登陆命令 mysql -h [hostname] -u [username] -p [password]修改密码 mysqladmin –u[username] –p[oldpwd] ...

  5. blur事件

    blur事件是在元素失去焦点的时候触发,那么失去焦点的前提便是获得焦点. 哪些元素可以获取焦点呢? 1.超链接 2.input button textarea (without disabled) 3 ...

  6. POJ 2488 A Knight's Journey（深搜+回溯）

    A Knight's Journey Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) ...

  7. Java--重载与重写

    父类(Parent): public class Parent { public String name = "parent 父类属性"; public void say(){ S ...

  8. iOS学习笔记(01) - 泛型

    决定新开一坑,在不断学习的同时分享自己的学习历程给大家,既是对自己学习的记录,又希望能对大家提供些微的帮助. 这一篇文章主要来介绍泛型的意义.使用与声明方法等. 1.泛型:限制类型 1.1.泛型使用场 ...

  9. 1.Perl 多线程:Threads

    详情可查看: perldoc threads 调用线程的方法: $thr = threads->create(FUNCTION, ARGS) #This will create a new th ...

  10. 学习笔记——解释器模式Interpreter

    解释器模式,其实就是编译原理中的语法解释器,如果用在项目中,可以用于实现动态脚本的解析,也就是说项目可以支持用户脚本扩展. 但实际上,这种运行时解释,效率很慢,如果不是很需要的话,不建议使用. 一种简 ...