请关注公众号：自动化测试实战

css常用属性

  • width
     宽

  • height
     高

  • color
     字体颜色

  • border
     边框

  • background
     背景

lesson3.html

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">

    <title>Css</title>

    <meta name="keywords" content="key1, key2">

    <meta name="description" content="">

    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>

    <div id="div">

        <span>

            这是一个span标签
        </span>

    </div>
</body>
</html>

index.css

/*

    px:意为像素;

*/

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background: pink;
}

上面代码大家会发现我们只定位到`div`层，但是下面的`span`标签也有相同的样式，这就是`css具有继承性`。

现在我们精确到span层，修改字体颜色为绿色：

index.css

/*

    px:意为像素;

*/

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background: pink;
}

div#div span{
    color: green;
}

我们发现字体颜色变为精确设置的颜色，但样式仍然是继承过来的。

边框，边框有上下左右四个属性，如果不需要设置或者四个边框相同，只需要写一条border即可：

/*

    px:意为像素;

*/

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background: pink;    
    border: 1px solid #0000ff;
}

或

/*

    px:意为像素;

*/

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background: pink;    
    border-top: 1px solid #0000ff;    
    border-bottom: 2px solid #000fff;    
    border-left: 3px solid #00000f;    
    border-right: 4px solid #000000;
}

之前我们的background都是简单的颜色，如果要用图片该怎么办呢？我们需要先知道background的几个写法

  • background-color
     背景颜色

  • background-image
     背景图片

  • background-repeat
     如果图片较小，会将图片反复平铺在页面上，通过这个属性可设置图片效果：

      - background-repeat：repeat-X;
    
      图片在水平方向重复
    
  - background-repeat: repeat-Y;
    
      图片在垂直方向重复
    
  - background-repeat：no-repeat；
    
      图片只显示一次

  • background-position
     图片位置。
     background-positon: center center;居中；第一个
     backgroung-position: 0px 0px;第一个值为水平方向值，第二个值为垂直方向值；

项目结构：

/*

    px:意为像素;

*/

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background-image: url("../imgs/pic.png");    
    border: 1px solid #0000ff;
}

明天继续……

 

HTML第三课——css盒子的更多相关文章

  1. web前端学习（三）css学习笔记部分（2）-- css定位+盒子操作

    3.CSS定位 3.1定位 1.CSS定位: 改变元素在页面上的位置 2.CSS定位机制 普通流:元素按照其在HTML中的位置顺序决定排布的过程 浮动 绝对布局 属性 描述 position 把元素放 ...

  2. 后端码农谈前端（CSS篇）第六课：盒子模型

    元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边 ...

  3. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  4. CodeIgniter框架入门教程——第三课 URL及ajax

    本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...

  5. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  6. html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）

    html/css  盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width     是"宽 ...

  7. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

  8. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

  9. css盒子模型、文档流、相对与绝对定位、浮动与清除模型

    一.CSS中的盒子模型 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. h ...

随机推荐

  1. vuejs2点滴

    在Vue定义一个不被添加getter setter 的属性: https://github.com/vuejs/vue/issues/1988 博客: 0.vux的x-input源码分析. http: ...

  2. freemarker中对null值问题的处理

    1. freemarker不支持null. 如果值为null会报错. 2.当值为null的处理 1)过滤不显示 Hello ${name!} 在属性后面加感叹号即可过滤null和空字符串 if和”?? ...

  3. 新概念 Lesson 2 Sorry, sir.

    Is this your handbag? 这是你的手提包吗? Yes,it is. /No it isn't 人称代词的主格宾格 形容性物主代词的用法 Does the man get his um ...

  4. 4-3 atom订阅源

    部分章节还没有实做练习. 网上购买了安道的Rails指南中文版.联系了这个作者问了一个问题Rails5的翻译问题. try(), 判断是否存在,不存在的话返回nil.例子:pasting @perso ...

  5. python-day71--django多表操作

    表关系: 1 一对多 2 多对多 3 一对一 添加记录: 一对多:书与出版社 #创建一对多: publish=models.ForeignKey("Publish") 注意:pub ...

  6. zzuli1985（dp/水dfs郑轻比赛）

    再一次感受到dp的威力 1985: 即将到来的新生赛 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 112  Solved: 28 SubmitStat ...

  7. C语言-简单选择排序与直接插入排序的实现

    /* Name: selectSort and insertSort Copyright: nyist Author: 润青 Date: 01/10/18 19:30 Description: 实现了 ...

  8. Flask初级（六）flash模板渲染

    Project name :Flask_Plan templates:templates static:static 继续上篇的模板 我们已经可以静态调用模板,包括继承模板,保证了页面的一致性,但是我 ...

  9. 用apscheduler处理调度任务，定时任务，重复任务

    from apscheduler.schedulers.blocking import BlockingScheduler from apscheduler.triggers.cron import ...

  10. IOS控件大全及控件大小

    一 视图UIView和UIWindow iphone视图的规则是:一个窗口,多个视图.UIWindow相当于电视机,UIViews相当于演员. 1.显示数据的视图 下面几个类可在屏幕上显示信息: UI ...