简介：

  • CSS(Cascading Style Sheets)：层叠样式表，它用来控制HTML标签的样式，给网页结构穿衣服~
  • CSS的编写格式是键值对的形式  ->  格式：属性名 : 属性值；
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>have a try</title>

         <style>

         /*和html在body开工不同的是，css在head里面自由飞翔*/

         /* sublime里用ctrl+/快捷注释 */

         /* 标签{样式:值;样式:值;样式:值;} */ 

         /*示例设置段落的部分内容*/

        div{

                 color:#12F062;

                 background-color:green;

                 font-size:15px;
            }

         </style>

</head>

<body>

        <div>

            xxxxxxx

        </div>

</body>

</html>

三种CSS样式：

外联式、内嵌式、行内式

  • 行内式与内嵌式都没有把html与css分离，外联式分离
  • 开发过程使用优先级 外联式，内嵌式，行内式
  • 样式权重 行内式，内嵌式， 外联式

外联式

(也可称为外部式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，

在<head>内（不是在<style>标签内，不用写<style>标签）使用<link>标签将css样式文件链接到HTML文件内，在HTML代码中使用，如下面代码：

<link href="base.css" rel="stylesheet" type="text/css" />
  • css样式文件名称以有意义的英文字母命名，如 main.css。
  • rel="stylesheet" type="text/css" 是固定写法不可修改。
  • <link>标签位置一般写在<head>标签之内。

内嵌式

就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下代码将把多个<span>标签中的文字统一设置为红色：

<style>

     span{

                color:red;

             }

</style>

嵌入式css样式必须写在<style></style>之间，并且一般情况下内嵌式css样式写在<head></head>之间。

行内式

把css代码直接写在现有的HTML标签（如p,span...etc）中，如：

<p style="color:red; font-size:12px">这里文字是红色</p>
  • 注意要写在元素的开始标签里，下面这种写法是错误的： <p>这里文字是红色。</pstyle="color:red;font-size:12px">
  • 并且css样式代码要写在style=""双引号中

学习参考文档：

HTML快速入门：css

CSS 最核心的几个概念

CSS：概念和三种样式的更多相关文章

  1. 转载：CSS的组成,三种样式(内联式,嵌入式,外部式),优先级

    (仅供自己备份) 原文地址:http://blog.csdn.net/chq11106004389/article/details/50515717 CSS的组成 选择符/选择器+声明(属性+值) 选 ...

  2. 《转载》CSS中的三种样式来源：创作人员、读者和用户代理

    CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式,很多第一次学习CSS的朋友,对这三种来源可能会存在一些困惑,下面我写一下自己的理解,若有错误的地方还请指正. ...

  3. CSS选 择器 三种样式

    一.CSS三种样式 代码 宽度 高度 实线 颜色  A内联样式是优先级最高的方式 px必须写 A:内联式  弊端:代码多很乱 <body> <div class="divc ...

  4. CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级

    从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=" ...

  5. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  6. CSS 的三种样式 内联 内部 外部

    CSS:层叠样式表的缩写 就是 Cascading Style Sheets Cascading Style Sheets : 层叠样式表 优先级问题 :遵守就近原则  内联> 内部>外部 ...

  7. CSS中的三种基本的定位机制（普通流、定位、浮动）

    一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...

  8. HTML三种样式引入方式

    HTML三种样式引入方式   HTML有三种样式引入方式:行内样式(inline Styles).嵌入式样式表(Embedded Style Sheets).外部样式表(External Style ...

  9. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

随机推荐

  1. 11G新特性 -- ASM Fast Mirror Resync

    ASM Fast Mirror Resync     在oracle 10g中,如果asm磁盘因为光纤.控制器发生故障而发生failure,asm将无法继续向该磁盘中写入数据.     asm会将发生 ...

  2. MySQL 5.6新特性 -- Index Condition Pushdown

    Index Condition Pushdown(ICP)是针对mysql使用索引从表中检索行数据时的一种优化方法.   在没有ICP特性之前,存储引擎根据索引去基表查找并将数据返回给mysql se ...

  3. http_referer 白名单

    valid_referers none blocked *.ttlsa.com server_names ~\.image\. ~\.baidu\.; if ($invalid_referer) { ...

  4. 获取应用程序根目录物理路径（Web and Windows）

    这两个计划写一个小类库,需要在不同项目下任意调用.该类库需要对磁盘文件进行读写,所以就需要获取程序执行的磁盘路径,就简单的对获取磁盘路径的方法进行研究. 借助搜索引擎,我从网上搜罗来多种方法,都可以直 ...

  5. 【Java】Java Queue的简介

    阻塞队列 阻塞队列有几个实现: ArrayBlockingQueue LinkedBlockingQueue PriorityBlockingQueue DelayQueue SynchronousQ ...

  6. c++对c的加强

    1.register关键字的加强 register修饰符暗示编译程序相应的变量将被频繁地使用,如果可能的话,应将其保存在CPU的寄存器中,以加快其存储速度,这只是一种请求,编译器可以拒绝这种申请. ( ...

  7. Spring自动扫描无法扫描jar包中bean的解决方法（转）

    转载自:http://www.jb51.net/article/116357.htm 在日常开发中往往会对公共的模块打包发布,然后调用公共包的内容.然而,最近对公司的公共模块进行整理发布后.sprin ...

  8. Spring 自动转配类 在类中使用@Bean 注解进行转配但是需要排除该类说明

    在spring中可以使用 @Component @Configuration @Bean(实例化后返回该bean)进行类实例的自动装配. 需求: 排除指定需要自动转配的类. 说明: 1.在以上注解中  ...

  9. Halcon 2D测量

    * This program shows how to detect the edges of a diamond * with subpixel accuracy and calculate the ...

  10. Spark学习笔记——数据读取和保存

    spark所支持的文件格式 1.文本文件 在 Spark 中读写文本文件很容易. 当我们将一个文本文件读取为 RDD 时,输入的每一行 都会成为 RDD 的 一个元素. 也可以将多个完整的文本文件一次 ...