从此王子和公主幸福的生活在了一起:)

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

一、外部样式表(常用)

　　通过 <link />标签引入样式表：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>外联样式</title>

        <link rel="stylesheet" type="text/css" href="style.css" media="all" />

        <!--在link标记中rel和href属性是必须的，type属性和media属性可省略-->

        <link rel="stylesheet" href="style.css" />

    </head>

    <body>

    </body>

</html>

注意：1)在link标记中rel和href属性是必须的，type属性和media属性可省略；

　　   2)样式表中不能包含HTML标记语言，只能有CSS规则和CSS注释，否则导致在该标记后面的CSS样式将无法被识别。

二、内联样式表

　　1、通过 <style></style>标签引入样式表：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>内联样式</title>

        <style>

            body{

                background-color: blue;

            }

        </style>

    </head>

    <body>

    </body>

</html>

　　2、通过@import指令引入样式表：

<!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>@import</title>

        <style>

            /*将@import放置在CSS规则前*/

            @import url(style.css);

            body {

                background-color: blue;

            }

        </style>

    </head>

    <body>

    </body>

</html>

注意：1)将@import url(style.css);写在<style>标签内；

　　   2)@import放置在CSS规则之后将不起使用。

三、行间样式

　　写在某个元素自身的样式，使用HTML的style属性实现。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>行间样式</title>

    </head>

    <body>

        <div style="background-color: red; width:100px;height:100px;" style="background-color: yellow;"></div>

    </body>

</html>

注意：行间样式若存在多个style属性，只能识别第一个。

CSS样式表与HTML结合的方法的更多相关文章

  1. 漂亮的表格样式(使用CSS样式表控制表格样式)

    根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...

  2. 在网页中插入CSS样式表的几种方法

    1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...

  3. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  4. DOM与CSS样式表

    在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...

  5. CSS样式表优先级

    使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...

  6. 美丽的表格样式(使用CSS样式表控制表格样式)

    按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...

  7. JavaScript对css样式表操作

    CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...

  8. CSS样式表初始化代码

    CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影 ...

  9. CSS样式表的写作规范

    推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...

随机推荐

  1. 集合 & 深浅copy

    集合: 特点:集合是可变的数据类型,但他里面的元素必须是不可变的数据类型,无序,不可重复. 创建: set1 = set({1,2,3}) 或者直接创建set2 = {1,2,3} 集合的增删查: 增 ...

  2. 7.0-uC/OS-III中断管理

    1.CPU的中断处理 理器通常有多个中断源. 例如, UART中断. DMA中断. ADC中断.定时器中断等. 2.中断器件标志中断处理器,然后中断处理器将优先级最高的中断提交给CPU. 现在的中断控 ...

  3. JavaScript中各种对象之间的关系

    上图: 此外,补充一下图中用到的概念: 1.内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动 ...

  4. 你不知道的JavaScript-1.作用域是什么

    作用域是一套规则,用于确定在何处以及如何查找变量.函数等(标识符).如果查找的目的是对变量进行赋值,那么就会使用 LHS 查询:如果目的是获取变量的值,就会使用 RHS 查询. 赋值操作符会导致 LH ...

  5. require 和 import 区别

    我很懵逼啊  都是在引用模块,那到底用哪个? 参考:https://www.cnblogs.com/hwldyz/p/9145959.html 看来会明白一点的 首先这两个都是为了JS模块化编程使用. ...

  6. 52.JQ---向上滚动显示，向下滚动隐藏

    js: var windowTop = 0;$(window).scroll(function() { var scrolls = $(this).scrollTop(); if(scrolls &l ...

  7. 百度富文本Ueditor编辑器的使用

    往在web开发的时候,尤其是在网站开发后台管理系统的时候经常会使用到富文本编辑器,这里我们来使用百度提供的富文本编辑器UEditor,以提高我们的开发效率 UEditor官网下载地址:https:// ...

  8. lua常用方法收集

    1. xlua之将c#集合转换成table -- 将c#的list转换成table local function ConvertCSListToTable(list) local t = {}; , ...

  9. 前端学习历程--js--原型&闭包

    一.数据类型 1.值类型:undefined, number, string, boolean,不是对象 2.引用类型:函数.数组.对象.null.new Number(10)都是对象 3.引用类型判 ...

  10. AD域与外部网站域名相同处理办法

    环境 域控:Windows Server 2008 r2 AD域:example.cn 问题:DNS可以正常解析外部域名(如www.baidu.com),但是无法解析mail.example.cn 原 ...