#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. ubuntu 添加新用户并赋予root权限

    1 sudo adduser wolbo 2 sudo vim /etc/sudoers root ALL=(ALL) ALLwolbo ALL=(ALL) ALL wolbo ALL=(ALL) N ...

  2. yum安装nginx服务

    配置yum源 官网更新源地址:nginx 添加到 yum.repos.d 中 vim /etc/yum.repos.d/nginx.repo [nginx-stable] name=nginx sta ...

  3. Python之网路编程之死锁，递归锁，信号量，Event事件，线程Queue

    一.死锁现象与递归锁 进程也是有死锁的 所谓死锁: 是指两个或两个以上的进程或线程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用, 它们都将无法推进下去.此时称系统处于死锁状态或系统 ...

  4. 数据库导出数据到excel格式

    场景: 由于业务人员经常会找DBA导出一些数据,写了一个自动导出脚本. import pymysql from openpyxl import Workbook from openpyxl.write ...

  5. java总结1

    栈,堆,方法区.main和局部变量在栈,new 对象 在堆, 类和常量在方法区除了8大基础数据类型,其他都为引用变量局部变量在函数内或方法上声明,没有默认值,定义必须赋值一旦提供构造方法,就不会有默认 ...

  6. c# B/S下 如何优化文件上传速度和实现断点续传问题

    IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头. 一. 两个必要响应头Accept-Ranges.ETag 客户端每次提交下载请求时,服务 ...

  7. 【Leetcode】位1的个数

    解题方案:位操作的技巧 整数 n 和 n-1(n>0) 做与运算,从其二进制形式来看,可以消掉 n 的二进制数值中最后1个 “1” .循环进行,每次消掉1个 “1” .整数 n 的二进制数值中有 ...

  8. POJ 3260 The Fewest Coins（完全背包+多重背包=混合背包）

    题目代号:POJ 3260 题目链接:http://poj.org/problem?id=3260 The Fewest Coins Time Limit: 2000MS Memory Limit: ...

  9. React 项目使用 React-router-dom 4.0 以上版本时使用 HashRouter 怎么控制 history

    不添加 history 时,来回点击 Link 会在控制台报错如下 Warning: Hash history cannot PUSH the same path; a new entry will ...

  10. Apache配置详解(最好的APACHE配置教程)

    From: http://aiks.blog.com.cn/archives/2006/1748482.shtml Apache的配置 Apache的配置由httpd.conf文件配置,因此下面的配置 ...