HTML第三课——css盒子

时间 2019-12-07

标签 html 第三 css 盒子栏目 HTML 繁體版

原文原文链接

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

css经常使用属性html

width
宽less
height
高测试
color
字体颜色字体
border
边框url
background
背景spa

lesson3.htmlcode

<!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.csshtm

/*    px:意为像素; */

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

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

如今咱们精确到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;
}

明天继续……

1. Html，CSS和盒子
2. html/css-css-盒子模型
3. WEB前端第十二课——CSS盒子
4. html/css 盒子模型
5. HTML css盒子模型
6. HTML第二课——css
7. HTML+CSS第三课：表格与表单
8. CSS样式（三） - div盒子
9. html-css标签盒子模型
10. html+css的高级盒子模型
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• RxJava操作符（三）Filtering
• 三篇文章了解 TiDB 技术内幕——说存储