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

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. 机器学习 Numpy库入门

    2017-06-28 13:56:25 Numpy 提供了一个强大的N维数组对象ndarray,提供了线性代数,傅里叶变换和随机数生成等的基本功能,可以说Numpy是Scipy,Pandas等科学计算 ...

  2. linux安装mysqlclient报错

    错误信息 Collecting mysqlclient Using cached mysqlclient-1.3.12.tar.gz Complete output from command pyth ...

  3. length,lengthb,substr,substrb,instr小用

    --字符串的字符长度 select length('wm.dfw.士农工商.sda.人马ss.dfw.4.sdf.332.sf.qq.sd') from dual; --字符串的字节长度 select ...

  4. Eclipse修改已存在的SVN地址

    1.Window---->Show View---->Other...

  5. bind出现Address already in use解决方法

    在socket函数和bind函数之间加入一段代码: // 建立服务器端socket if((server_sockfd = socket(AF_INET, SOCK_STREAM, 0))<0) ...

  6. SpringMVC实现RESTful服务

    SpringMVC实现RESTful服务 这里只说service,controller层的代码.Mapper层则直接继承Mapper<T>则可以,记住mybatis-config.xml一 ...

  7. 一篇来自网络的关于“enqueue”events的简短参考（转）

    仅供自己和各位同学参考: Enqueue Type Description enq: AD - allocate AU Synchronizes accesses to a specific OSM ...

  8. python学习笔记（七）---编辑器pycharm的安装

    百度经验网址: https://jingyan.baidu.com/article/0f5fb0993624176d8234ea6c.html 其中 添加 “0.0.0.0 account.jetbr ...

  9. Css的向左浮动、先右浮动、绝对定位、相对定位的简单使用

    1.div层的浮动 1)div向左浮动.向右浮动 <!doctype html> <html> <head> <meta charset="utf- ...

  10. 练习vue（用户管理）1

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...