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

2022-02-07 19:34:32 阅读：153 来源： 互联网

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外边距

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

标签：网页,text,元素,笔记,边框,设置,对齐,文本,CSS
来源： https://blog.csdn.net/Maruko_428/article/details/122807165

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9