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

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

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. Let it crash philosophy part II

    Designing fault tolerant systems is extremely difficult.  You can try to anticipate and reason about ...

  2. BZOJ1558 等差数列

    题目链接:戳我 实话实话,看了几篇题解真的没看懂,我觉得讲的都有问题.这里对于线段树维护的s写了一点我自己的理解. 看到等差数列,我们考虑对数列做差,这样如果是等差数列,那么值应该相等.(比较容易维护 ...

  3. Media change : please insert the disk labeled

    在Debian中使用apt-get安装软件包时经常会提示让你插入netinst的光盘: Media change: please insert the disc labeled 当没有时就无法进行安装 ...

  4. ClamAV学习【9】——cvd文件解析及cli_untgz函数浏览

    这个cli_untgz函数,是用来解压CVD文件的. 那么,就刚先搞清楚CVD文件的功能作用.下了源码,我们会发现,没有前面提到的*.mdb或者*.hbd等病毒签名文件.原因就是,那些文件都是由CVD ...

  5. 比较有用的php代码片段

    一 从网页中提取关键词 $meta = get_meta_tags('http://www.emoticode.net/'); $keywords = $meta['keywords']; // Sp ...

  6. spring利用注解方式实现Java读取properties属性值

    1. 建立properties文件:我在resource下面建立一个config文件夹,config文件夹里面有mytest.properties文件,文件内容如下: sam.username=sam ...

  7. BZOJ4012 [HNOI2015]开店 (动态点分治)

    Description 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到 人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱.这样的 想法当然非常好啦,但是她们也发现 ...

  8. ElasticSearch学习笔记(三)logstash安装和logstash-input-jdbc插件

    ElasticSearch的索引可以手动添加索引的,就是类似下面这样添加的 PUT /movies/movie/1 { "title": "The Godfather&q ...

  9. 【Quartz】解密properties配置文件中的账号密码

    在配置quartz时,为了保密某些信息(特别是账号密码),通常会使用密文.那么在实际使用这些配置信息时,需要进行解密.本文提供一种解密方法如下: (1)假设在properties文件中加密了账号密码 ...

  10. 小M的作物 最小割最大流

    题目描述 小M在MC里开辟了两块巨大的耕地A和B(你可以认为容量是无穷),现在,小P有n中作物的种子,每种作物的种子有1个(就是可以种一棵作物)(用1...n编号). 现在,第i种作物种植在A中种植可 ...