#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. openssl x.509证书

    openssl x.509证书 openssl x.509证书 ngnix 支持

  2. P1903 奖学金题解

    众所周知,这是一道通过struct结构体进行排序的题目 思路:平常的输入.. 然后定义一个结构体grade,存放每个学生的学号.三科成绩.(也可以只存语文成绩和总分和学号) 自定义cmp函数,通过三层 ...

  3. C# WinFrom自适应

    1.在窗体的Project中建一个自适应的类. 2.类的代码如下 public class AutoSizeForm { //(1).声明结构,只记录窗体和其控件的初始位置和大小. public st ...

  4. 给oracle命令的参数赋值

    ''' <summary>    '''   给oracle命令的参数赋值    ''' </summary>    ''' <param name="cmd& ...

  5. ztree多种数据包装以及相关设置

    首先来一个完整的ztree代码 html代码 <form id="addTreeDataFrm" method="post" class="fo ...

  6. 一个web应用的诞生(4)

    上一章实现了登录的部分功能,之所以说是部分功能,是因为用户名和密码写成固定值肯定是不可以的,一个整体的功能,至少需要注册,登录,密码修改等,这就需要提供一个把这些值存储到数据库的能力. 当前的主流数据 ...

  7. javascript的基础知识点

    一:鼠标提示框 需求描述:鼠标移入都input上,div显示,移出,div消失 分析:控制display=block/none 鼠标移入,鼠标移出事件  <input type="bu ...

  8. HDU-3415-Max Sum of Max-K-sub-sequence(单调队列,带限制的最大子段和)

    链接: https://vjudge.net/problem/HDU-3415 题意: Given a circle sequence A[1],A[2],A[3]......A[n]. Circle ...

  9. ESP8266WiFiGeneric---通用库--事件和配置

    ESP8266WiFiSTAClass .ESP8266WiFiScanClass .ESP8266WiFiAPClass 可以访问 ESP8266WiFiGenericClass的private和p ...

  10. C# 指定索引排序 (原)

    private void test(string[] sortkey_list, string[] list_temp) { //打开excel到dt: " }; string[] roww ...