优先级: 外部样式 < 内部样式表 < 内联样式表;

优先级,即:同名的选择器右边的会覆盖左边

1.内部样式表

<head>
<style>
/*内部样式表,一般用于覆盖公用样式*/
#headTip {
color: 0xff5;
}
</style>
</head>

2.使用link标签,在文档中声明使用外接资源,最常用的一种方式。

css外部样式表指定编码的@CHARSET="utf-8"; 需要放在第一行。

<head>
<link href="./my-common.css" rel="stylesheet" media="screen" type="text/css"/>
</head>

3.@方式,引入css,注意这个是异步加载的,在整个html加载之后才加载,会导致页面闪烁。不推荐使用。

<head>
<style>
@import 'my-common.css';
</style>
</head>

4.内联样式表,优先级最高最直白,但不能复用不容易维护。

<body>
<input type="text" style="color:0x550;font-size:30px;"/>
</body>

css的四种书写方式的更多相关文章

  1. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  2. 页面中CSS的四种引入方式的介绍与比较

    转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...

  3. CSS的四种引入方式

    1.使用link标签引入css文件: <head> <link rel="stylesheet" type="text/css" href=& ...

  4. css的四种使用方式

    方式一:内联样式 内联样式,也叫行内样式,指的是直接在style属性中添加CSS 示例: <DIV style="display: none;background:red"& ...

  5. css的三种书写方式

    一.内联样式 <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 二 ...

  6. css的四种隐藏方式

    1.opacity:0只是把元素隐藏起来了 ,但是还是占有布局,所以还是对布局有影响 <div class="div1"> snda:opacity:0只是把元素隐藏起 ...

  7. CSS的4种引入方式及优先级

    第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...

  8. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  9. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

随机推荐

  1. MVC-controller随笔

    初识MVC-controller随笔 之前用的一些其他框架,也没有系统性的学习MVC框架.最近才开始接触,给大家简单的分享一下经验. 1    MVC的核心就是Controller(控制器),它负责处 ...

  2. C#之通过图片地址下载图片

    因为项目上需要加载在线卫星云图,因此写了这个功能来把卫星云图下载的本地,在这里记录一下: string imageUrl=“http://image.nmc.cn/product/2018/08/06 ...

  3. Android : M 与 N 的权限管理

    从 M 开始,permission 分为 Normal permission Runtime permission Normal permission 直接在 manifest 里声明就可以用了. a ...

  4. (转)科普:SATA、PCIe、AHCI、NVMe

    原文链接:https://forum.51nb.com/thread-1670848-1-1.html IT 界总喜欢发明新名词.而且同一个东西,可能有几个不同的名字.同一个名字,又可能指不同的东西. ...

  5. “全栈2019”Java第八十八章:接口中嵌套接口的应用场景

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. SpringMVC 的映射

    27.1.1 @RequestMapping使用 之前,我们是把@RequestMapping注解放在方法之上,用来给方法绑定一个请求映射.除此以外,@RequestMapping注解还可以放在类的上 ...

  7. java中集合

    一. List集合:  一次只存储一个元素 1.常用的list集合是ArrayList (1)在创建这个集合的对象时, 需要指定这个集合存储的数据类型! 否则这个集合的数据是不安全的. (2)与数组的 ...

  8. Win10将用户名修改为英文

    前言 最近重装了一次Win10系统,手贱地在引导里设置了中文的用户名.使用微软账户进行登录后,Win10以这个中文名建立了用户的文件夹,使得少数软件安装或使用过程中,保存路径不支持中文路径,从而报错, ...

  9. Windows下部署安装Docker

    好长时间没用Docker,最近准备部署一下,做个记录,今天早上去官网下载,发现Docker开始区分Docker Community Edition(社区版)和Docker Enterprise Edi ...

  10. [Re:从零开始的分布式] 0.x——Reids实现分布式锁

    上节提到了,分布式锁通常应满足如下要求,互斥性.高可用.高效率.可重入.锁失效这五个基本原则.由于Redis自身“快”的特点,所以高效率可以看作满足. 下文在单机情况下与多机情况下,对利用Redis实 ...