CSS文本属性、标签分类

css基础属性

            /* 
                浏览器默认字体大小16px 
                互联网一般字体大小12px
                调整字体大小设置的是高
            */
			font-size:12px;

            /* 宽度 */
            width: 100px;

            /* 高度 */
            height: 100px;

            /* 字体加粗 100~900 / lighter(细体) / normal(正常) / bold(加粗) / bolder(加更粗)
					字体的粗细跟字体包有关
			*/
            font-weight: bold;

            /* 字体样式 */
            font-style: italic;

            /* 设置元素的字体 字体如果是中文需要加双引号引起来 */
            font-family: arial;/* arial,这个字体是乔布斯发明的 */

            /* 首行缩进2个字符 
				em 是文本单位，1em=1*font-size 该文本的大小
			*/
            text-indent: 2em;

            /* 文本对齐方式(left/right/center) */
            text-align: center;

            /* 边框 
                border-width
                border-style
                border-color
            */
            border: 1px solid black;

            /* 行高
				16px:单行文本所占的高度，当line-height=height时，单行文本水平垂直居中
			*/
            line-height: 50px;

            /* 颜色写法 
                纯英文单词：red/green/yellow
                颜色代码：#f40/#ff5500
                颜色函数：rgb(255,255,255)
				transparent 是透明色
            */

            /* 文本装饰 
                none/line-through(中划线)/underline(下划线)
                在del标签中设置文本为none,可以清除del标签的线
            */
            text-decoration: line-through;

            /* 鼠标移入时鼠标发生的变化 
                pointer/help(问号)/wait(程序正忙（通常是一只表或沙漏）)/move(移动)/text(文本)
            */
            cursor: pointer;

            /* 轮廓：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出边框的作用 
                outline-color
                outline-style
                outline-width
            */
            outline: none;

思考:如何写出一个三角形？

<div class="a"></div>
.a{
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #09c transparent transparent;
    transform: rotate(90deg);
}

css标签的分类

    <!-- 行级元素（内联元素inline） ：内容决定元素所占位置，不可以通过css改变宽高
            凡是有inline的元素，都有文字特效
    -->
    <span></span>
    <strong></strong>
    <em></em>
    <a href=""></a>
    <del></del>

    <!-- 行块级元素（inline-block） :内容决定大小，可以改变宽高
    -->
    <img src="" alt="">
    <input type="text" name="" id="">
    <td></td>

    <!-- 块级元素（block） :独占一行，可以通过css改变宽高
    -->
    <div></div>
    <p></p>
    <ul>
        <li></li>
    </ul>
    <ol>
        <li></li>
    </ol>
    <form action=""></form>
    <address></address>

解决图片之间有缝隙的bug

在一行显示，并且不写空格。因为img是inline-block属性，具有文本类特点