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. spoj1811:Longest Common Substrin

    题目链接:http://begin.lydsy.com/JudgeOnline/problem.php?id=2796 把一个字符串做出后缀自动机,另一个字符串与之匹配. #include<cs ...

  2. 二分法经典习题——HDU1969

    #include <iostream>#include <cmath>#include <iomanip>using namespace std; double p ...

  3. Spring AOP实现声明式事务代码分析

    众所周知,Spring的声明式事务是利用AOP手段实现的,所谓"深入一点,你会更快乐",本文试图给出相关代码分析. AOP联盟为增强定义了org.aopalliance.aop.A ...

  4. amazeui 搜索 动态

    <!doctype html> <html class="no-js"> <head> <meta charset="utf-8 ...

  5. Lua手册中的string.len 不解

    Lua手册中的string.len (s) 接收一个字符串,返回其长度. 空串 "" 的长度为 0 . 内嵌零也统计在内,因此 "a\000bc\000" 的长 ...

  6. RPC框架基本原理(二):客户端注册

    客户端的注册流程如下 核心功能主要如下: 1.生成调用远程HSF服务的代理 此代理的效果为生成ServiceMetadata中指定的interface的代理,调用时可将代理转型为服务接口,并进行直接的 ...

  7. git容易被忽略的准备工作命令

    安装git命令 $ apt-get install git-core 配置用户信息 $ git config --global user.name "wxw" $ git conf ...

  8. C语言_IP地址解析

    #include<stdio.h> #include<stdlib.h> void main() { unsigned long input_IP; unsigned int ...

  9. html+javascript实现可拖动可提交的弹出层对话框效果

    本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...

  10. ERROR 1406 : Data too long for column 解决办法

    解决办法: 在my.ini里找到 sql-mode=”STRICT_TRANS_TABLES,NO_AUTO_Create_USER,NO_ENGINE_SUBSTITUTION” 把其中的STRIC ...