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

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. Java 访问权限修饰符以及protected修饰符的理解

    2017-11-04 22:28:39 访问权限修饰符的权限 访问修饰符protected的权限理解 在Core Java中有这样一段话“在Object类中,clone方法被声明为protected, ...

  2. centos7: vsftpd安装及启动

    安装: yum -y install vsftpd service vsftpd start  注意这句:centos7不能这么启动了 chkconfig vsftpd on vsftpd.conf配 ...

  3. 只输FLOAT值 TEXTBOX

    if (((int)e.KeyChar < 48 || (int)e.KeyChar > 57) && (int)e.KeyChar != 8 && (in ...

  4. 雷林鹏分享：C# 属性（Property）

    C# 属性(Property) 属性(Property) 是类(class).结构(structure)和接口(interface)的命名(named)成员.类或结构中的成员变量或方法称为 域(Fie ...

  5. C# 中的集合(Array/ArrayList/List<T>/HashTable/Dictionary)

    int [] numbers = new int[5]; // 长度为5,元素类型为 int. string[,] names = new string[5,4]; // 5*4 的二维数组 byte ...

  6. 读写生信流程必备的 Perl 语法

    最早就是写Perl的,后来来到公司转Python,现在又要负责流程了,开始重拾Perl,当然是借鉴别人现有的语法,我再重新组合. 基本语法就不介绍了,参照我之前文章 Perl   模块 use str ...

  7. WPF 的 数据源属性 和 数据源

    (一)数据源(数据对象)属性 :path 或  path的值(path=VM.Property或M.Property),通常具有通知功能(特例除外). (二)path不能孤立而存在,它一定具有所归属的 ...

  8. WPF编程学习 —— 样式

     本文目录 1.引言 2.怎样使用样式? 3.内联样式 4.已命名样式 5.元素类型样式 6.编程控制样式 7.触发器 1.引言 样式(Style),主要是用来让元素或内容呈现一定外观的属性.WPF中 ...

  9. WPF PasswordBox.Password 的数据绑定

    WPF的PasswordBox控件的Password属性不是依赖属性,无法直接进行数据绑定,为使其在MVVM模式中正常使用,可以为PasswordBox增加一个助手类,代码如下: 注:代码摘自:htt ...

  10. Confluence 6 LDAP 高级设置

    启用嵌套组(Enable Nested Groups) 为嵌套组启用或禁用支持. 一些目录服务器能够允许你在一个组中定义另外一个组.在这种结构下的用户组称为用户组嵌套.嵌套组的配置能够让子用户组继承上 ...