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. js 对象 视频 插入元素

    <!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8" ...

  2. mysql 数据列按照逗号转成行

    前言: 由于很多业务表因为历史原因或者性能原因,都使用了违反第一范式的设计模式.即同一个列中存储了多个属性值(具体结构见下表). 这种模式下,应用常常需要将这个列依据分隔符进行分割,并得到列转行的结果 ...

  3. maven项目构建

    Maven是apache的一个开源项目.是一个用来把源代码构建成可发布的构件的工具. Maven的功能非常强大,可以认为是一个项目管理工具,不仅仅是一个构建工具. Maven本身的核心很小,但是可以在 ...

  4. servlet 用法

    引入servlet的jar包,这个包在tomcat的lib下 新建一个servlet文件继承httpServlet,要实现里面的doGet或者doPost方法 在web.xml文件中配置 在form表 ...

  5. nginx: 响应体太大

    如果做proxy,可以将proxy配置修改buffer长度,或者直接关闭buffer.http { proxy_buffer_size 128k; proxy_buffers 4 256k; prox ...

  6. 关于oracle数据库（4）数据类型

    数据类型 字符数据类型char:固定长度字符串,最大可以存放2000字节 字符串varchar2:可变长度字符串,最大可以存放2GB数值类型数据 数字number:可以存放整数.浮点数.实数 numb ...

  7. margin的auto的理解

    auto 总是试图充满父元素 margin有四个值: All the margin properties can have the following values: auto - the brows ...

  8. Docker: Usage instruction

    Install docker from official site, in windows. or install docker from repo as official site told, in ...

  9. 学习笔记——迭代器模式Iterator

    迭代器模式,使用很多,但是很少实现.常用的集合都支持迭代器. 集合中的CreateIterator()可用于创建自己的迭代器,在里面通过调用迭代器的构造函数Iterator(Aggregate)来绑定 ...

  10. U盘启动安装Ubuntu

    1.UltraISO制作USB启动盘 2.打开U盘目录下的\syslinux\syslinux.cfg, 将default vesamenu.c32注释为 # default vesamenu.c32