简介：

  • 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. IDEA使用笔记（六）——设置项目的JDK配置

    1:由于dev分支和master分支的代码差异比较多,所以,就从master上分出一个新的分支dev_,于是我就克隆新的代码,打开对应的项目文件,然后启动试试,发现报出如下的错误,很明显是因为没有制定 ...

  2. 【C语言】字节对齐问题（以32位系统为例）

    1. 什么是对齐? 现代计算机中内存空间都是按照字节(byte)划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定变量的时候经常在特定的内存地址访问,这就需要各类型 ...

  3. java 中的锁 -- 偏向锁、轻量级锁、自旋锁、重量级锁(转载)

    之前做过一个测试,详情见这篇文章<多线程 +1操作的几种实现方式,及效率对比>,当时对这个测试结果很疑惑,反复执行过多次,发现结果是一样的: 1. 单线程下synchronized效率最高 ...

  4. 查看占用IO的进程

    查看占用IO的进程 http://www.xaprb.com/blog/2009/08/23/how-to-find-per-process-io-statistics-on-linux/

  5. [Aaronyang] 写给自己的WPF4.5 笔记17[Page实现页面导航]

    1. 第一个Page页使用 新建PageDemo解决方案,默认wpf应用程序 右键项目新建页,然后指定App.xaml的默认启动窗口,为Page1.xaml,F5运行项目 文章内容已经迁移http:/ ...

  6. keras 文本分类 LSTM

    首先,对需要导入的库进行导入,读入数据后,用jieba来进行中文分词 # encoding: utf-8 #载入接下来分析用的库 import pandas as pd import numpy as ...

  7. Clustered Shading架构实现步骤

    最终决定越过Forward+,一步到位,直接调整至更先进的Clustered架构.步骤如下: 里程碑1:以CPU方式实现Light Culling,旨在理念验证,并与D3D10兼容里程碑2:以GPU ...

  8. 使用自定义的 Manager

    class CategoryManager(models.Manager): """ A manager that adds an "active()" ...

  9. java框架篇---hibernate之session状态

    Session接口是Hibernate向程序提供操纵数据库的最主要接口,是单线程对象,它提供了基本的保存.更新.删除和查询方法.它有一个缓存,保存了持久化对象,当清理缓存时,按照这些持久化对象同步更新 ...

  10. PE病毒初探——向exe注入代码

    PE文件其实就是Windows可执行文件,关于它的一些简要介绍摘自百度: PE文件被称为可移植的执行体是Portable Execute的全称,常见的EXE.DLL.OCX.SYS.COM都是PE文件 ...