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. Linux电源管理(五)thermal【转】

    本文转载自:https://blog.csdn.net/zhouhuacai/article/details/78172267 版权声明:本文为博主原创文章,未经博主允许不得转载.    https: ...

  2. Ping 不通的原因分析

    背景 简介 ping是常用的网络管理命令,ping也属于一个通信协议,是TCP/IP协议的一部分,适用于windows和linux以及unix 根据reply用来检查网络是否通畅&网络连接的速 ...

  3. Golang模拟客户端POST表单功能文件上传

    客户端通过multipart.Write把文件的文本流写入一个缓存中,然后调用http的Post方法把缓存传到服务器. package main import ( "bytes" ...

  4. How to resize slide dimensions without resizing any objects on the slide?

    IF you are competent to unzip the pptx file and modify the XML it can be done, the slide size will c ...

  5. shiro 前后端分离 seseeionId 问题

    http://www.cnblogs.com/cshhs/p/9269411.html https://www.w3cschool.cn/shiro/rmvk1if1.html http://www. ...

  6. Paper Read: Robust Deep Multi-modal Learning Based on Gated Information Fusion Network

    Robust Deep Multi-modal Learning Based on Gated Information Fusion Network 2018-07-27 14:25:26 Paper ...

  7. K8S 安装笔记

    1. 准备CentOS7环境 #关闭防火墙 # systemctl disable firewalld # systemctl stop firewalld #安装etcd, kubernetes(会 ...

  8. Docker2之Service

    Make sure you have published the friendlyhello image you created by pushing it to a registry. We’ll ...

  9. 1、HA Cluster基础原理

    Linux Cluster  -->  linux集群类型分三种: LB:负载均衡,LoadBalance HA:双机集群系统,指高可用性集群,High Available HP:Hadoop ...

  10. 小程序学习一 .json 文件配置

    微信小程序——配置 以下就是小编对小程序配置的资料进行的系统的整理,希望能对开发者有帮助. 我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置 ...