【HTML、-HX学习】网页前端学习笔记（四）

继续学习，先放链接

p11-p12

上一次的笔记

目录

一、css常用属性设置

1.背景

2.文本

3.文本

4.对齐方式

5.display元素

6.浮动

7.盒子模型

 （1）.border----边框

（2）padding

（3）.margin----外边距

---

---

一、css常用属性设置

1.背景

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

（1）background-color

设置背景元素的颜色

（2）background-image

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

（3）background-repeat

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

body{

background-image：url（.ipg);

background-repeat:no-repeat;

}

repeat:背景图像将向垂直和水平方向重复，默认

repeat-X：只有水平位置会重复背景图像

2.文本

(1）color

(2)text-align

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

（3）text-decoration

            a{
				text-decoration: none;
			    }
            清除超链接下划线

（4）text-indent（首行缩进）

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

3.文本

（1）font-family

... ...

4.对齐方式

text-align 规定元素中的文本的水平对齐方式，

justify----实现两端对齐文本效果。调整间隔，对最后一行不生效。

inherit---规定应该从父元素继承text-align属性的值。

5.display元素

none隐藏元素

block显示元素，块级元素

6.浮动

只有横向浮动

			#d1{
				width: 100px;
				height: 6.25rem;
				background-color: #00FFFF;
				float: left;
			}
			
			#d2{
				width: 100px;
				height: 6.25rem;
				background-color: #FFE4C4;
				float: left;
			}

7.盒子模型

 （1）.border----边框

设置所有的边框属性。

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

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

3）boeder

none：默认无边框

dotted：定义一个点线边框

dashed：定义一个虚线边框

solid：定义实线边框

4）border-collapse

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

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

（2）padding

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

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

td .test{

padding:15px;

}

单独设置各边的内边距：padding-top、right、botton、left（默认，上右下左）

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

（3）.margin----外边距

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

最后，咱们再来个链接CSS 网页布局 | 菜鸟教程 (runoob.com)

导航栏、下拉菜单、页面布局