编程知识 cdmana.com

CSS text style property values

HTML Edit text , adopt CSS The properties of the settings are assigned to HTML Web page vitality , Change the text type 、 Background and insert pictures 、 video 、 Audio etc. , Make the web page more vivid .

  • CSS Text properties in
font-weight: 
            bold;       // Change the font thickness 
            normal   // Normal font 、 Standard font 
 font-style:oblique;     // The font style (oblique tilt )
 text-decoration:
            underline;    // Character modification (underline  Underline )
            overline;    ( Top line ) line-throug;   ( Delete line ) none; ( Unlink text )

text-indent: 20px;    // Indent the first line of text 
 text-align: right /center /left      // Text alignment 
 text-transform:
            uppercase; // Text conversion (uppercase Lower case to upper case )
            lowercase;    ( Convert upper case to lower case )

text-shadow: 0 2px 5px red;   // Text shadow 
 letter-spacing: 20px;    // Space between words 
 word-spacing: 20px;   // Word spacing ( English words )
 line-height:20px;    // The distance between two texts 、 row spacing 

Practice a capital letter as follows :

<p>my english is very good</p>

adopt CSS Change it as follows :

p:first-letter{
    text-transform: uppercase;
}

  • CSS Medium div attribute

stay HTML Create a new one in div

<div class="box1"></div>
background-image:url("img/ Picture path ");     // Insert a picture 
 background-repeat:no-repeat;      // Tiling method ( Don't spread )
                                  “repeat-x”;    ( The transverse X Axle shop )
                                  “repeat-y”;     ( The longitudinal Y Axle shop )</pre>

stay CSS Realize image tiling in :【background-repeat: Property value 】

stay CSS In the implementation of the picture : Don't spread

.box1{
    width: 100px;
    height: 100px;
    border: dashed red;
    background-image: url(../img/picter/ai2003.jpg);
    background-repeat: no-repeat;
}

stay CSS In the implementation of the picture X Axle shop :

.box1{
    width: 500px;
    height: 300px;
    border: dashed red;   // Canvas border 
    background-size: 100px;    // Picture size 
                     contain;  // Fill the canvas up and down 
                     cover;    // Completely fill the canvas , Affect the original image 

    background-image: url(../img/picter/ai2003.jpg);
    background-repeat: repeat-x;
}

stay CSS The location of the image in the : 【background-position: Property value 】

.box1{
    width: 500px;
    height: 100px;
    border: dashed red;
    background-size: 100px;
    background-image: url(../img/picter/logo_db.png);    // Picture path 
    background-repeat: no-repeat;     // Don't spread 
    background-position: center center;     // picture centering 
                         bottom lift ;    // The lower left corner 
                         top right;    //  Upper right corner 
                         50px 50px ;   // Custom location  }</pre>

I am currently in-service front-end development , If you want to learn front-end development technology now , In the process of learning the front-end, I met with any questions about learning methods , Learning route , Learning efficiency and other issues , You can apply to join my front-end learning exchange skirt :421374697. There are some beginners who are learning the front-end by themselves , Turn traveler , The beginners , I also have some front-end interview questions that I did in front-end technology , Front end development source code tutorial ,PDF Document book tutorial , If you need it, you can get it from skirt pig .

CSS Background attachment in :【background-attachment: Property value 】

background-attachment:fixed; // Fixed picture position

Comprehensive appeal structure , Sure * Comprehensive shorthand properties Color Address Tiling method Is it fixed ( You don't need to write ) Location

background: pink url ("img/ Picture path ") no-repeat center center; background-size: 100%;

版权声明
本文为[Front, front and front]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225120055956p.html

Scroll to Top