02-05 css3基础样式

______egon新书来袭请看:https://egonlin.com/book.html

css基础样式

1、文字样式

文字样式是用来控制字体或文本的显示方式的。

/*字族:STSong作为首选字体, 微软雅黑作为备用字体*/
font-family: "STSong", "微软雅黑";
/*字体大小*/
font-size: 40px;
/*字重:100、200、300、400、500、600、700、800、900,值越大字越粗*/
font-weight: 900;
/*行高: 字体文本默认在行高中垂直居中显示*/
line-height: 200px;
/*字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线)  */
text-decoration: overline;
/*字间距*/
letter-spacing: 2px;
/*词间距*/
word-spacing: 5px;
/*首行缩进:1em相当于一个字的宽度*/
text-indent: 2em;
/*字体颜色*/
color: red;
/* 文本水平排列方式:left(水平居左) | center(水平居中) | right(水平居右) */
text-align: center;

2、背景样式

标签的背景除了背景颜色还可以有背景图片,而背景图片又有很多相关设置。

/*背景图片:url函数可以链接网络或本地图片*/
background-image: url('https://www.baidu.com/favicon.ico');
/*平铺:repeat-x(x轴平铺) | repeat-y(y轴平铺) | repeat(双轴平铺) | no-repeat*/(不平铺)
background-repeat: no-repeat;
/*x轴背景图片位置偏移:正值往右偏移,负值往左偏移*/
background-position-x: 10px;
/*y轴背景图片位置偏移:正值往下偏移,负值往上偏移*/
background-position-y: 10px;

3、显示样式

HTML5预定义了很多系统标签,大家学习了html标签部分的时候,肯定注意到了,不同的标签在页面中的显示效果是不一样的,比如两个div之间默认会换行显示,而两个span标签却在一行来显示,到底是什么样式控制着标签这种显示效果呢,那就是显示样式display来控制的。

  • display: block;
<div style="display: block;"></div>
<span style="display: block;"></span>
<i style="display: block;"></i>
<!--
1. 任意标签的display样式值均可以设置为block,那么该标签就会以block方式来显示
2. block方式显示的标签,默认会换行
3. block方式显示的标签,支持所有的css样式
4. block方式显示的标签,可以嵌套所有显示方式的标签
注:标题标签和段落标签虽然也是block显示类标签,但不建议嵌套block显示类标签
-->
  • display: inline;
<div style="display: inline;"></div>
<span style="display: inline;"></span>
<i style="display: inline;"></i>
<!--
1. 任意标签的display样式值均可以设置为inline,那么该标签就会以inline方式来显示
2. inline方式显示的标签,默认不会换行
3. inline方式显示的标签,不支持所有css样式(如:不支持手动设置该标签的宽高)
4. inline方式显示的标签,建议只用来嵌套所有inline显示方式的标签
-->
  • display: inline-block;
<div style="display: inline-block;"></div>
<span style="display: inline-block;"></span>
<i style="display: inline-block;"></i>
<!--
1. 任意标签的display样式值均可以设置为inline-block,那么该标签就会以inline-block方式来显示
2. inline-block方式显示的标签,具有inline特性,默认不换行
3. inline-block方式显示的标签,也具备block特征,支持所有css样式
4. inline-block方式显示的标签,不建议嵌套任意显示方式的标签
-->

posted @ 2019-10-14 10:14  小猿取经-林海峰老师  阅读(349)  评论(1编辑  收藏  举报