网页前端学习第四次（HTML)——css常用属性、css盒子模型

一、css常用属性设置

1.1.背景

1.1.1.设置元素的背景颜色

body{
    background-color:#ff0000;
}

1.1.2.设置背景图像，背景图像进行平铺重复显示，一覆盖整个元素实体

body{
    background-image:url('paper.gif');
}

1.1.3.设置是否及如何重复背景图像

body{
    background-image: url(img/logo.jpg);
    background-repeat: no-repeat;
}

1.2.文本

1.2.1. color

body{
    color :blue;
}
h1 {
    color：#00ff00;
}
h2 {
    color: rgb(255,0,0)
}

1.2.2. text-align

设置文本对齐方式，center（居中），left（左对齐），right（右对齐）

body {
    text-align:center;
}
h1 {
    text-align：right;
}
h2 {
    text-align：right;
}

1.2.3. text-decoration

规定添加到文本的修饰，属性值: none,underline,overline,line-through

                1）underline——对文本添加下划线，与html的u元素相同

                2）overline——对文本添加上划线

                3） line-through——对文本添加中划线，与html中的s和strike元素相同

                4）none——关闭原本应该应用到元素上的所有装饰

 1.2.4.text-indent

        设置文本首行缩进

注：em一个相对值，例如页面的文本大小为17px，则2em为17px*2.

1.3.字体

1.3.1.font-family

1.4.对齐方式

left、right、justify（两端对齐）

1.5.display属性

        display属性规定元素应该生成的框的类型，这个属性用于定义建立布局元素时元素生成的显示框类型

值	描述
none	此元素不会被显示
block	此元素将显示为块级元素，此元素前后会带有换行符
inline	默认，此元素会被显示为内联元素，元素前后没有换行符
inline-block	行内块元素
list-item	此元素会被作为列表显示

1.6.浮动

float的属性值有none，left，right

        1.只有横向浮动，并没有纵向浮动

        2.会将元素的display属性变为block

        3.浮动元素的后一个元素会围绕着浮动元素(典型运用时文字围图片)

        4.浮动元素的前一个元素不会受到任何影响(如果你想让两个块状元素并排显示，必须让两个块状元素都应用float)。

二、css盒子模型

border，padding，margin三个属性构成了盒子模型

2.1.border（边框)

        设置所有的边框属性

                1）可同时设置边框的宽度，样式，颜色

table, th, td {
    border: 1px solid black;
}
table {
    width: 100%; height:50px;
}

                 2)使用border-width、border-style、border-color单独设置

table,td {
    border-width: 1PX;
    border-style：dotted;
    border-color: green;
}

                3)border-style 的属性

none 默认无边框

dotted 定义一个点线边框

solid 定义实现边框 

double 定义两个边框，两个边框的宽度和 border-width 的值相同

groove 定义3D的沟槽边框，效果取决于边框的颜色值

ridge 定义3D脊边框，效果取决于边框的颜色值

inset 定义一个3D的嵌入边框，效果取决于边框的颜色值

outset 定义一个3D突出边框，效果取决于边框的颜色值

                4）border-collapse

设置是否将表格边框折叠为单一边框

属性值：separate（默认，单元格边框独立），collapse(单元格边框合并）

2.2.padding（内边距）

        设置元素所有内边距的宽度，或者设置各边上的内边距的宽度

        如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性
 

注：通过padding属性设置元素内边距时，会使元素变形，若不想影响格式效果，可以使用margin属性设置元素外边距

2.3.margin（外边距）

设置一个元素所有外边距的宽度，或者设置个边上外边距的宽度。

默认按照上右下左的顺序设定

设置一个值，上右下左都一致

设置两个值，上下一致，左右一致

设置三个值，上右下，左右一致