css的存在形式以及优先级

css不仅仅可以在每个head标签中定义，而且也可以写在一个文件中，每个页面即可进行引用，这样可以做到重复利用。

css文件的写法如下：

common.css

.c1{
    height: 48px;
    width: auto;
    border: 1px solid red;
    font-size: 16px;
    text-align: center;
    line-height: 48px;
}
#i{
    height: 48px;
    width: auto;
    border: 1px solid red;
    font-size: 16px;
    text-align: center;
    line-height: 48px;
}

直接在里面写入css样式即可，写完后保存。

引用方式如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <link rel="stylesheet" href="common.css"/>
</head>
<body>
<div class="c1">样式测试</div>
</body>
</html>

<link rel="stylesheet" href="common.css" 的真实含义其实就是相当于把文件中定义的样式复制到这篇HTML中，所以你在引用的

时候直接用css文件中定义好的选择器即可。

css选择器的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        .c1{
            height: 48px;
            width: auto;
            border: 1px solid red;
            font-size: 16px;
            text-align: center;
            line-height: 48px;
        }
        #i{
            height: 48px;
            width: auto;
            border: 1px solid rebeccapurple;
            font-size: 16px;
            text-align: center;
            line-height: 48px;
        }
    </style>
</head>
<body>
<div class="c1" id="i">样式测试</div>
</body>
</html>

在这篇代码中我们可以看到body标签中的div引用了两个样式，c1样式的边框颜色是红色，i样式的边框颜色是紫色，执行代码后，“style 中靠后的样式优先展示”

优先级最高的是在div，或者其他的标签自己内部定义的样式，这是最高级的。

css的存在形式以及优先级的更多相关文章

  1. 2、css的存在形式及优先级

    一.优先级 简单可以理解为就近原则: <html lang="en"> <head> <meta charset="UTF-8"& ...

  2. css的存在形式及优先级

    1. 查看源代码---在谷歌浏览器中右击-->点检查 2. CSS中style优先级,标签上的style优先,其它按照编写顺序越更新越优先,后面的会把前面的覆盖掉. 3. 如果想在其它的html ...

  3. CSS三种写法的优先级

    在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...

  4. css选择器的分类及优先级计算方法总结

    首先声明一下CSS三大特性—— 继承. 优先级和层叠.继承即子类元素继承父类的样式;优先级是指不同类别样式的权重比较;层叠是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  5. css的核心原理分为优先级原则与继承原则两大部分

    css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性 1>优先 ...

  6. CSS：CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  7. css知多少——选择器的优先级

    1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

  8. css笔记09：选择器优先级

    1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  9. 设置css三种方法的优先级

    有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...

随机推荐

  1. Unix系统解压tar包时出现@LongLink错误

    Unix系统上使用tar命令解压tar包后,多了一个@LongLink的文件,并且原来的tar包解压后不完整.网上查了下,原因是AIX系统上tar命令自身的一个缺陷.解决办法:把该tar包上传到lin ...

  2. 快速使用shortcut，适配各种ROM

    地址(徐医生的GitHub):https://github.com/xuyisheng/ShortcutHelper 常用API     /**      * 添加快捷方式      *      * ...

  3. codevs 1269 匈牙利游戏

    /*暴力+乱搞 55分(似乎只有暴力得分了)*/ #include<iostream> #include<cstdio> #include<cstring> #in ...

  4. php 读xml的两种方式

    <?xml version="1.0" encoding="ISO-8859-1"?> <st> <stu> <nam ...

  5. 看android的书的体会

    android书上面的代码有时候有问题,可以在网上搜索这些功能.网上和官方文档里面有很好的说明和例子.

  6. 安装VS2010后，如何设置老版本的项目文件不是默认用VS2010打开

    1.系统先后安装了VS2008和VS2010,在打开用VS2008创建的项目文件时总是会默认用VS2010打开,选择打开方式都不行,很不方便,差点要把VS2010卸载了.     其实只需要简单设置V ...

  7. nginx环境下搭建nagios 3.5.0，及配置pnp4nagios画图

    本文基于<LNMP最新源码安装脚本>,Nagios依赖PHP环境和perl环境,由于Nginx不支持Perl的CGI,需先来搭建Perl环境,Nagios原理介绍略.一.下载最新稳定源码包 ...

  8. Win8 IE10 只能以管理员打开的解决方法

    Win8 IE10 只能以管理员打开的解决方法 使用 Windows8 一段时间后,最近遇到 IE10 打不开,只能以管理员身份打开,很是郁闷.无论禁用IE加载项还是恢复默认设置都无效,也看到论坛不少 ...

  9. 你好，C++（26）如何与函数内部进行数据交换？5.1.3 函数参数的传递

    5.1.3  函数参数的传递 我们知道,函数是用来完成某个功能的相对独立的一段代码.函数在完成这个功能的时候,往往需要外部数据的支持,这时就需要在调用这个函数时向它传递所需要的数据它才能完成这个功能获 ...

  10. CSS中zoom:1的作用

    兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题.比如,本站使用DIV做一行 ...