前端零基础学习Day-Five

CSS

  • CSS层叠样式表(Cascading Style Sheets)

  • 用于定义HTML内容在浏览器内的显示样式

  • CSS简化HTML相关标签,网页体积小,下载快

  • 解决内容与表现分离的问题

  • 更好地维护网页,提高工作效率

CSS基础语法

CSS规则由两部分构成:选择器,声明

  • CSS注释:/*注释语句*/

font-size:14px 值和单位之间不能有空格

  • CSS引用:

    在<head></head>标签内:

    <style type="text/css">

    CSS样式...

    </style>

CSS行内样式

在开始标签内添加style样式属性,与html同时加载,不便维护

复制代码
<p style="color:red;font-size:20px">内容</p>
CSS内部样式

内部样式(嵌入样式),与html同时加载,把CSS样式代码写在:

<style>要放在<head>标签之间

复制代码
<style type="text/css">
    <!--
    样式...
    -->
</style>

<!---->防止低版本浏览器不识别style标签,加了<!---->在低版本浏览器中样式会被注释掉,在高版本浏览器内注释也不会被识别

CSS外部样式

外部样式表,把CSS样式代码写在独立的一个文件中

页面加载时,同时加载CSS样式

扩展名:CSS文件名.CSS

引入外部文件:<link href="XX.css" rel="stylesheet" type="text/css" />

<link>要放在<head>之间

使用链入外部样式的好处:

1.CSS和HTML分离;

2.多个文件可以使用同一个样式文件;

3.多个文件引用同一个css文件,css只需下载一次;

CSS导入样式

@import "外部CSS样式"

在读取完html文件之后加载

CSS使用方法优先级

行内样式>内部样式>外部样式

  • 说明:

    1.链入外部样式表与内部样式表之间的优先级取决于所处位置的先后

    2.最后定义的优先级最高(就近原则)

相关推荐
jlspcsdn3 分钟前
20251222项目练习
前端·javascript·html
YangYang9YangYan9 分钟前
2026高职会计电算化专业高价值技能证书
大数据·学习·区块链
行走的陀螺仪26 分钟前
Sass 详细指南
前端·css·rust·sass
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ31 分钟前
React 怎么区分导入的是组件还是函数,或者是对象
前端·react.js·前端框架
LYFlied44 分钟前
【每日算法】LeetCode 136. 只出现一次的数字
前端·算法·leetcode·面试·职场和发展
子春一21 小时前
Flutter 2025 国际化与本地化工程体系:从多语言支持到文化适配,打造真正全球化的应用
前端·flutter
QT 小鲜肉1 小时前
【Linux命令大全】001.文件管理之file命令(实操篇)
linux·运维·前端·网络·chrome·笔记
羽沢312 小时前
ECharts 学习
前端·学习·echarts
风行男孩2 小时前
stm32基础学习——OLED显示屏的基本使用
stm32·嵌入式硬件·学习