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. 再谈fedora 23中的flash的安装

    安装下载, flash插件的地址是 https://get.adobe.com/flashplayer/ ls 的显示, 记住两个很常用的选项: 指定 "假设的屏幕的宽度" , - ...

  2. bzoj2086: [Poi2010]Blocks DP,单调栈

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=2086 思路 这就有点妙了 题目意思就是让你求平均数>=k的最长序列 先求出a[i] ...

  3. 程序修改图标后显示未更新——强制刷新windows图标缓存

    http://blog.csdn.net/vvlowkey/article/details/51133486 20160412 问题:修改兴迪局放测量软件图标后,release文件夹中生成文件的小图标 ...

  4. PHP中cookie思维导图

  5. Qt基础学习(3)-----滑动条之QSlider

    //mydialog.h #ifndef MYDIALOG_H #define MYDIALOG_H #include <QDialog> class QLineEdit; class Q ...

  6. 折腾了好久的地图缩放 ngui 各种偷懒实现

    当时找到一篇cocos2dx 地图缩放的  很遗憾我用不了  也要记录一下 免得以后用ugui可以用 转 http://blog.csdn.net/cocosnode/article/details/ ...

  7. mongdb使用技巧

    进入shell的方法:mongo 命令   # 使用系统服务启动 mongodb /etc/init.d/mongod # 或 service mongod start # 或 service mon ...

  8. SHA-256 加密原理

    网络中传输敏感信息的时候通常会对字符串做加密解密处理 SHA-256 加密原理

  9. Spotlight 监控Linux服务器的性能

    Spotlight功能:详细的进程跟踪功能远程连接在线的Unix/Linux的调优指南事件日志跟踪配置警报 详细的进程跟踪功能:Spotlight对具体的Unix / Linux的进程长达24小时的历 ...

  10. Web阶段总结以及感受(附带大一结束暑期学习的纲要)

    之前本人大一因为不是计算机专业的,而又喜欢计算机,所以在大一临时转专业到了计算机院(费劲一番波折),冷笑,还好,从大二开始就可以正式学习喜欢的软件了. 首先,前两天看到一个讲座,提到学习方法,并说出总 ...