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. bzoj4318: OSU!&&CF235BLet's Play Osu!

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4318 4318: OSU! Time Limit: 2 Sec  Memory Limit ...

  2. hdu_5903_Square Distance(dp)

    题目链接:hdu_5903_Square Distance 题意: 给你一个长度为n的a串,一个数m,现在让你构造一个长度也为n的b串,使这个串是由两个相同的串拼起来的,并且和a串对应的位不同的数量为 ...

  3. 简单的Socket通信

    Socket简介 Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求. 服务端步骤: • socket:创建服务器socket ...

  4. 多尺度二维离散小波重构waverec2

    clc,clear all,close all; load woman; [c,s]=wavedec2(X,2,'haar');%进行2尺度二维离散小波分解.分解小波函数haar %多尺度二维离散小波 ...

  5. ubuntu 修改root密码

    重新安装过ubuntu 14.04后,切换到root权限,需要输入密码,输入n次都不对. 也没有记得设置过密码. 百度一下,得到方法如下,已经验证测试成功. 命令为: sudo passwd 提示输入 ...

  6. 七牛 在线管理 v0.1

    <?php // @codingStandardsIgnoreFile require_once __DIR__.'/../vendor/autoload.php'; use Qiniu\Aut ...

  7. erlang分布式编程模型

    erlang分布式编程有两种模型 一.分布式erlang 运行在可信的网络环境中 1.rpc提供的远程过程调用 rpc:call(Node,Mode,Fun,Args) ->Result|{ba ...

  8. a标签包含块级元素问题

    a标签包含块级元素是不符合W3c标准的,但是淘宝也有这样的布局暂且认为可以这样(有时候布局需要这样写) 当a标签包含了div这样的块级元素时a标签是要转换成块级元素的使用display:block.但 ...

  9. [Mark] openvswitch megaflow

    Megaflow is an OpenVSwitch (OVS) feature than enables us to install flows for which some fields are ...

  10. abstract和interface

    1.abstract 的应用 abstract class ShapesClass { public abstract int Area(); } class Square : ShapesClass ...