0CSS样式表与HTML结合的方法

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

层叠样式表(英文全称：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属性，只能识别第一个。

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

CSS样式表与HTML结合的方法
从此王子和公主幸福的生活在了一起:) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文 ...
IE6里样式表不起作用解决方法
写的html页面引用外部css文件的时候在IE7,IE8和FF中能正常作用,即能正常显示,可在IE6中却完全没有作用到,即css文件里的样式根本未被解析到我们的html页面,这是什么原因? 开始把c ...
漂亮的表格样式(使用CSS样式表控制表格样式)
根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...
在网页中插入CSS样式表的几种方法
1. 链入外部样式表链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...
vue2.0 样式表引入的方法 css sass less
在引入样式之前,首先要了解static.assets两个文件夹的区别. 从字面上可以看出,static用来存放静态文件,assets用来存放资源文件: static存放的文件不会被编译,打包后直接赋值 ...
Qt样式表之三：实现按钮三态效果的三种方法
按钮的三态,指的是普通态.鼠标的悬停态.按下态.Qt中如果使用的是默认按钮,三态的效果是有的,鼠标放上去会变色,点击的时候有凹陷的效果. 但是如果自定义按钮实现三态效果有三种方法,一种是设置背景图,主 ...
插入css样式表的三种方法
http://www.w3school.com.cn/css/css_howto.asp http://www.runoob.com/css/css-howto.html 当读到一个样式表时,浏览器会 ...
深入理解脚本化CSS系列第四篇——脚本化样式表
× 目录 [1]CSSStyleSheet [2]CSSRule 前面的话关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...
Qt——浅谈样式表
优秀的程序,不仅要有严密逻辑,而且应该有美观的外表.从软件界面,便可看出你是否用心在做,是否是一个有思想的人. Qt样式表的术语和语法规则和HTML CSS有很多相似之处. 样式规则 Qt中样式规则由 ...

随机推荐

Mysql表锁、行锁、页锁
参考 http://www.jb51.net/article/50047.htm <MySQL行级锁.表级锁.页级锁详细介绍> 页级:引擎 BDB.表级:引擎 MyISAM , 理解为锁住 ...
Linux环境下的GCC编译器与GDB调试工具介绍
假如现在我们有如下代码需要编译运行和调试.文件名为:test.c #include <stdio.h> int main() { int day, month, year, sum, le ...
iOS 之 UITextView
_lableAssess = [[UITextView alloc] init]; [_lableAssess setFrame:CGRectMake(left2, top2, width2, siz ...
2.1. 托管对象模型是什么（Core Data 应用程序实践指南）
托管对象模型是一种数据结构.在这里,数据结构.纲要.对象图.数据模型.托管对象模型这些术语是一个意思.它们是对同一个东西不同场景的描述.比如,对Core Data 而言是托管对象模型,对设计器来说是对 ...
--@angularJS--$scope.watch监听模型变化
$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...
php Excel文件导入 Spreadsheet_Excel_Reader
刚刚开通博客,希望能够通过博客的形式记录自己的学习与成长,同时也希望能够和路上的同僚们多交流,共同进步小白 -> 大神 go! go! go!! 先总结一下前几天写的Excel导入吧,希 ...
MyEclipse 2014去除derby
在MyEclipse安装目录下打开configuration\org.eclipse.equinox.simpleconfigurator\bundles.info 搜索derby找到com.genu ...
easyUI progressbar组件
easyUI progressbar组件: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
Python内置数据类型总结
python的核心数据类型:(很多语言之提供了数字,字符串,文件数据类型,其他形式的数据类型都以标准库的形式表示也就是用之前需要import ) ,但是python有很多都是内置的,不需要impor ...
Javaweb阶段知识回顾一
java基础增强一.jdk1.5的新特性自动封箱拆箱封箱:Java自动将原始类型值转换成对应的对象,如将int的变量转换成Integer对象拆箱:自动将对应的对象转换成原始类型值,将Integ ...