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权威指南学习总结--8.8.2高阶函数》

    内容要点: 所谓高阶函数(higher-order function)就是操作函数的函数,它接收一个或多个函数作为参数,并返回一个新函数. 例1: //这个高阶函数返回一个新的函数,这个新函数将它的实 ...

  2. vs2012常用快捷键总结

    ctrl+k+c  注释 ctrl+k+u 取消注释 ctrl+m+t 折叠代码 ctrl+t 取消折叠 ctrl+k+d 调节代码 ctrl+f 查找 ctrl+g  跳转行(一般调试的时候显示哪行 ...

  3. Spring自动扫描

    需要在Springde 配置文件中加入 <context:component-scan base-package="com.annoation"> base-packa ...

  4. MySQL(3)-索引

    一.索引类型 在MySQL中,存储引擎使用索引,首先在索引中找到对应值,然后根据匹配的索引记录中找到对应的行. 无论是多么复杂的ORM工具,在精妙和复杂的索引面前都是"浮云".这里 ...

  5. [转]5个JavaScript面试题

    问题1:闭包 考虑下面的代码: 1 2 3 4 5 6 var nodes = document.getElementsByTagName('button'); for (var i = 0; i & ...

  6. vim 打开乱码

    首先,你需要搞清楚vimrc所在的位置.一般来说,在linux系统里,应该是这样 Linux: /usr/share/vim/vimrc在Windows系统,应该是在vim的安装目录 Windows: ...

  7. iOS之文件解析

    JSON JSON – OC 转换对照表 JSON OC {} NSDictonary [] NSArray "" NSString 数字 10,10.5 NSNumber NSJ ...

  8. winform/wpf 程序部署

    (1):一些发布方式 ClickOnce是什么玩意儿,这个问题嘛,在21世纪的互联网严重发达的时代,估计也没有必要大费奏章去介绍了,弄不好的话,还有抄袭之嫌.因此,有关ClickOnce的介绍,各位朋 ...

  9. tomcat源码分析（二）启动过程

    在Catalina的load方法中,首先初始化Server组件. // Start the new server if (server instanceof Lifecycle) { try { se ...

  10. ADO.NET基础、数据增删改查

    ADO.NET:数据访问技术,就是将C#和MSSQL连接起来的一个纽带.我们可以通过ADO.NET将内存中的临时数据写入到数据库中,也可以将数据库中的数据提取到内存中供程序调用. 数据库数据的增.删. ...