#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. SpringMVC与Json数据交互

    简单回顾了一下SpringMVC和前端JSON数据是怎么交互的 接下来详细说一下过程 前端代码写的很简单  主要是为了试验一下JSON数据的前后台传递 前端代码给大家发出来 其实真的很简单 前端接受了 ...

  2. ubuntu 设置apt-get 代理

    1 添加apt-get 代理配置文件 sudo vi /etc/apt/apt.conf.d/proxy.conf 2 添加内容 Acquire::http::Proxy "http://w ...

  3. 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 ...

  4. iOS 自定义NavigationBar右侧按钮rightBarButtonItem

    自定义右侧的一个按钮 UIBarButtonItem *myButton = [[UIBarButtonItem alloc] initWithTitle:@"主页" style: ...

  5. linux 硬件时间 系统时间

    建了一个虚拟机,发现每次重启后系统时钟总是跟现有时间相差10多个小时 用date -s进行修正之后,再次重启又出现该问题.于是怀疑跟硬件时钟有关 用hwclock看了下,发现的确硬件时钟的时间存在差异 ...

  6. 30 分钟理解 CORB 是什么

    写在前面 前些日子在调试 bug 的时候,偶然发现这么一个警告: Cross-Origin Read Blocking (CORB) blocked cross-origin response htt ...

  7. Maven手动命令行导入ojdbc6

    Maven项目中导入Oracle的驱动包时,可能会出现像我一样下载资源不成功的情况,如下图所示:  出现这种情况的原因其实是因为Oracle的授权问题,这样的话,我们在需要使用Oracle的驱动包时, ...

  8. （54）LINUX应用编程和网络编程之九Linux网络通信实践

    3.9.1.linux网络编程框架 3.9.1.1.网络是分层的 (1)OSI 7层模型(理论指导) (2)网络为什么要分层 (3)网络分层的具体表现 3.9.1.2.TCP/IP协议引入(网络分层实 ...

  9. OI常用的常数优化小技巧

    注意:本文所介绍的优化并不是算法上的优化,那个就非常复杂了,不同题目有不同的优化.笔者要说的只是一些实用的常数优化小技巧,很简单,虽然效果可能不那么明显,但在对时间复杂度要求十分苛刻的时候,这些小的优 ...

  10. Tomcat配置多域名 Alias

    在Tomcat配置多域名,目的是和apache相对应,实现多域名访问. 使用 < Alias></ Alias>,务必注意,使用的是首字母大写. 我刚开配置使用小写,如果hos ...