第四次网页前端培训笔记——CSS常用属性设置

2024-01-12 20:43:04

1.背景

background-color 设置元素的背景颜色
background-image 设置元素的背景图像

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

<style type="text/css">
			#div1 {
				/* width:540px ; */
				height: 500px;
				/*背景颜色*/
				background-color: bisque;
				/*背景图片*/
				background-image: url(百度.png);
				/*是否重复*/
				background-repeat: no-repeat;
			}
			
</style>

2.文本

color 文本颜色
text-align 文本对齐（left，center，right）
text-decoration 文本修饰（下划线，中划线，上划线，去除所有装饰）
text-indent 文本缩进（首行缩进）

<style type="text/css">
	#div2{
				/* 字体颜色 */
				color:#0000FF ;
				/* 对齐方式 */
				text-align: left;
				/* 文本修饰 */
				text-decoration: line-through overline underline;
			    /* 首行缩进 */
				text-indent: 2em;
		  }
			
	 a{
				/* 去除文本效果 (去除超链接下划线)*/
				text-decoration: none;
		  }
</style>

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

3.字体

4.对齐方式

left 左对齐（默认值：由浏览器决定）
right 右对齐
center 居中
justify 两端对齐
inherit 从父元素继承text-align 属性的值

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

5.display属性

none 隐藏元素
block 显示元素，变成块级元素，会自动换行
inline 默认。此元素会被显示为内联元素，元素前后没有换行符·
inline-block 行内块元素（CSS2.1新增的值）
list-item 此元素会作为列表显示

6.浮动

float 的属性值有none、left、right

注：

只有横向浮动
会将元素的display属性变更为block
浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）
浮动元素的前一个元素不会受到任何影响

7.盒子模型

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

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像

设置一个值：上右下左都一致
设置两个值：上下一致、左右一致
设置三个值：上右下，左和右一致

1.border

设置所有的边框属性

可同时设置边框的宽度、样式、样式
使用border-width、border-style、border-color单独设置
border-style的属性
border-collapse
设置是否将表格边框折叠为单一边框
属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）

2.padding

元素可能会变形（少用）
                   设置元素所有内边距的宽度，或者设置各边上内边框的宽度
                   单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right
                   默认按照上右下左的顺序设定

3. margin外边距

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

码农公寓