如何为 html 和 php 使用外部 css 样式表答案

【问题标题】：How to use external css stylesheets for html and php如何为 html 和 php 使用外部 css 样式表
【发布时间】：2017-05-10 09:25:04
【问题描述】：

我正在尝试使用外部样式表在“profile”类中将 h3 元素和“profile_content”div-id 居中。我知道如何只用一个 html 和 css 文件来做到这一点，但是当涉及到 php 时我会感到难过！请您也可以帮助我了解语法，以便我知道将来要做什么。

php 代码

<?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 外部样式表

.heading {
    text-align: center;
}

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

}

h3. profile {
    text-align: center;
}

#profile_content. profile {
    text-align: center;
}

【问题讨论】：

@mxr7350 — 这些引号是 100% 可选的。它们可以丢失，添加它们不会有任何影响（除了在文件大小上增加几个字节）。
您的 CSS 有一个 number of errors，我根本看不出 PHP 会如何影响问题。
尝试<head> 而不是<header>。你还需要一个<body>。

标签： php html css alignment

【解决方案1】：

冬青通心粉！

首先更正您的 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>

之后你必须修复你的 CSS 选择器：

// 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;
}
*/

但首先：https://www.google.ch/?gfe_rd=cr&ei=6eISWYObOqLC8gfkzp3wBg#q=html+css+for+dummies

【讨论】：

【解决方案2】：

首先，整理你的 HTML：

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

现在要将 h3 居中，您需要：

.profile_content h3
{
    text-align:center;
}

您当前的 CSS 在某些方面不正确：您的“h3.profile”毫无意义（h3 点？也没有元素“profile”）。您还引用了一个不存在的“#profile_content”。

【讨论】：

【解决方案3】：

    <!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">

在php文件的顶部添加上述代码，并将文件保存为.php而不是.html

【讨论】：