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

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

1.内部样式表

  1. <head>
  2. <style>
  3. /*内部样式表,一般用于覆盖公用样式*/
  4. headTip {
  5. color: 0xff5;
  6. }
  7. </style>
  8. </head>

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

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

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

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

  1. <head>
  2. <style>
  3. @import 'my-common.css';
  4. </style>
  5. </head>

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

  1. <body>
  2. <input type="text" style="color:0x550;font-size:30px;"/>
  3. </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. sharepoint site performance

    分析了您之前提供的在CPU使用率高的时候抓取的w3wp进程的dump,以下是一些发现: 在抓取dump文件的这个时刻,.Net的垃圾回收正在运行,在内存资源紧张时,.Net会自动启动内存垃圾回收机制, ...

  2. python当中的装饰器

    1.装饰器 首先我们来说一下一个软件的设计原则:开闭原则,又被称为开发封闭原则,你的代码对功能的扩展是开放的,你的程序对修改源代码是封闭的.这样的软件设计思路可以更好的维护和开发. 开放:对功能扩展开 ...

  3. Java50道经典习题-程序9 求完数

    题目:一个数如果恰好等于它的因子之和,这个数就称为"完数".例如6=1+2+3.编程找出1000以内的所有完数. public class Prog9 { public stati ...

  4. java学习笔记—标准连接池的实现(27)

    javax.sql.DataSource. Java.sql.* DataSource 接口由驱动程序供应商实现.共有三种类型的实现: 基本实现 - 生成标准的 Connection 对象 – 一个D ...

  5. SQL Server 根据树状结构表生成以/号分割的路由字符串

    很多情况下,我们有必要把树形结构进行数据梳理.比如,要方便的过滤出一个父节点下的所有子节点等等... 这个时候,我们可以生成一个路径表字符串,在应用时只需要对该字符串进行索引即可达成目的. 目标:按图 ...

  6. linux系统无法启动,提示give root password for maintenance错误

    电脑的虚拟机安装的是centos6.2操作系统,今天打开虚拟机时候,提示 give root password for maintenance (or type control-D to contin ...

  7. jQuery入门讲解

    jQuery设计思想: (1)选择页面元素 css选择器: $(document) 选择整个文档对象, $("#myId") 选择id为myId的页面元素, $("div ...

  8. [Objective-C语言教程]命令行参数(23)

    执行时,可以将一些值从命令行传递给Objective-C程序. 这些值称为命令行参数,很多时候它们对程序很重要,特别是当想要从外部控制程序而不是在代码中对这些值进行硬编码时就很有用了. 命令行参数使用 ...

  9. (转)使用VS实现XML2CS

    转自 StackOverFlow Method 1 XSD tool Suppose that you have your XML file in this location C:\path\to\x ...

  10. Spring注解大全,汇总版

    Spring使用的注解大全和解释 注解 解释 @Controller 组合注解(组合了@Component注解),应用在MVC层(控制层),DispatcherServlet会自动扫描注解了此注解的类 ...