前端:CSS(三)---span标签,字体样式,文本样式,超链接伪类

  • span标签:将要重点要突出的字使用span套起来

    
    
    
        
        Title
        
    
    
    我爱学"title1">java
    
    
    
  • 字体样式

        
        <style>
            body{
            
                font-family: 楷体;
                color: red;
            }
            h1{
            
                font-size: large;
            }
            .p1{
            
                font-weight: bolder;
            }
        style>
    
  • 文本样式:

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        
        <style>
            h1{
            
                color: red;
                text-align: center;
            }
            .p1{
            
                text-indent: 2em;
            }
            .L1{
            
                text-decoration:underline;
            }
            .L2{
            
                text-decoration:line-through;
            }
            .L3{
            
                text-decoration: overline;
            }
            a{
            
                text-decoration: none;
            }
        style>
    head>
    <body>
    <a href="">abca>
    <p class="L1">123p>
    <p class="L2">123p>
    <p class="L3">123p>
    
    <h1>跑步h1>
    
    <p class="p1">
        说起坚持跑步,总有人向我表示钦佩:“你真是意志超人啊!”说老实话,我觉得跑步这东西和意志没多大关联。
    p>
    
    <p>
        能坚持跑步,恐怕还是因为这项运动合乎我的要求:不需要伙伴或对手,也不需要特别的器械和场所。
        人生本来如此:喜欢的事自然可以坚持,不喜欢的怎么也长久不了
    p>
    
    <p>
        ——村上春树
    p>
    body>
    html>
    
  • 文本图片水平对齐

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <style>
            img,span{
            
                vertical-align: middle;
            }
        style>
    head>
    <body>
    <p>
        <img src="image/1.jpg" alt="" height="100px" width="100px">
        <span>2132132131span>
    p>
    body>
    html>
    
  • 超链接伪类

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>超链接伪类title>
        <style>
            a{
            
                text-decoration: none;/*取消a标签下划线*/
                color: #000000;/*初始颜色黑色*/
            }
            /*鼠标悬停的状态*/
            a:hover{
            
                color: orange;
            }
            /*鼠标点击未释放的状态*/
            a:active{
            
                color: green;
                font-size: 20px;/*鼠标点击时字体放大*/
            }
        style>
    head>
    <body>
    <a href="#">
        <img src="images/码出高效.jpg" alt="">
    a>
    <p>
        <a href="#">码出高效:Java开发手册a>
    p>
    <p>
        <a href="">作者:孤尽a>
    p>
    <p>
        ¥99
    p>
    body>
    html>
    

你可能感兴趣的:(前端,css,html)