CSS样式一之基本属性

预览

外观样式

调试工具

显示模式

行高居中问题

背景样式

外观样式

a. color 属性

color: red #FF0000 rgb(255,0,0)

<style>
     span{
        color:#FF0000;
    }
</style>
<span>评论中大奖</span>

b. line-height
行高属性，通常比文本大7 8 像素即可。

<style>
    p{
        font-size:20px;
        line-height:28px;
    }
</style>

c. text-align
文本水平方向 居左 居右 居中

d. text-indent 首行缩进

<style>
    p{
        text-indent:2em; //sh
    }
</style>

e. text-decoration

none/blink/underline/line-through/overline

<em>倾斜</em> <i></i>
<strong>加粗</strong> <b></b>

<u>下划线</u> <ins> </ins>
<s>删除线</s> <del> </del>

调式工具

显示模式

块级元素

常见的标签 h p ul ol div li

独占一行，有宽高

行内元素

行内块元素

img table input

模式转换

display : block/ inline /inline-block

注意点

a. 当布局为行内元素或者行内块元素时，他们可以像文字一样水平居中

b. 当行高等于布局高度，则其内部单行文本垂直居中。

c. h 和 p 是文本类块级元素。因此其内部不能放块级元素。

d. a中不能签到a标签，但是可以放块级别的元素。

e. 注意 标签层级嵌套不超过3层

通过行高是文字（行内元素垂直居中）

顶线 中线 基线 底线

行高是两个基线之间的距离

背景样式

body{
    background-color:pink;
    background-image:url('images/hh.jpg');
    background-repeat: repeat  no-repeat repeat-x  repeat-y
    
    background-position:x y 方位名词（如果方位名词只有一个，那么另一个居中）；数值
    
    background-attachment： scroll | fixed
    
    //background: #ff0000 url() no-repeat fixed center 0
}

背景半透明

background-color: rgba(0,0,0,0.8)