dourou9477
dourou9477
2017-05-10 09:25
浏览 156
已采纳

如何使用外部CSS样式表的HTML和PHP

I'm trying to center the h3 element and "profile_content" div-id in the "profile" class using external style sheets. I know how to do it with just an html and css file but I get stumped when php gets involved! Please could you help me with the syntax as well so I know what to do in the future.

php code

<?php
    session_start();

    // Connect to the database with '$mysqli' as the connection variable name
    $mysqli = new mysqli ("localhost", "root", "", "folder");

    //Check connection
    // '$mysqli->connect_errno' = Returns the error code from last connect call
    // '->' is used to access an object method or property
    if ($mysqli -> connect_errno) {
        die('Connect Error: ' . $mysqli -> connect_errno);
    }
?>

<html>
    <header>
        <link rel = "stylesheet" type = "text/css" href = "mystyle_friends.css">
    </header>
    <div class = "heading">
    <h1>FRIENDS PAGE</h1>
    </div>


    <p>Welcome  <?php  echo $_SESSION['username'] ?></p>



    <div class = "profile_content">

        <div id = profile_heading>
        <h3>Profiles</h3>
        </div>

        <?php 
            //Perform query against database. Requires 2 parameters = (connection, query)
            $result = mysqli_query($mysqli, "SELECT * FROM users");
            while ($row = mysqli_fetch_array($result)) {
                echo "<div id = 'profile_data'>";
                echo "<p> First Name: " .$row ["user_f_name"] .  "</p>";//$user_first = $row["user_f_name"];
                echo "<p> Surname: " .$row ["user_surname"] .  "</p>";//$user_sur =  $row["user_surname"];
                echo "<p> Score: " .$row ["user_score"] .  "</p>";//$user_score = $row["user_score"];
                echo '<img src="data:user_images/jpeg;base64,' . base64_encode( $row['user_image'] ) . '" />';
                echo "</div>";
            }
        ?>

    </div>

css external style sheet

.heading {
    text-align: center;
}

.profile {
    border-style: solid;
    border-width: 5px;

}

h3. profile {
    text-align: center;
}

#profile_content. profile {
    text-align: center;
}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • douchuanghan1344
    douchuanghan1344 2017-05-10 09:53
    已采纳

    Holly Macaroni!

    First correct your HTML:

    <?php
        session_start();
    
        // Connect to the database with '$mysqli' as the connection variable name
        $mysqli = new mysqli ("localhost", "root", "", "folder");
    
        //Check connection
        // '$mysqli->connect_errno' = Returns the error code from last connect call
        // '->' is used to access an object method or property
        if ($mysqli -> connect_errno) {
            die('Connect Error: ' . $mysqli -> connect_errno);
        }
    ?>
    
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="mystyle_friends.css">
        </head>
        <body>
            <div class="heading">
                <h1>FRIENDS PAGE</h1>
            </div>
    
            <p>Welcome <?php echo $_SESSION['username'] ?></p>
    
            <div class="profile_content">
                <div id="profile_heading">
                    <h3>Profiles</h3>
                </div>
    
                <?php 
                    //Perform query against database. Requires 2 parameters = (connection, query)
                    $result = mysqli_query($mysqli, "SELECT * FROM users");
                    while ($row = mysqli_fetch_array($result)) {
                        echo "<div id=\"profile_data\">";
                        echo "<p>First Name: " . $row["user_f_name"] . "</p>";       //$user_first = $row["user_f_name"];
                        echo "<p>Surname: " . $row["user_surname"] . "</p>";       //$user_sur =  $row["user_surname"];
                        echo "<p>Score: " . $row["user_score"] . "</p>";           //$user_score = $row["user_score"];
                        echo "<img src=\"data:user_images/jpeg;base64," . base64_encode( $row['user_image'] ) . "\" />";
                        echo "</div>";
                    }
                ?>
            </div>
        </body>
    </html>
    

    After that you have to fix your CSS-Selectors:

    // Selectors:
    // element {} Elements can appear as many times as you need them per Document
    // .class {} Classes can appear as many times as you need them per Document
    // #id {} IDs can appear just once per Document
    
    .heading {
        text-align: center;
    }
    
    #profile_heading h3 {
        text-align: center
    }
    
    .profile_data {
        text-align: center;
    }
    
    // There is no Element with the Class "profile"
    /*
    .profile {
        border-style: solid;
        border-width: 5px;
    }
    */
    
    // There is no Element inside of the h3 with the Class "profile"
    /*
    h3. profile {
        text-align: center;
    }
    */
    
    // There is no Element with ID "profile_content"
    /*
    #profile_content .profile {
        text-align: center;
    }
    */
    

    But first: https://www.google.ch/?gfe_rd=cr&ei=6eISWYObOqLC8gfkzp3wBg#q=html+css+for+dummies

    点赞 评论
  • drwxg62286
    drwxg62286 2017-05-10 09:31

    First, tidy your HTML:

     <div class="profile_content">
        <div id="profile_heading">
            <h3>Profiles</h3>
        </div>
        ...Your SQL Stuff...
    </div>
    

    Now to center your h3, you'll need:

    .profile_content h3
    {
        text-align:center;
    }
    

    Your current CSS is incorrect in a few ways: you have "h3. profile" which makes no sense (a h3 dot? there's also no element 'profile'). You also reference a '#profile_content' which doesn't exist.

    点赞 评论
  • dongmu3269
    dongmu3269 2017-05-10 09:39
        <!DOCTYPE html>
    <html>
    
    <head>
        <title><?php echo $title; ?></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="<?php echo base_url();?>/css/bootstrap.min.css">
    

    Add the above code in the top of php file and save the file as .php instead of .html

    点赞 评论

相关推荐