css基础2

1.css常用属性设置

1.1背景

css背景属性用于定义HTML元素的背景效果

1.1.1 背景颜色

设置元素的背景颜色

body{
    background-color:red;
}

1.1.2 背景图片

设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体

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

1.1.3 背景图片重复

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

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

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

###1.1.4展示

		#mydiv{
			background-color: aliceblue;设置背景颜色
			width: 400px;设置宽度
			height: 1000px;设置高度
			background-image: url(img/pre.jpg);设置背景图片
			background-repeat: no-repeat;设置图片是否重复，这里是不重复
		}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EMwHKfbw-1644305846258)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220207190347390.png)]

1.2文本

1.2.1字体颜色

改变字体默认的颜色

body{
    color:red;
}

1.2.2对齐方式

使文本不在为默认的左对齐，可以居中也可以右对齐

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

body{
    text-align:center;
}

1.2.3文本修饰

可以取消文本原本自带的下划线也可以给文本加入比如中划线上划线

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

body{
    text-decoration:none;
}

1.2.4文本缩进

可以自动在文本首行缩进

注：em是一个相对值，如果页面大小为10px，则2em为10*2px也就是20px

body{
    text-indent:2em;
}

1.2.5展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VngFcuak-1644305846259)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220207214007976.png)]

		#mydiv1{
			color: red;
			text-align: left;
			text-decoration: none;
			text-indent: 2em;
		}

1.3字体

1.3.1对齐方式

设置字体的对齐方式，和文本是一样的

body{
    text-aglin:left;
}

1.3.2display属性

display属性规定元素应该生成的框的类型。这个属性用于定义建立分布局时元素生成的显示框类型（前五个加粗的是常用属性）

）

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 ），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似
table-header-group	此元素会作为一个或多个行的分组来显示（类似
table-footer-group	此元素会作为一个或多个行的分组来显示（类似
table-row	此元素会作为一个表格行显示（类似
table-column-group	此元素会作为一个或多个列的分组来显示（类似
table-column	此元素会作为一个单元格列显示（类似
table-cell	此元素会作为一个表格单元格显示（类似	和	）
table-caption	此元素会作为一个表格标题显示（类似
inherit	规定应该从父元素继承 display 属性的值。

）。）。）。）。）。）

1.3.3浮动

让两个块级元素显示在同一行

float的属性值有none、left、right

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

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

3.浮动元素的后一个元素会围绕这浮动元素（典型运用是文字围绕图片）

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

1.4盒子模型

由三部分组成border（边框）、padding（内边框）、margin（）

1.4.1 border

值	描述
border-width	规定边框的宽度。
border-style	规定边框的样式。
border-color	规定边框的颜色。
inherit	规定应该从父元素继承 border 属性的设置。

1.4.1.1 border-style

值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

1.4.2 padding

设置是否将表格边框拆跌为单一边框

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

也可以单独设置每个位置边框的样式：padding-top、padding-left、padding-right、padding-bottom，不单独指明的话默认是上右下左

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。
inherit	规定应该从父元素继承内边距。

1.4.3margin

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	以包含元素宽度的百分比指定外边距。
inherit	规定应该从父元素继承外边距。

边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 以包含元素宽度的百分比指定外边距。 |
| inherit | 规定应该从父元素继承外边距。 |