我们为什么需要CSS?

使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，
我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很
多重复的样式属性，并且修改的时候需要逐个修改，费心费力。是时候做出改变了，所以CSS就出现了。

CSS的出现解决了下面两个问题：

将HTML页面的内容与样式分离。

提高web开发的工作效率。

什么是CSS?

CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。

也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

css的优势

1.内容与表现分离 

2.网页的表现统一，容易修改 

3.丰富的样式，使页面布局更加灵活 

4.减少网页的代码量，
增加网页浏览器速度，节省网络带宽 

5.运用独立页面的css,有利于网页被搜索引擎收录

如何使用CSS？

我们通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，

然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标

签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。

CSS基础语法

css的三种引入方式

内嵌方式（不方便维护，不建议使用）

每个项目分别建立文件夹

style标签

<!doctype html>

<html>

    <head>

        <meta charset="utf8">

        <style>

            p {

                color: red;

            }

        </style>

    </head>

    <body>

        <p>这是一个p标签！</p>

    </body>

</html>

行内样式

<!doctype html>

<html>

<head>

<meta charset="utf8">

</head>

<body>

<p style="color: blue;">这是一个p标签！</p>

</body>

</html>

外联样式表-链接式（主要使用这种方法）

link标签

----------

index.css

p {

  color: green;

}

----------

然后在HTML文件中通过link标签引入：

<!doctype html>

<html>

    <head>

        <meta charset="utf8">

绝对路径

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

    </head>

    <body>

        <p>这是一个p标签！</p>

    </body>

</html>

----------------------------------------------------------

外联样式表-@import url()方式 导入式

了解即可。

----------------------

index.css

@import url(other.css)

---------------------

注意：

@import url()必须写在文件最开始的位置。

链接式与导入式的区别

1、<link/>标签属于XHTML,@import是属性css2.1

2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示

3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中

4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的

前端-CSS-介绍及三种引入方式的更多相关文章

  1. CSS文件的三种引入方式

    CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...

  2. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  3. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

  4. CSS【03】：CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  5. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  6. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  7. 006 CSS三种引入方式

    CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...

  8. Python 45 css三种引入方式以及优先级

    一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具 ...

  9. 11 CSS的三种引入方式和基本选择器

    <!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...

随机推荐

  1. 创意：Soap一款新型的触摸式家用智能路由器

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/iefreer/article/details/34808749 Soap简单介绍 这里的Soap不是 ...

  2. c#代码获取web.config配置文件里面设置的 <compilation debug="true"节点

    == 在我们的web.config文件中,有像下面的这样的一个配置, <system.web> <identity impersonate="true" user ...

  3. zz 【见闻八卦】《金融时报》年度商业书单：互联网题材占一半

    [见闻八卦]<金融时报>年度商业书单:互联网题材占一半 文 / 见闻学堂 2014年12月18日 09:47:38 0   中国最好的金融求职培训:见闻学堂(微信号:top-elites) ...

  4. es6 中，大多数开发者和 babel 之类的工具默认添加 use strict 到 JS 文件的头部，确保采用严格模式

    严格模式(use strict) 有助于防止问题用法,并且它也有助于安全使用 JavaScript. 在 ES5 中, 严格模式是可选项,但是在 ES6 中,许多特性要求必须使用严格模式. 因此大多数 ...

  5. go test 初始化--- TestMain的使用

    go test 功能,提高了开发和测试的效率. 有时会遇到这样的场景: 进行测试之前需要初始化操作(例如打开连接),测试结束后,需要做清理工作(例如关闭连接)等等.这个时候就可以使用TestMain( ...

  6. hadoop入门篇-hadoop下载安装教程（附图文步骤）

    在前几篇的文章中分别就虚拟系统安装.LINUX系统安装以及hadoop运行服务器的设置等内容写了详细的操作教程,本篇分享的是hadoop的下载安装步骤. 在此之前有必要做一个简单的说明:分享的所有内容 ...

  7. elastic-job 分布式定时任务框架 在 SpringBoot 中如何使用（二）动态添加任务需求

    之前一篇用过了如何在使用创建最简单的任务:比如每天定时清空系统的缓存 这篇文章主要讲解:如何运用elastic-job-lite做灵活的细粒度任务,比如: 如何定时取消某个订单在下订单后30分钟未支付 ...

  8. JAVA Date类与Calendar类【转】

    Date类 在JDK1.0中,Date类是唯一的一个代表时间的类,但是由于Date类不便于实现国际化,所以从JDK1.1版本开始,推荐使用Calendar类进行时间和日期处理.这里简单介绍一下Date ...

  9. Zabbix 命令：zabbix_get

    zabbix_get 作用总有人在群里提问,为什么 zabbix 获取不到数据,为什么 zabbix 提示 Not Support,怎么办?别老问,用 zabbix_get 试着获取数据即可.在 za ...

  10. fiddler链接手机

    fiddler设置: 见python_request-上海悠悠 哪里有说 手机和window设置: 1,要把电脑防火墙关掉 2.手机访问http://ip:port安装Fiddler证书,特别注意IO ...