CSS的基本使用二

CSS常用属性设置

1. 背景

​ CSS背景属性用于定义HTML元素的北京效果

1.1 background-color

​ 设置元素的背景颜色

<style>
#id属性值 {
    background-color:#ff0000;
}
</style>

1.2 background-image

​ 设置元素的背景图片，默认情况下，背景图片进行平铺重复，已覆盖整个元素实体。

<style>
#id属性值 {
    background-image:url("图片路径");
}
</style>

1.3 background-repate

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

<style>
#id属性值 {
    background-image:url("图片路径");
    background-repate:no-repate;   /*不重复*/
    background-repate:repate-x;    /*水平重复*/
    background-repate:repate-y;    /*竖直重复*/
}
</style>

---

2. 文本

2.1 color

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

2.2 text-align

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

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

2.3 text-decoration

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

1）underline

​ 对文本添加下划线，与HTML的u元素相同。

2）overline

​ 对文本添加上划线。

3）line-through

​ 对文本添加中划线，与HTML中的s和strike元素相同。

4）none

​ 关闭1原本应用到元素上的所有装饰。

h2 {
    text-decoration:underline;
}

2.4 text-indent

​ 设置文本首行缩进

p.ident2 {
    text-indent:2em;
}

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

---

3. 对齐方式

​ text-align规定元素中的文本的水平对齐方式，属性值如下：

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐的文本效果
inherit	规定应该从父元素继承text-align属性的值

值justify可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后调整单词和字母间的间隔，使各行的长度恰好相等。对最后一行不生效。

---

4. display属性

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

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

---

5. 浮动

​ float 的属性值有none、left、right。

1. 只有横向浮动，并没有纵向浮动。
2. 会将元素的display属性变更为block。
3. 浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）
4. 浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

---

6. 盒子模型

​ border、padding、margin三个属性构成了盒子模型。

6.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	默认无边框
dashed	定义一个虚线边框
solid	定义实线边框
double	定义两个边框。两个边框的宽度和border-width的值相同
groove	定义3D沟槽边框。效果取决于边框的颜色值
ridge	定义3D脊边框。效果取决于边框的颜色值
inset	定义一个3D的嵌入边框。效果取决于边框的颜色值
outset	定义一个3D突出边框。效果取决于边框的颜色值

​ 4）border-collapse

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

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

table {
    border-collapse:collapse;
}

6.2 padding

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

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

td {
    padding:15px;
}

​ 单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right

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

td.text1 {
    padding:1.5cm
}
td.text2 {
    padding:0.5cm 2.5cm
}

<table border="1">
    <tr>
        <td class="text1">
            这个表格单元的每个边拥有相等的内边距。
        </td>
    </tr>
</table>
<br>
<table border="1">
    <tr>
        <td class="text2">
            这个表格单元的上和下内边距是0.5cm，左和右内边距是2.5cm。
        </td>
    </tr>
</table>

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

6.3 margin

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

p.margin {
    margin:2px 4px 3px 4px;
}

单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right
🐏:快去练习吧！