1、内部样式表

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS</title>

        <style type="text/css">

            .class1 {

                font-family: "微软黑雅";

                font-size: 20px;

                color: black;

            }

            .class2 {

                font-family: "微软黑雅";

                font-size: 13px;

                color: red;

            }

            .class3 {

                font-family: "微软黑雅";

                font-size: 15px;

                color: blueviolet;

            }

        </style>

    </head>

    <body bgcolor="aquamarine">

        <center>

            <div id="style1">

                <p class=class1 ;align="middle">将进酒</p>

                <p class=class2 ;align="middle">唐.李白</p>

        </center>

        <p class=class3>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。

        </p>

        <p class=class3>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 与君歌一曲，请君为我倾耳听。 钟鼓馔玉不足贵，但愿长醉不复醒。 古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。

        </p>

    </body>

</html>

在上面的程序中，样式表直接定义在了head中，标题下面。这样的定义方式虽然能够实现功能，但是有一个较大的缺陷，虽然在本页面能够实现样式的调用，但是如果其他的页面也想调用里面的样式是不可能的，因此，样式表的代码未得到复用，未实现代码和样式的分离，只能够控制一个页面

2、行内样式表（内联样式表）

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

        </style>

    </head>

    <body>

    <p style="color: red; font-size: 20px; text-indent: 2em;">君不见黄河之水天上来，奔流到海不复回。

君不见高堂明镜悲白发，朝如青丝暮成雪。

人生得意须尽欢，莫使金樽空对月。

天生我材必有用，千金散尽还复来。

烹羊宰牛且为乐，会须一饮三百杯。

岑夫子，丹丘生，将进酒，杯莫停。</p>

    </body>

</html>

在元素标签的style属性中设置css样式，适合于简单的样式的书写，只能控制当前标签范围较小

3、外部样式表

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS</title>

        <style type="text/css">

            @import url("001.css");

        </style>

    </head>

    <body bgcolor="aquamarine">

        <center>

            <div id="style1">

                <p class=class1 ;align="middle">将进酒</p>

                <p class=class2 ;align="middle">唐.李白</p>

        </center>

        <p class=class3>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。

        </p>

        <div id="style1">

            <p>

                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 与君歌一曲，请君为我倾耳听。 钟鼓馔玉不足贵，但愿长醉不复醒。 古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。

            </p>

        </div>

    </body>

</html>

@import url("css文件");将外部的样式表由私用变为公用，减少的代码量，提高了代码的复用率。
需要新建一个后缀为.css的文件，该文件内部只有样式没有标签，在html文件中使用<link>标签引入css文件，实现了结构和样式相分离，可以控制多个页面

CSS——样式表的引入的更多相关文章

  1. css样式表的引入方式

    一般来说,css 有两种样式表的引入方式,在这里我记录一下,比较这两种引入方式的区别: <link rel="stylesheet" type="text/css& ...

  2. 久未更 ~ 五之 —— 引入外部CSS样式表 小节

    > > > > > 久未更 系列一:在html中引入外部css样式表 //引入外部css样式表 //<lilnk>要放在<head>标签的第一行, ...

  3. 引入CSS样式表（书写位置）

    CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head ...

  4. DOM与CSS样式表

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

  5. css样式表的选择器与分类

    css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构 ...

  6. CSS样式表的写作规范

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

  7. CSS样式----CSS样式表的继承性和层叠性（图文详解）

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

  8. CSS样式表的书写位置

    行内式(内联样式) 是通过标签的style属性来设置元素的样式,其基本语法格式如下: <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"&g ...

  9. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. go 学习笔记之值得特别关注的基础语法有哪些

    在上篇文章中,我们动手亲自编写了第一个 Go 语言版本的 Hello World,并且认识了 Go 语言中有意思的变量和不安分的常量. 相信通过上篇文章的斐波那契数列,你已经初步掌握了 Go 语言的变 ...

  2. 【Python3爬虫】学习分布式爬虫第一步--Redis分布式爬虫初体验

    一.写在前面 之前写的爬虫都是单机爬虫,还没有尝试过分布式爬虫,这次就是一个分布式爬虫的初体验.所谓分布式爬虫,就是要用多台电脑同时爬取数据,相比于单机爬虫,分布式爬虫的爬取速度更快,也能更好地应对I ...

  3. [Spring cloud 一步步实现广告系统] 21. 系统错误汇总

    广告系统学习过程中问题答疑 博客园 Eureka集群启动报错 Answer 因为Eureka在集群启动过程中,会连接集群中其他的机器进行数据同步,在这个过程中,如果别的服务还没有启动完成,就会出现Co ...

  4. 使用Tesseract-OCR 做验证码识别浅析

    使用工具jTessBoxEditor-0.7(这个是在java平台下开发的,所以 它只支持java平台 ,在使用前应该先配置好java环境) tesseract 程序集(因为该程序集是在.net 2. ...

  5. MySQL--单表查询、多表查询简单概述

    表的前期准备: create table emp( id int not null unique auto_increment, name ) not null, sex enum('male','f ...

  6. js 分享一个 时钟效果

    <style>        *{            margin: 0;            padding: 0;        }        #outLine{       ...

  7. C#中的扩展方法（向已有类添加方法，但无需创建新的派生类型）

    C#中的扩展方法 扩展方法使你能够向现有类型"添加"方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样 ...

  8. 怒改springMVC项目为springBoot项目

    背景:公司最近在做项目升级,融合所有项目,但是目前使用的一个系统还是最原始的框架 springMVC+spring+mybatis ,前端还是jsp,easyui(技术老的掉牙),终于出手了,结果.. ...

  9. Leetcode之二分法专题-240. 搜索二维矩阵 II（Search a 2D Matrix II）

    Leetcode之二分法专题-240. 搜索二维矩阵 II(Search a 2D Matrix II) 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵 ...

  10. 一块钱哪里去了？--java浮点型背后的故事

    有这样一道智力题:三人住旅馆,老板娘说30元她们付钱后进去了,老板娘想起今天是特价25元,就叫伙计拿5元还给三位顾客,可伙计藏了2元,给了她们3元,这样她们每人得1元,就是说每人付了9元,那3*9=2 ...