您现在的位置是：网站首页 > <style>-样式信息文章详情

<style>-样式信息

陈川【 HTML 】 42588人已围观 5739字

<style>标签用于在HTML文档中定义内部样式表，直接控制页面元素的呈现方式。它通常放置在<head>部分，但现代浏览器也允许在<body>内使用。样式规则通过CSS语法编写，影响范围限于当前文档。

`<style>`标签的基本语法

<style>标签的语法结构非常简单，只需在开始和结束标签之间写入CSS规则即可。基本格式如下：

<style>
  /* CSS规则写在这里 */
  selector {
    property: value;
  }
</style>

例如，以下代码将所有段落文字设置为红色：

<style>
  p {
    color: red;
  }
</style>

<style>标签支持几个重要属性：

type：指定样式表的MIME类型，默认为text/css
media：指定样式表应用的媒体类型（如screen、print）
scoped：已废弃的属性，曾用于限定样式作用范围

`<style>`标签的属性详解

type属性

虽然现代浏览器默认将<style>内容视为CSS，但显式声明type仍是良好实践：

<style type="text/css">
  body { background: #f5f5f5; }
</style>

media属性

通过media属性可以实现响应式设计，针对不同设备应用不同样式：

<style media="screen">
  /* 屏幕显示样式 */
  .print-only { display: none; }
</style>

<style media="print">
  /* 打印样式 */
  .screen-only { display: none; }
  body { font-size: 12pt; }
</style>

已废弃的scoped属性

scoped属性曾用于限定样式只作用于父元素及其子元素：

<div>
  <style scoped>
    p { color: blue; }  /* 只影响这个div内的p元素 */
  </style>
  <p>这段文字是蓝色的</p>
</div>
<p>这段文字不受影响</p>

`<style>`标签的放置位置

在`<head>`中使用

这是最传统的放置方式，确保样式在页面加载时立即应用：

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 { text-align: center; }
  </style>
</head>
<body>
  <h1>居中标题</h1>
</body>
</html>

在`<body>`中使用

HTML5允许在文档任何位置放置<style>标签：

<body>
  <style>
    .highlight { background: yellow; }
  </style>
  <p class="highlight">高亮文本</p>
</body>

CSS规则的具体写法

基本选择器示例

<style>
  /* 元素选择器 */
  p { line-height: 1.6; }
  
  /* 类选择器 */
  .warning { color: orange; }
  
  /* ID选择器 */
  #main-content { width: 800px; }
  
  /* 属性选择器 */
  input[type="text"] { border: 1px solid #ccc; }
</style>

组合选择器示例

<style>
  /* 后代选择器 */
  article p { margin-bottom: 1em; }
  
  /* 子选择器 */
  ul > li { list-style-type: square; }
  
  /* 相邻兄弟选择器 */
  h2 + p { text-indent: 2em; }
  
  /* 通用兄弟选择器 */
  h3 ~ p { font-style: italic; }
</style>

伪类和伪元素

<style>
  /* 链接状态 */
  a:hover { text-decoration: underline; }
  
  /* 首字母 */
  p::first-letter { font-size: 150%; }
  
  /* 表单元素 */
  input:focus { outline: 2px solid blue; }
</style>

媒体查询的高级应用

<style>标签内可以包含复杂的媒体查询，实现响应式布局：

<style>
  /* 基础样式 */
  .sidebar { width: 300px; }
  
  /* 屏幕宽度小于768px时 */
  @media (max-width: 768px) {
    .sidebar {
      width: 100%;
      margin-bottom: 20px;
    }
  }
  
  /* 打印时隐藏导航 */
  @media print {
    nav { display: none; }
    body { font-size: 12pt; }
  }
</style>

CSS变量与`<style>`标签

现代CSS支持变量定义，可以在<style>标签中使用：

<style>
  :root {
    --primary-color: #4285f4;
    --spacing-unit: 8px;
  }
  
  .button {
    background-color: var(--primary-color);
    padding: calc(var(--spacing-unit) * 2);
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --primary-color: #8ab4f8;
    }
  }
</style>

性能优化考虑

虽然<style>标签很方便，但需要注意：

大型项目建议使用外部样式表
避免在<body>中放置过多<style>标签
关键CSS可以内联在<head>中提高首屏渲染速度

<head>
  <style>
    /* 关键CSS */
    .hero { 
      font-size: 2rem;
      padding: 2rem 0;
    }
  </style>
  <!-- 异步加载非关键CSS -->
  <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
</head>

动态修改`<style>`内容

JavaScript可以动态操作<style>标签：

<style id="theme-style">
  :root { --main-bg: white; }
</style>

<script>
  function setDarkTheme() {
    const style = document.getElementById('theme-style');
    style.textContent = ':root { --main-bg: #333; }';
  }
</script>

浏览器兼容性注意事项

某些旧版本浏览器可能需要type="text/css"
IE8及以下对某些CSS3选择器支持有限
移动端浏览器对viewport单位的处理可能不一致

<style>
  /* 针对旧版IE的hack */
  .box {
    color: red; /* 所有浏览器 */
    *color: blue; /* IE7及以下 */
    _color: green; /* IE6 */
  }
</style>

与预处理器结合使用

虽然<style>标签通常包含纯CSS，但可以通过构建工具处理：

<style lang="scss">
  /* 实际项目中需要构建工具支持 */
  $primary: #3bbfce;
  .header {
    background-color: lighten($primary, 10%);
  }
</style>

安全性考虑

避免直接插入用户提供的CSS内容
注意CSS注入攻击
使用CSP限制内联样式

<!-- 不安全的做法 -->
<style>
  ${userProvidedCSS} <!-- 可能包含恶意代码 -->
</style>

实际应用案例

主题切换实现

<style id="main-theme">
  :root {
    --text-color: #333;
    --bg-color: #fff;
  }
</style>

<button onclick="toggleTheme()">切换主题</button>

<script>
  function toggleTheme() {
    const style = document.getElementById('main-theme');
    const isDark = style.textContent.includes('#333');
    
    style.textContent = isDark 
      ? ':root { --text-color: #eee; --bg-color: #222; }'
      : ':root { --text-color: #333; --bg-color: #fff; }';
  }
</script>

打印样式优化

<style media="print">
  @page {
    size: A4;
    margin: 1.5cm;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  .no-print {
    display: none;
  }
  
  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
</style>

现代CSS特性在`<style>`中的使用

CSS Grid布局示例

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
  
  @media (max-width: 600px) {
    .container {
      grid-template-columns: 1fr;
    }
  }
</style>

Flexbox布局示例

<style>
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .nav-item {
    flex: 1;
    text-align: center;
  }
</style>

动画效果实现

<style>
  @keyframes slidein {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
  
  .slide-in {
    animation: slidein 0.5s ease-out;
  }
  
  .pulse {
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }
</style>

上一篇：持续集成与交付实践

下一篇： <title>-文档标题