#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内部类的整理。

    Java 内部类 分四种:成员内部类.局部内部类.静态内部类和匿名内部类. 成员内部类: (1)即作为外部类的一个成员存在,与外部类的属性.方法并列. 注意:成员内部类中不能定义静态变量,但可以访问外 ...

  2. CentOS7安装并使用Ceph

    1.准备工作1.1 安装配置NTP官方建议在所有 Ceph 节点上安装 NTP 服务(特别是 Ceph Monitor 节点),以免因时钟漂移导致故障. ln -sf /usr/share/zonei ...

  3. CodeForces-437C(贪心)

    链接: https://vjudge.net/problem/CodeForces-437C 题意: On Children's Day, the child got a toy from Delay ...

  4. 原生ajax 请求

    什么是ajax AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新, ...

  5. 【JZOJ1282】打工

    题目 分析 显然,有一个结论, 在有效的方案中,第i位的数一定小于等于i. 所以,设\(f_{i,j,k}\)表示,做到第i位,前i位的最大值为j,前i位是否与输入的序列的前i位相等. 转移方程随便搞 ...

  6. 【leetcode】1229.Meeting Scheduler

    题目如下: 你是一名行政助理,手里有两位客户的空闲时间表:slots1 和 slots2,以及会议的预计持续时间 duration,请你为他们安排合适的会议时间. 「会议时间」是两位客户都有空参加,并 ...

  7. py从入门到实践 第四章

    4.1 遍立列表 ~= shell 数组————————————————————————————————————————————thrink = ['link','path','pwd']for i ...

  8. SecureRandom的坑

    之前写随机数的时候一直用SecureRandom.getInstanceStrong()方法生成SecureRandom实例,进而调用其各种next方法.突然有一次,发现next方法卡住了, 每一次调 ...

  9. UNIX环境--线程

    一.线程的概念 1.线程在进程中是负责执行代码的一个单位,可以说线程是进程的一部分.一个进程中至少要有一个主线程,进程可以拥有多个线程. 2.线程和进程一样,线程会共享进程的一些信息.比如,代码段.全 ...

  10. [CF118D]Caesar's Legions 题解

    题意简述 一个01序列由\(n_1\)个0和\(n_2\)个1组成,求最长连续0串长度不超过\(k_1\),最长连续1串长度不超过\(k_2\)的序列的方案总数 题解 状态 方案总数 变量 已经取了i ...