1.行内样式

body内:

<p style="text-indent: 2em;color: red">
我是行内样式
</p>

2.内部样式表

body内:

<div class="inside">
我是内部样式表我是内部样式表
</div>

head内:

<style type="text/css">
.inside{
width: 300px;
height: 300px;
border: 1px solid blue;
}
</style>

3.外部样式表

body:

<div class="outside">
我是外部样式表
</div>

head内连接外部css样式代码:

<link rel="stylesheet" type="text/css" href="css/outside.css">

外部样式代码:

.outside{
width: 300px;
margin-bottom: 20px;
height: 200px;
background-color:#0f0;
}

优先级:行内样式>内部样式表>外部样式表

三种css样式表及其优先级的更多相关文章

  1. CSS三种插入样式表格式

    首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距. ...

  2. 三种CSS样式

    内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式css样式表就是把css代码直接 ...

  3. HTML基础(三)——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  4. CSS的三种样式表和优先级

    1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...

  5. CSS:CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  6. CSS样式表优先级

    使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...

  7. 3月22日 html(三)css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...

  8. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  9. css三种引入方式以及其优先级的说法

    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...

随机推荐

  1. 通过SIMPLE_DEV_PM_OPS定义suspend和resume函数【转】

    本文转载自:https://blog.csdn.net/tiantao2012/article/details/77851782 通过SIMPLE_DEV_PM_OPS 定义这个驱动的suspend和 ...

  2. 【定制Android系统】Android O 在ROM中添加自己的 so 库(1)——Android.mk 与 Android.bp 的区别【转】

    本文转载自: 版权声明:本文为博主原创文章,转载时请注明原作者及出处.    https://blog.csdn.net/u014248312/article/details/82020204需求:在 ...

  3. 简单明了的掌握diff命令? 参考: http://www.ruanyifeng.com/blog/2012/08/how_to_read_diff.html

    diff是比较两个 文本文件, 或目录,(中名字相同的文件) diff 是按行来比较的, 只要两个对应的行, 不完全一致, 就报告为不同, 否则就视为相同. (一行中任意一点的不同...) 检查时, ...

  4. LOJ 6485 LJJ学多项式

    前言 蒟蒻代码惨遭卡常,根本跑不过 前置芝士--单位根反演 单位根有这样的性质: \[ \frac{1}{n}\sum_{i=0}^{n-1}\omega_{n}^{ki}=\left[n|k\rig ...

  5. (转)Paper list of Meta Learning/ Learning to Learn/ One Shot Learning/ Lifelong Learning

    Meta Learning/ Learning to Learn/ One Shot Learning/ Lifelong Learning 2018-08-03 19:16:56 本文转自:http ...

  6. HDU 4311 Meeting point-1(曼哈顿距离最小)

    http://acm.hdu.edu.cn/showproblem.php?pid=4311 题意:在二维坐标中有n个点,现在要从这n个点中选出一个点,使得其他点到该点的曼哈顿距离总和最小. 思路: ...

  7. Windows系统零开始前端开发环境配置

    1. 安装nodejs 国内下载页面(推荐) 官网下载页面 现在的nodejs自带NPM,只需点击下一步下一步安装即可. 为了加速国内NPM包下载,可配置淘宝NPM镜像 2. 安装git 国内下载页面 ...

  8. nginx的使用教程

    一.基本概念 1.1 正向代理和反向代理 (参考文档:https://www.cnblogs.com/hafiz/p/7233306.html) 假设我们给定客户端A.代理服务器B.以及最终服务器C ...

  9. spring mvc 形参类型

    spring mvc 形参类型 1 没有占位符号的,形参的名字为参数的名称 请求路径为:organtrans/t1/t5?a=1(a为形参的的名称必须一致) @RequestMapping(" ...

  10. kotlin - 空安全

    空安全设计的操作符号 操作符 作用 ? 可空操作符,声明该值可为空 ?. 安全调用操作符       b?.length 如果b非空,就返回b.length,否则返回 null !! 非空断言运算符, ...