color: lightblue; /文字颜色/
font-style: italic; /斜体/
margin 是外边距。(边框线外面的部分)
background: tomato url("…/imgs/back.png") no-repeat;/图片就是原本的样子不会出来平铺和拉伸/
text-decoration: line-through;/删除线/
background-size: cover;
/1、图片以背景的形式铺满整个屏幕,不留空白区域
2、保持图像的纵横比(图片不变形)
3、图片居中
4、不出现滚动条/
CSS中的背景图片定位方法有三种:
1. 关键字定位:background-position:top left;
2. 像素定位:background-position:x px y px;
3. 百分比定位:background-position:x% y%;
id选择符,以#开头。以匹配元素中id为自己所设id名一样的元素
class选择符,以.开头。匹配class=p1的元素
/*导入自定义字体*/
@font-face {
font-family: mzd;
src: url('../fonts/草檀斋毛泽东字体.ttf');
}
/*导入网页背景图——全局——图片随着滑动上下滚动*/
body {
margin: 0;
background: teal url('../imgs/rose.jpg');
}
/*导入网页背景图——全局——背景固定不随着滑动轴动*/
body {
margin: 0;
background: teal url('../imgs/rose.jpg') fixed;
}
-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度,也能设置其颜色。而且,配合使用color: transparent属性,还可以创建镂空的字体!
text-decoration:设置文本的修饰方式
a.主要是用来对文本添加线条修饰
b.值
none 无修饰(标准文本的默认效果)
underline 下划线修饰(超链接的默认效果)
line-through 删除线
overline 上划线(基本没啥地方用到)
c.主要是用来消除超链接的默认下划线修饰
display:inline-block是什么呢?相信大家对这个属性并不陌生,根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身,简单的说:设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性,又保持了inline元素不换行的特性。
.bold{
font-weight: bolder;
}
.i{
font-style: italic;
}
.underline{
text-decoration: overline; /*underline*/
}
.sup{
font-size: 9px;
line-height: 12px;
/* height: 24px; */
border: red solid 1px;
display: inline-block;
margin-top: -22px;
position: relative;
}
.throw{
text-decoration: line-through;
}
<b>粗体</b><span class="bold">粗体</span>
<i>斜体</i> <span class="i">斜体</span>
<u>下划线</u> <span class="underline">下划线</span>
<sup>上标</sup> <span class="sup">上标</span>
<sub>下标</sub。
<tt>电传打字</tt>
<s>删除线</s><span class="throw">删除线</span>