优先级： 外部样式 < 内部样式表 < 内联样式表；

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

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. k8s rc

    RC是用来管理Pod的,每个RC由一个或多个Pod组成:在RC被创建之后,系统将会保持RC中的可用Pod的个数与创建RC时定义的Pod个数一致,如果Pod个数小于定义的个数,RC会启动新的Pod,反之 ...

  2. 【OCP题库】最新CUUG OCP 12c 071考试题库（68题）

    68.(29-13)choose two: Which two statements are true? (Choose two.) A) DICTIONARY is a view that cont ...

  3. robot framework学习笔记之十-模板

    测试模板可以让关键字驱动测试用例转换为数据驱动测试用例.鉴于普通测试用例是由关键字和可能的参 数组成,使用了模板的测试用例只需要定义模板关键字的参数即可

  4. wpa2破解代码思路（教你写poc）

    前言:此篇关于1.wpa2协议漏洞的产生原因:2.scapy这个数据包库的基础:3.最后讲解代码思路,让你们从伪代码可以直接写成代码展开介绍分享~ 本文作者:i春秋签约作家——kaikaix 1.大家 ...

  5. elasticsearch5.2.1使用logstash同步mysql

    centos 本人亲测可以  首先安装好mysql,elasticsearch   不懂的请参考另一篇文章 安装logstash官方:https://www.elastic.co/guide/en/l ...

  6. Create Index using NEST .NET

    Hello Guys, I have a doubt about how create index using NEST .NET. I created every fields in my C# m ...

  7. CPU缓存刷新的误解

    即使是资深的技术人员,我经常听到他们谈论某些操作是如何导致一个CPU缓存的刷新.看来这是关于CPU缓存如何工作和缓存子系统如何与执行核心交互的一个常见误区.本文将致力于解释CPU缓存的功能以及执行程序 ...

  8. rpm 安装卸载

    安装命令 rpm -i example.rpm 安装 example.rpm 包: rpm -iv example.rpm 安装 example.rpm 包并在安装过程中显示正在安装的文件信息: rp ...

  9. Java Web 热部署

    热部署有多种方案,下面的方案是其中的一种. 暂时还没找到一种令人满意的方案. 1,配置WEB Server 去这里 (https://tomcat.apache.org/download-90.cgi ...

  10. C#效率提升总结

    1. 尽量减少装箱 尽量减少字符串之间拼接 优先用StringBuilder,因为不会多次分配内存 String.Format()内部其实是调用了StringBuilder(),所以效率很高 2. 转 ...