#i1l{

    background-color: chartreuse;

    height: 40px;

}

#i2l{

    background-color: olivedrab;

    height: 40px;

}

#i3l{

    background-color: plum;

}

/*class选择器 .名称 属性里class等于这个.名称就可以用*/

.c1{

    background-color: olivedrab;

    color: chartreuse;

}

/*标签选择器 可以span也可以div  意思是这个类型的标签都是这个样式*/

span{

    background-color: darkred;

    height: 40px;

}

/*层级选择器 span空格div 类似的 就是span下的div标签*/

span div{

    background-color: ghostwhite;

    height: 40px;

}

/*组合选择器 用逗号*/

.c1,.c2{

    background-color: lightslategray;

    height: 40px;

}

/*属性选择器 属性可以是自定义的 对选择到的标签再通过属性进行一次筛选*/

input[type='text']{

    width: 50px;

    height: 20px;}

/*标签优先级：标签上的style属性优先之后 按css样式里从下往上的顺序.就近原则*/

commons.css

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--在标签style属性里写样式  写在head里-->

    <!--css文件引用-->

    <link rel="stylesheet" href="commons.css"/>

</head>

<body>

    <div id="i1l" >测试</div>

    <div id="i2l" >测试2</div>

    <div id="i3l" >测试3</div>

    <div class="c1">测试4</div>

    <span>测试5</span>

    <span>

        <div class="c2">测试层级</div>

    </span>

    <input class="c1" type="text">

    <input type="password">

    <!--color 字体颜色-->

    <!--border 边框 ：1px 边框像素1  dotted 边框虚线 solid 实心边框-->

    <!--border 宽度：样式：颜色-->

    <!--width 宽度可以用%来定义，height尽量不要用%-->

    <!--font-size 字体大小 text-align 水平位置居中  line-height 垂直根据高度居中-->

    <!--font-weight 字体加粗-->

    <div style="height:48px;width:80%;

        border: 1px solid darkred;

        font-size:30px;

        font-weight: bold;

        text-align: center;

        line-height: 48px;">style</div>

    <!--float:letf 飘 块标签可以叠加在一行，前提不能超过100% 子块标签多个叠加超过父类宽度自动换行-->

    <div style="width: 300px;border:1px solid red;">

        <div style="width: 20%;background-color: chartreuse;float: left">1</div>

        <div style="width: 80%;background-color: olive;float: left">2</div>

        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div>

        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div>

        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div>

        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div>

        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div>

        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div>

        <div style="clear: both;"></div>

    </div>

    <!--原本div是块标签 但是style里添加 display: inline 就变为行内标签 等同span-->

    <!--原本span是行内标签 但是style里添加 display: block 就变为块标签 等同div-->

    <!--块级标签可以设置高度 宽度 边距 例如div  ，但是行内标签不可以设置这些 例如span a-->

    <!--但是如果在style 里添加display: inline-block 呢它就具有块和行内标签所有属性 ：默认有多少占多少，高宽可设定-->

    <!--display:none 可以设置当前标签消失-->

    <div style="background-color: lightslategray;display: inline">行内标签</div>

    <span style="background-color: chartreuse">行内标签</span>

    <span style="background-color: chartreuse;display: block">行内标签</span>

    <!--外边距margin， 内边距padding-->

    <div style="background-color: cornflowerblue;height: 70px;">

        <div style="background-color: forestgreen;height: 50px;padding-top: 10px;">padding</div>

    </div>

    <div style="background-color: cornflowerblue;height: 70px;">

        <div style="background-color: peachpuff;height: 50px;margin-top: 10px;">margin</div>

    </div>

</body>

</html>

css文件引用的更多相关文章

  1. css文件 引用后不起作用

    你如果填写的是相对路径,那么检查一下路径是否正确. 如果相对路径正确,那么有可能你的css样式的层级错误(概率也不低),比如说图片的引用路径发生了改变等等. 要看你预览的浏览器是什么,我经常遇到IE预 ...

  2. JavaScript使用localStorage缓存Js和css文件

    对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的 下面的代 ...

  3. 引用CSS文件到html网页里方法

        引用CSS文件到Html方法-css引入,css引用 使用不同的方法来引用css样式表,最终到达的效果相同,但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率. html引用cs ...

  4. css笔记14：css文件之间可以相互引用

    css文件之间相互引用是通过@import指令完成的 格式: @import  url("被引用的css文件"); 顺便说一句,如果希望在html或者php文件中引用某个xxx.c ...

  5. 引用：使用grunt 压缩 合并js、css文件

    引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存 ...

  6. 动态为页面添加CSS样式文件引用

    动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...

  7. ASP.NET中母版页引用外部js或css文件无效,提示对象未定义解决方法

    最近做网站用了一个js+css实现的带有二级菜单的导航条,在母版页创建好后,子页面调用出现了许多奇怪的问题,多方查证后的最终解决方案和大家分享下.... 1.路径问题 如果是一个单独的aspx页面调用 ...

  8. 关于WEB-INF目录不提供外部访问及JSP引用 js，css 文件路径问题

    在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...

  9. asp.net后台代码动态添加JS文件和css文件的引用

    首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGeneric ...

随机推荐

  1. 浅谈java虚拟机|系列2|JVM运行时

    今天我们继续谈谈JVM架构. 今天主要讲讲JVM运行时, 先来一个图: 上篇文章,我们知道,JVM运行时,简单来说就是把class文件翻译成操作系统相关的机器码(或汇编语言),然后通过调用操作系统函数 ...

  2. Linux系统中的硬件问题如何排查？(3)

    Linux系统中的硬件问题如何排查?(3) 2013-03-27 10:32 核子可乐译 51CTO.com 字号:T | T 在Linux系统中,对于硬件故障问题的排查可能是计算机管理领域最棘手的工 ...

  3. Python 爬虫插件

    #coding:utf-8import sys,urllib2,re,Queuesys.path.append("..") from lib.Http_Class import H ...

  4. 磁盘IO过高时的参考

    主要命令:echo deadline > /sys/block/sda/queue/scheduler 注:以下的内容仅是提供参考,如果磁盘IO确实比较大的话,是数据库,可以进行读写分离或者分库 ...

  5. 怎样将shp文件的坐标点导出来？

    方法一: 1.将线矢量转化为点矢量 具体操作步骤如下: (1)arctoolbox\Data Management tools\Features\双击Feature Vertices to point ...

  6. jsonp跨域实例

    一.什么是跨域 二.如何解决跨域 1.前端常用 JSONP 2.服务器端配置 HTTP 协议的 header 解析 三.JSONP实现的实例 <!DOCTYPE html> <htm ...

  7. linux 系统下 tar 的压缩与解压缩命令

    1.压缩 [small@sun shine]# tar -zcvf java.tar.gz java java/ java/default/ java/default/THIRDPARTYLICENS ...

  8. 多线程--future模式初体验

    第一次使用多线程,虽然理解的不是很透彻,但是也值得记录下.用的是future模式. 创建个线程池:private ExecutorService cachedThreadPool = Executor ...

  9. BZOJ 4653: [Noi2016]区间 双指针 + 线段树

    只要一堆线段有重叠次数大于等于 $m$ 次的位置,那么一定有解 因为重叠 $m$ 次只需 $m$ 个线断,将那些多余的线断排除掉即可 先将区间按照长度从小到大排序,再用 $two-pointer$ 从 ...

  10. 【canvas学习笔记六】状态保存和变换

    save()和restore() save() 保存当前状态,将当前canvas的状态存入栈中. restore() 恢复之前save的一个状态,将之前的状态从栈中弹出. 保存的当前状态包含以下信息: ...