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

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. Unity 代码优化

    1.不用的代码删除掉,因为即使不用的代码也会 IL2Cpp. 2.MonoBehaviour 的方法是空方法,特别是Update方法,删除掉,会有性能消耗. 3.Unity 中 override 的方 ...

  2. C#对config配置文件的管理

    应用程序配置文件,对于asp.net是 web.config,对于WINFORM程序是App.Config(ExeName.exe.config). 配置文件,对于程序本身来说,就是基础和依据,其本质 ...

  3. Spring Cloud 学习网址

    1. https://blog.csdn.net/forezp/article/details/70148833  史上最简单的 SpringCloud 教程 (非常适合新手快速上手教程)2.http ...

  4. 20170711xlVBA批量制图一例

    Public Sub GatherDataPicker() Application.ScreenUpdating = False Application.DisplayAlerts = False A ...

  5. 解决导入Gradle项目遇到的问题

    Gradle安装好了,插件也在eclipse中配置好了,却不会导入,尴尬.这里我就给大家介绍几个在配置 导入项目所遇到的问题: 分别选择Browse选中本地目录,和BuildModel创建相关的项目文 ...

  6. java MongoDB查询（一）简单查询

    前言 MongoDB的java驱动提供了查询的功能,查询条件也是bson对象,这篇就看下怎么进行简单的数据查询 1.数据结构 集合:firstCollection 数据内容: { "_id& ...

  7. Oracle11g温习-第五章：数据字典

    1.数据字典(Data dictionary)的功能 1)   central of oracle   database               每个oracle数据库的核心 2)   descr ...

  8. Oracle11g温习-第四章：手工建库

     1.create database plan 1.库类型:   OLTP :  在线事务处理系统   OLAP : 在线应用处理系统   DSS :    数据决策系统 2.数据库名字及字符集 3. ...

  9. openssl 自建CA签发证书 网站https的ssl通信

    <<COMMENTX509 文件扩展名 首先我们要理解文件的扩展名代表什么.DER.PEM.CRT和CER这些扩展名经常令人困惑.很多人错误地认为这些扩展名可以互相代替.尽管的确有时候有些 ...

  10. POJ 1947 Rebuilding Roads 树形dp 难度:2

    Rebuilding Roads Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 9105   Accepted: 4122 ...