Register
> 博客>

css行内样式代码

新星源码网 8小时 Before 0 0

行内样式是直接在HTML元素中使用style属性来定义样式的一种方式。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>

    <h1 style="color: blue; text-align: center;">This is a Heading</h1>
    
    <p style="font-size: 16px; line-height: 1.5;">This is a paragraph with some inline styles.</p>

    <div style="background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
        <p style="color: green;">This is a paragraph inside a div with inline styles.</p>
    </div>

</body>
</html>

在上面的例子中，style属性被用于为<h1>、<p>和<div>元素定义了一些样式。样式规则被包含在双引号中，并且多个样式之间使用分号分隔。这样，你就可以直接在HTML元素中指定其样式，而不必使用外部CSS文件或在HTML文档的<head>部分使用<style>标签。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>

    <h1 style="color: blue; text-align: center; font-family: 'Arial', sans-serif;">This is a Heading</h1>
    
    <p style="font-size: 16px; line-height: 1.5; text-decoration: underline;">This is a paragraph with some inline styles.</p>

    <div style="background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 20px;">
        <p style="color: green; font-weight: bold;">This is a paragraph inside a div with inline styles.</p>
        <ul style="list-style-type: square;">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>

</body>
</html>

在这个例子中，我添加了更多的样式规则，如font-family、text-decoration、font-weight、margin-top等，以演示不同的样式效果。你可以根据需要调整这些规则，使其适应你的网页设计需求。行内样式通常用于对特定元素应用个性化的样式，但在整个网站中广泛重复使用相同样式的情况下，外部CSS文件更为适合。

Related

热门文章

微海报