Html/CSS04（基本结构）

今天是2018年7月12日

1.背景

1.1背景的覆盖方式

给div标签添加背景时，可以选择不同的覆盖方式，具体如下

1.2背景的简写

给背景值的时候可以进行简写，顺序如下：

div{
     width: 200px;
     height: 200px;
     /* 背景简写 1背景色2背景图3重复方式4位置 */
     background: #ff2651 url("images/icon1.png") repeat 10px 20px;
        }

1.3背景吸附

给DIV设置背景后，可以设置backgroun-attachment属性来调节其是否随滚动条一起滚动

.banner{
        height: 468px;
        background: #ff2d52 url("images/banner.jpg") no-repeat center center;
        background-attachment: fixed;
        }
.content{
         height: 800px;
         background: #44cef6;
        }

1.4背景大小

当背景大小大于DIV标签大小时，设置background-size: cover;以显示背景的完整大小

2.文本

2.1文本的基本

给文本设置CSS样式时经常需要设置到的属性是颜色，给字体设置颜色有三种方式，如下所示。

2.2文本对齐

文本的对齐使用text-align属性控制，关于英文的大小写切换一并写入如下代码。

2.3字体

在给文本设置字体时，通常使用多个字体备选，防止用户的机器无法显示所选择的字体。

3.链接

给链接设置CSS时需要注意书写的属性

4.列表

5.表格

5.1表格的基本用法

表格的框线需要设置border-collapse：collapse

5.2.表格跨行，列

跨行使用rowspan和colspan

商城
商城

6.轮廓

使input标签被单击时不再显示样式

input{
        margin-top: 50px;
        outline: none;
        }

7.opacity

透明度是JS中常用的动画属性

div.child{
            width: 100px;
            height: 100px;
            background: red;
            opacity: 0.5;
        }

8.css样式的继承

除了height属性以外，CSS样式中，子类会继承父类的width属性，且这种继承仅仅发生在块级元素中