概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

简单的来说：css在一个网页中负责页面数据的样式，从而使得页面的结构和表现分离。

引入方式

css引入到html中的方式一共分为三种：

1、内部样式：在style标签中编写css代码。此种引入方式只能作用于本页面，复用性不强。

格式：

　　 <style type="text\css">
                编写css的代码。
        </style>

代码示例

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

         <style type="text/css">

         a{

             color: red;

             font-size: 20px;

         }

         </style>

     </head>

     <body>

         <a href="http://www.baidu.com">百度</a><br />

         <a href="http://www.aiqiyi.com">爱奇艺</a><br />

         <a href="http://www.youku.com">优酷</a><br />

     </body>

 </html>

2、外联样式：可以引入外部的css文件。 推荐使用。

css文件代码

 a{

     color: red;

     font-size: 20px;

     text-decoration: none;

 }

外联样式的格式分为两种：

格式一：使用link标签。   推荐使用...

具体格式：

　　<link href="css文件的路径" rel="stylesheet">

代码示例：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

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

     </head>

     <body>

         <a href="http://www.baidu.com">百度</a><br />

         <a href="http://www.aiqiyi.com">爱奇艺</a><br />

         <a href="http://www.youku.com">优酷</a><br />

     </body>

 </html>

格式二：使用<style>引入

具体格式：

　　<style type="text/css" >
             @import url("css的路径");
      </style>

代码示例：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

         <style type="text/css">

             @import url("css/1.css");

         </style>

     </head>

     <body>

         <a href="http://www.baidu.com">百度</a><br />

         <a href="http://www.aiqiyi.com">爱奇艺</a><br />

         <a href="http://www.youku.com">优酷</a><br />

     </body>

 </html>

link和@import引入外部样式的区别：
(1)、隶属上的差别
     link属于HTML标签，而@import完全是CSS提供的一种方式。
(2)、@import次数限制
    @import只能引入31次css文件。
(3)、加载顺序的不同
     当页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显。
(4)、兼容性上的差别
     由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题
(5)、使用DOM控制样式时的差别
     当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

3、行内样式：直接在html标签使用style属性编写。    只能用于本标签中，复用性较差。 不推荐使用。

代码示例：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <body>

         <a href="http://www.baidu.com" style="color: black; text-decoration: none;">百度</a><br />

         <a href="http://www.aiqiyi.com">爱奇艺</a><br />

         <a href="http://www.youku.com">优酷</a><br />

     </body>

 </html>

css中的注释格式：/* css的注释 ..*/

注意：注释不可以嵌套。

css（一）-- 概述以及引入方式的更多相关文章

  1. CSS的4种引入方式及优先级

    第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...

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

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

  3. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

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

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

  5. 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制，还可以声明什么控制？ 3,如何让2个div，并排显示。4，清除浮动 clear：left / right / both

    1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...

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

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

  7. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  8. CSS（一） 引入方式 选择器 权重

    Css(一) Cascading Style Sheet 层叠样式表 css注释方式/*  */ 一.Css引入方式 1. 行间样式 style=" key:value; " &l ...

  9. CSS三：CSS的三种引入方式

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

随机推荐

  1. C: define many functions using predefine..

    /* Defines COUNTER. There must be exactly one such definition at file scope * within a program. */ # ...

  2. Android上掌纹识别第一步：基于OpenCV的6种肤色分割 源码和效果图

    Android上掌纹识别第一步:基于OpenCV的6种肤色分割 源码和效果图 分类: OpenCV图像处理2013-02-21 21:35 6459人阅读 评论(8) 收藏 举报   原文链接  ht ...

  3. 深入解析FileInputStream和FileOutputStream

    http://swiftlet.net/archives/1363 FileInputStream和FileOutputStream类属于字节类,可以操作任意类型的文件.在数据流的处理过程中,有两种情 ...

  4. OpenCv的Java,C++开发环境配置

    1.OpenCV 下载及安装配置 opencv的下载地址:http://opencv.org/downloads.html 最新版本:opencv3.0.0 注意:支持的visual studio20 ...

  5. Android自定义属性，format详解

    1. reference:参考某一资源ID. (1)属性定义: <declare-styleable name = "名称"> <attr name = &quo ...

  6. java工程开发之图形化界面之（第四课）

    本节中,我们将创建一个小应用程序,它使用循环生成其图案.我们将使用if语句和setColor方法.同时我们将介绍drawString方法,并使用它在小应用程序窗口中写出文本. 下面的小应用程序是显示一 ...

  7. linux export将PATH环境变量误删了的解决办法

    今天新增环境变量的时候不小心把冒号错打成了分号 export PATH=/usr/local/php5/bin;$PATH; 导致PATH变量为/usr/local/php/bin 解决办法:[ubu ...

  8. Android Studio 修改主题

    http://jingyan.baidu.com/article/6f2f55a18040aeb5b93e6cb4.html

  9. vsftp访问异常

    在LINUX下vsftp建立一个FTP服务器,但通过ftp的命令控制台使用FTP时,ls无法查看目录, 当然更无法上传下载文件了! 出错如下 : ftp> ls 227 Entering Pas ...

  10. android使用百度app分享，app统计出现的异常,FrontiaApplication类

    想在app里加入百度分享和百度统计.查看了百度移动统计的文档后下载官网给的demo.参照demo给出的代码给自己的app加入代码.以上步骤比较简单.不细说,下面说下此过程需要注意的一些点,不然会引发异 ...