The basic properties of a CSS style

Preview

Presentation style
Debugging Tools
Display Mode
Line topped the problems
Background Style

Presentation style

a. color attribute

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

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

b. line-height
line-height attribute, typically greater than 78 pixels to the text.

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

c. text-align
text horizontally Left Right Center

d. text-indent the first line 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>

Modal tool

Display Mode

Block-level elements

Common labels hp ul ol div li

Exclusive line, has a wide high

Row element
Inline block elements

img table input

Mode conversion
display : block/ inline /inline-block

important point

a. When the layout is inline elements or block elements within the row, as they can be the same text is centered horizontally

b. When the layout height of the line height, then the internal line text vertically.

c. h and p is a text-based block-level element. Thus it can not be placed inside the block-level elements.

D. a check can not be a label, but can be put block-level elements.

e. Note that the label layer is not more than three nested hierarchy

By text line height (the vertical center line element)

顶线 中线 基线 底线

Row height is the distance between the two baseline

Background Style

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
}
Translucent background
background-color: rgba(0,0,0,0.8)
Published 98 original articles · won praise 6 · views 20000 +

Guess you like

Origin blog.csdn.net/dirksmaller/article/details/103789781