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

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

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. Fiddler关闭后打不开网页

    今天项目系统测试的时候,CS客户端的Restful请求都失败,但是实际上的服务是正常开启的,马上通过cmd指令ping了一下服务,正常:再用telnet试了一下端口,也是正常.不过随后发现在这台电脑上 ...

  2. AHOI2012 信号塔 | 最小圆覆盖模板

    题目链接:戳我 最小圆覆盖. 1.枚举第一个点,考虑当前圆是否包含了这个点,如果没有,则把圆变成以这个点为圆心,半径为0的圆. 2.枚举第二个点,考虑圆是否包含了这个点,如果没有,则把圆变成以这两个点 ...

  3. Codeforces Beta Round #75 (Div. 1 Only) B. Queue　二分

    B. Queue Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 codeforces.com/problemset/problem/91/B Descrip ...

  4. Ceph 的基础数据结构 [Pool, Image, Snapshot, Clone]

    原文链接:http://www.cnblogs.com/sammyliu/p/4843812.html?utm_source=tuicool&utm_medium=referral 1 Poo ...

  5. 基于SSH的网上体育用品商城-JavaWeb项目-有源码

    开发工具:Myeclipse/Eclipse + MySQL + Tomcat 项目简介: 网上体育商城的主要功能包括:前台用户登录退出.注册.在线购物.修改个人信息.后台商品管理等等.本系统结构如下 ...

  6. 关于Mybatis 反向生成后 查询结果全部为null 解决办法

    今天遇到了一个问题,就是mybatis通过反向生成工具 生成的pojo类(实体类) xml文件 以及Mapper之后查询时结果为null 我写的代码怎么看都没有错 就是没有结果 后来在排除错误的时候发 ...

  7. 牛客OI赛制测试赛1 题解

    A 斐波那契 数竞生:这不是送分的常识吗? 这里引入一个叫卡西尼恒等式的玩意. 公式表达就是 设$fib[i]$为斐波那契数列的第$i$项$(i>0,i \in N_+)$ 则有 $fib[i+ ...

  8. Kali Linux来袭~老司机带你进击

    Kali是BackTrackLinux完全遵循Debian开发标准彻底的完全重建.全新的目录框架,复查并打包所有工具,我们还为VCS建立了Git树. 本次推荐内容主要介绍Kali-Linux的安装,包 ...

  9. Python 的 GIL 是什么鬼，多线程性能究竟如何

    作者:卢钧轶(cenalulu) 本文原文地址: http://cenalulu.github.io/python/gil-in-python/ 前言:博主在刚接触Python的时候时常听到GIL这个 ...

  10. php实现图片base64编码解码

    1.图片的base64编码 /*首先要确定图片的类型,需要安装一个php拓展php_fileinfo 如已安装可以在extension_dir目录下找到php_fileinfo.dll(windows ...