The introduction of style sheets
Methods of Including Style Sheets
Style sheets are the core technology for controlling webpage appearance. HTML provides multiple ways to include CSS, each with its own use cases and characteristics. The most basic method is inline styles, where CSS rules are written directly in the style attribute of an HTML element.
<p style="color: red; font-size: 16px;">This text will appear in red</p>
Inline styles have the highest priority but are not conducive to maintenance and reuse. They are typically used only for temporary testing or overriding specific styles. A more common approach is to centralize CSS code by embedding it in the document head using the <style> tag:
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
border-bottom: 1px solid #ccc;
}
</style>
</head>
Linking External Style Sheets
In real-world projects, it is more recommended to use external style sheets by linking independent .css files via the <link> tag. This approach achieves complete separation of content and presentation, facilitates style sharing across multiple pages, and benefits from browser caching.
<head>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/theme.css" media="(prefers-color-scheme: dark)">
</head>
The link tag supports the media attribute for media queries. In the example above, the second style sheet will load when the user's system has dark mode enabled. Modern projects often adopt a multi-file organization structure:
assets/
├─ css/
│ ├─ base/
│ │ ├─ reset.css
│ │ └─ typography.css
│ ├─ components/
│ │ ├─ buttons.css
│ │ └─ cards.css
│ └─ main.css
The @import Rule
CSS itself provides the @import syntax, allowing other style sheets to be imported within a style sheet. This method is suitable for modular development but can impact loading performance:
/* main.css */
@import url('base/reset.css');
@import url('components/buttons.css');
body {
/* Main styles */
}
Note that @import loads synchronously—the browser must wait for the imported style sheet to download and parse before continuing with subsequent content. Modern front-end engineering prefers using build tools to merge CSS files.
Cascading and Priority of Style Sheets
When multiple inclusion methods coexist, the browser determines the final styles according to specific rules. Priority from highest to lowest is:
!importantdeclarations- Inline styles
- ID selectors
- Class selectors/attribute selectors/pseudo-classes
- Element selectors/pseudo-elements
<style>
#content { color: blue; }
.text { color: green !important; }
p { color: red; }
</style>
<p id="content" class="text" style="color: purple;">Final text color</p>
In this example, although the inline style has higher priority, the !important declaration in the .text class overrides all other rules, resulting in the text appearing green.
Media Queries and Conditional Loading
The media attribute enables responsive style loading. The following examples demonstrate style sheet inclusion for different devices:
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)">
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 601px) and (max-width: 1024px)">
Corresponding CSS files can also include media queries directly:
/* responsive.css */
.main {
width: 100%;
}
@media (min-width: 768px) {
.main {
width: 750px;
margin: 0 auto;
}
}
Preloading and Performance Optimization
For critical CSS, use rel="preload" to preload and enhance page rendering speed:
<link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="critical.css"></noscript>
This pattern asynchronously loads the CSS file and applies the styles immediately after loading. The <noscript> tag ensures the stylesheet loads normally in environments without JavaScript support.
Dynamic Style Loading
JavaScript can dynamically create link elements to load style sheets on demand:
function loadStylesheet(url) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
}
// Load theme based on user selection
document.getElementById('theme-switcher').addEventListener('change', (e) => {
loadStylesheet(`themes/${e.target.value}.css`);
});
This method is commonly used for theme-switching functionality. The scoped styling of frameworks like Vue also relies on similar dynamic style handling mechanisms.
Modularization of Style Sheets
Modern front-end frameworks provide more advanced ways to include styles. For example, in Vue single-file components:
<template>
<button class="btn">Click</button>
</template>
<style scoped>
.btn {
padding: 8px 16px;
background: #42b983;
}
</style>
The scoped attribute automatically adds unique attribute identifiers to selectors, achieving component-level style isolation. In the React ecosystem, the popular CSS-in-JS approach represents another modularization strategy:
import styled from 'styled-components';
const Button = styled.button`
padding: 8px 16px;
background: ${props => props.primary ? '#42b983' : '#eee'};
`;
function App() {
return <Button primary>Primary Button</Button>;
}
Browser Compatibility Considerations
When including style sheets, compatibility issues with older browsers must be considered. IE-specific conditional comments were once a common method to handle browser differences:
<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->
In modern development, feature queries (@supports) can be used for progressive enhancement:
.flex-container {
display: flex;
}
@supports not (display: flex) {
.flex-container {
display: table;
}
}
For new features like CSS variables, combine with @supports for detection:
:root {
--main-color: #06c;
}
@supports (--css: variables) {
.box {
color: var(--main-color);
}
}
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
上一篇：外部资源链接(link)
下一篇：脚本的引入(script)
