SOURCE

<h1>helloworld</h1>
<p>我是一个p标签</p>
<span>我是一个span标签</span>
<article class="article">这是一个段落，希望可以实现首行缩进的功能,This is a paragraph example, i hope it can run the function like text-indent and line-height</article>
<p class="word-spacing">测试文字间距word-spacing function testing</p>
<p class="white-space">This is testing text.This is testing text.This is testing text.This is testing text.This is testing text.</p>
<pre>使用tab键  tab-size  12</pre>
<pre id="word-wrap">Hi,guy,today I wanna introduce the website of Baidu(https://www.baidu.com), which is one of the most famous search engine in China.</pre>
<p class="text-overflow">This is a testing text.This is a testing text.This is a testing text.</p>

h1{
    background-color: #f06;
    background: linear-gradient(45deg,#f06,yellow);
    font-size: 50px;
    min-height: 100%;
}
p{
    color: orange;
    background:linear-gradient(50deg,grey,green);
}
/*测试是否能用注释*/
span{
    font-style: italic;
    color:red;
    background:linear-gradient(50deg,aquamarine,greenyellow);
    font-family: 'Courier New', Courier, monospace;
    /*设置文字对齐的text-align属性*/
    text-align:justify;
    /*设置首行缩进的text-indent属性*/
    text-indent:32px;

}
.article{
    background: linear-gradient(50deg,orange,pink);
    color:ghostwhite;
    text-indent:32px;
    /*设置行高的line-height属性*/
    line-height: 40px;
    /*设置字母间距的letter-spacing属性，可以是负值*/
    letter-spacing:10px;

}
.word-spacing{
    /*设置文字间距的word-spacing属性，可以是负值*/
    word-spacing: 25px;
}
.white-space{
    font-size: 20px;
    /*处理空格符的white-space属性：normal | nowrap | pre | pre-line | pre-wrap | initial | inherit
    nowrap:文本不换行，直到遇到<br>元素
    pre:保留空白，类似于html的<pre>元素
    pre-line:合并空白符号，令文件正常运行
    pre-wrap:设定保留空白符号，在浏览器中可正常换行*/
    white-space: nowrap;
    /*设置大小写转换的text-transform属性
    none:默认值
    capitalize：文字第一个字母大写
    uppercase：将字母全部转成大写
    lowercase：将字母全部转成小写*/
    text-transform:capitalize;
    /*设置文字阴影的text-shadow属性
    h-shadow：水平阴影的位置，往右是正值，允许负值，此值不可省略
    v-shadow：垂直阴影的位置，往下是正值，允许负值，不可省略
    blur-radius：可设定模糊的范围，单位与h-shadow或v-shadow相同，可省略
    color：阴影的颜色，可省略
    none：默认值，即没有阴影
    text-shadow允许设置多重阴影，只要重复h-shadow，v-shadow，blur-radius即可*/
    /*text-shadow:5px 5px 5px yellowgreen;*/
    text-shadow:0px 0px 10px red;
    /*设置线条装饰的text-decoration属性
    none：默认值
    underline：下划线，底线
    overline：顶线
    line-through：删除线*/
    text-decoration: overline un
    derline line-through;
}
pre{
    /*设定制表符宽度的tab-size属性
    number：设定制表符为默认的8个英文字符宽度*/
    tab-size: 18;
}
#word-wrap{
    /*设定换行的word-wrap属性
    这个属性主要处理显示区宽度无法显示较长的单字，如URL的网址时
    网页的处理方式。
    normal：默认值，只有在可换行的地方换行，否则持续显示直到结束
    break-word：可用于将较长的单字或URL网址中途换行*/
    word-wrap: break-word; 
}
.text-overflow{
    /*设定文字超出范围的text-overflow属性
    clip：超出显示区不予显示
    ellipsis：超出显示区以"..."显示*/
    width:150px;
    border:1px solid blue;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/*将text-shadow功能应用在自己的姓名，设计出5种效果
将text-shadow功能应用在自己的学校，设计出5种效果
*/