CSS简介

CSS (层叠样式表,Cascading Style Sheets)是用于描述网页内容外观和布局 的样式语言。它与HTML (负责内容结构)和JavaScript(负责交互逻辑)共同构成现代网页开发的三大核心技术。通过CSS,开发者可以将简单的HTML内容转化为美观、交互丰富的网页界面。

CSS具有以下特点

层叠性 (Cascading):多个样式规则可以同时作用于同一元素,最终样式由优先级和层叠顺序决定。
选择器 (Selectors):通过选择器,你可以选择要应用样式的HTMLT元素。选择器可以根据元素的标签名、类名、ID、属性等进行匹配。
样式规则 (Style Rules):样式规则由选择器和一组属性-键值对组成。选择器选择要应用样式的元素,属性-键值对定义了要应用的样式。
继承性 (Inheritance):子元素自动继承父元素的某些样式属性(如字体、颜色),无需重复定义。
盒模型 (Box Model) :CSS中的元素被认为是一个矩形的盒子,具有内容区域、内页距
布局(Layout):CSS提供了一些布局属性和技术,如浮动、定位、弹性盒子等,用于更精确地控制网页的排版和布局。

CSS应用到HTML

内联样式:

直接在 HTML 元素的 style 属性中编写 CSS 样式,作用于单个元素。

javascript 复制代码
<div style="color: red; font-size: 16px;"></div>

内部样式表:

将 CSS 样式写在 HTML 文档的

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .my-class{
            color: blue;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div style="color: red; font-size: 16px;"></div>
    <div class="my-class">my-class</div>
</body>
</html>

外部样式表:

外部样式表(External Stylesheet)是将 CSS 代码单独存储在 .css 文件 中,通过 HTML 的 标签引入到网页中的样式定义方式。它是 CSS 最推荐的使用形式,实现 内容与样式的完全分离。

css 复制代码
body{
    background-color: blanchedalmond;
}
h1{
    color: blue;
}
p{
    color: red;
}

在html文档中引入外部CSS文件:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="t01.css">
</head>
<body>
    
</body>
</html>

外部样式表 是构建可维护、高性能网站的基石。通过文件拆分、构建工具优化和模块化开发,可以充分发挥其优势。

相关推荐
涔溪10 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
代码的余温14 小时前
CSS3文本阴影特效全攻略
前端·css·css3
每天开心14 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
3Katrina18 小时前
我仿造了一个掘金App的首页...
前端·css
伍哥的传说1 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
结城2 天前
深入掌握CSS Grid布局:每个属性详解与实战示例
前端·css
寒..2 天前
网络安全第三次作业
前端·css·html
小白阿龙2 天前
如何实现缓存音频功能(App端详解)
前端·css·html5
smile boy2 天前
个人财务记录应用
前端·javascript·css·css3·html5
FogLetter2 天前
从零复刻网易云音乐年度总结H5:技术细节与用户体验的完美结合
前端·css