HTML第三课——css盒子

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;
}

明天继续……

原文发布于微信公众号 - 自动化测试实战(gh_839e78b6ba28)

原文发表时间:2018-05-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Young Dreamer

canvas绘图不清晰的解决方案

现象描述   同样大小的图片(60x60px)用canvas和DOM绘制,结果发现canvas的画面质量要差很多。结果如下图所示。 ?   上图中,左侧红框中的...

21510
来自专栏用户2442861的专栏

CSS基础-引入方法,选择器,继承

    例子:<div style="background-color:red">行内式</div>

871
来自专栏互联网杂技

两个元素定位,要求子元素垂直居中

<!DOCTYPE html> <html> <hed> <meta charset="utf-8"> <title></title> <style> ...

3586
来自专栏james大数据架构

LinearLayout(线性布局)

要点: android:orientation="vertical"垂直线性布局,"horizontal"水平线性布局 android:gravity="top...

2209
来自专栏vue学习

CSS日常踩坑后的总结(猜测你也会遇到的,持续更新。。。)

可以用left:50%加上margin-left:-(宽度/2),来实现绝对定位的水平居中,这里的宽度指的是设置为绝对定位的元素的宽度

1383
来自专栏云端架构

【云端架构】前端必备常用HTML标签

注释:开始标签的英文翻译是 start tag 或 opening tag,结束标签的英文翻译是 end tag 或 closing tag。

4186
来自专栏一个小程序员的成长笔记

Canvas 图形组合方式

/** * 图形组合 */ function initDemo5() { var canvas = document.getElementById(...

3726
来自专栏九彩拼盘的叨叨叨

Flex布局 写法示例

811
来自专栏Python研发

CSS,注意点!!!!!!!

4、用css给body标签加个 margin:0(用于消除body边框和浏览器间的空白部分)

1443
来自专栏.Net移动开发

用VS2017进行移动开发(C#、VB.NET)——OfflineCameraButton控件,Smobiler移动开发

若将该属性设置为“0”,该控件的背景色即为全透明的,显示为Smobiler窗体设计界面的背景色。

2023

扫码关注云+社区

领取腾讯云代金券