前端零基础学习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.最后定义的优先级最高(就近原则)

相关推荐
阿珊和她的猫3 小时前
v-scale-scree: 根据屏幕尺寸缩放内容
开发语言·前端·javascript
_Kayo_5 小时前
node.js 学习笔记3 HTTP
笔记·学习
加班是不可能的,除非双倍日工资7 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi7 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
CCCC13101638 小时前
嵌入式学习(day 28)线程
jvm·学习
gnip8 小时前
vite和webpack打包结构控制
前端·javascript
excel8 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
星星火柴9368 小时前
关于“双指针法“的总结
数据结构·c++·笔记·学习·算法
小狗爱吃黄桃罐头8 小时前
正点原子【第四期】Linux之驱动开发篇学习笔记-1.1 Linux驱动开发与裸机开发的区别
linux·驱动开发·学习
阿华的代码王国9 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端