一、初识HTMl+CSS

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名一样的元素
一、初识HTMl+CSS_第1张图片

class选择符,以.开头。匹配class=p1的元素
一、初识HTMl+CSS_第2张图片

/*导入自定义字体*/
        @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;
        }

一、初识HTMl+CSS_第3张图片

-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度,也能设置其颜色。而且,配合使用color: transparent属性,还可以创建镂空的字体!
一、初识HTMl+CSS_第4张图片
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;
        }
        粗体"bold">粗体
        斜体 "i">斜体
        下划线 "underline">下划线
        上标 "sup">上标
        下标电传打字
        删除线"throw">删除线

一、初识HTMl+CSS_第5张图片

你可能感兴趣的:(html)