常用的CSS 样式

目录

1、color、background、background-color

2、文本样式总结

3、 图片样式

3.1  基本设置

3.2 边框设置

3.3 图片水平对齐text-align

3.4 vertical-align 垂直对齐

4、文字环绕效果-初识float

4.1   float属性

4.2、设置图片与文字的间距

5.CSS盒子模型

---

1、color、background、background-color

 <div>我的背景是红色,但我是绿色</div>

<style>

    div{ background-color: red;

    color: green;}

</style>

2、文本样式总结

大家可以对着这张图，来想一下相应的CSS属性叫什么。

表1 CSS文字属性

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体斜体
color	颜色

段落属性

text-decoration	下划线、删除线、顶划线
text-transform	文本大小写

text-align	文本水平对齐方式 left、centen、right
line-height	行高

表1 边框的三个属性

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

3、 图片样式

3.1  基本设置

width:像素值;

height:像素值;

3.2 边框设置

边框border属性。在CSS中，对于图片的边框，我们也是使用border属性来定义。

语法：

border-width:像素值;

border-style:属性值;

border-color:颜色值;

注：或者使用border简洁写法，如“border:1px solid gray;”。
 

3.3 图片水平对齐text-align

text-align一般只用在两个地方：文本水平对齐和图片水平对齐。也就是说，text-align只对文本和img标签有效，对其他标签无效。

text-align属性取值如下表：

表1 text-align属性

text-align属性值	说明
left	默认值，左对齐
center	居中对齐
right	右对齐

3.4 vertical-align 垂直对齐

vertical-align:属性值;

说明：

vertical即“垂直的”，align即“使排整齐”。

vertical-align属性取值如下表：

表1 vertical-align属性取值

vertical-align属性取值	说明
top	顶部对齐
middle	中部对齐
baseline	基线对齐
bottom	底部对齐

4、文字环绕效果-初识float

4.1   float属性

在网页布局的过程中，常常遇到图文混排的效果。图文混排，也就是文字环绕着图片进行布局。文字环绕图片的方式在实际页面中的应用非常广泛，如果再配合内容、背景等多种手段便可以实现各种绚丽的效果。

float属性的取值很简单也很容易记忆，就2个属性值：

表1 float属性取值

float属性值	说明
left	元素向左浮动
right	元素向右浮动

4.2、设置图片与文字的间距

文字紧紧环绕在图片周围，如果希望图片本身与文字有一定的距离，只需要给<img>标签添加margin属性即可。margin指的是“外边距”，我们在接下来的“CSS盒子模型”会详细讲解到。

margin属性包括margin-top（上外边距）、margin-bottom（下外边距）、margin-left（左外边距）、margin-right（右外边距）。

5.CSS盒子模型

一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。

每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。

记住，是所有的元素都可以看出一个盒子！

下图为一个CSS盒子模型的内部结构：

图1 CSS盒子模型

从上图中我们可以得出盒子模型的属性如下：

表1 盒子模型4个属性

属性	说明
border	（边框）元素边框
margin	（外边距）用于定义页面中元素与元素之间的距离
padding	（内边距）用于定义内容与边框之间的距离
content	（内容）可以是文字或图片

其中，padding称为“内边距”，也常常称为“补白”。图1中的margin-top指的是顶部外边距、margin-right指的是右部外边距，以此类推。

内容区有3个属性：width、height和overflow

~边框样式：

border-style:dotted solid double dashed; 

• 上边框是点状
• 右边框是实线
• 下边框是双线
• 左边框是虚线

~添加圆角边框   border-radius 属性

border-radius:2em;  数据也可以用百分比

等价于：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

~新闻框

<style lang="scss">
.newsbox{
	display: flex;
	.pic{
		width: 230rpx;
		height: 160rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.text{		
		flex:1;
		padding-left:20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.title{
			font-size: 36rpx;
			color:#333;