css基本写法--详解大全

目录

1.行内样式

2.内嵌样式

3.外链样式

4.@import

5.注意

加载顺序


1.行内样式

我们要某个 HTML 标签中去书写样式,它需要使用 style 属性来指定。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式的使用</title>
</head>
<body>
<div>这是第一个样式的<span style="color: red; font-weight: bold; text-decoration: underline;">使用</span>,<span style="color: red; font-weight: bold; text-decoration: underline;">采用的是行内样式</span></div>
</body>
</html>

注意

这种写法有什么问题?

问题就是不利于我们的代码维护。

如何解决?

我们就可以使用内嵌样式来解决。

2.内嵌样式

内嵌样式又叫页面样式,它的作用是对当前整个页面有效。使用它需要把样式写在一个叫 style 的标签,一般这个标签会放在 head 部分。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌样式</title>
  <style>
    span {
        /*color: #ff0000;*/
        color: #f00;
        font-weight: bold;
        /*text-decoration: underline;*/
    }
  </style>
</head>
<body>
<div>这是第一个样式的<span>使用</span>,<span>采用的是行内样式</span></div>
</body>
</html>

注意

这种方式有问题吗?

有问题,如果很多文件中都需要这个样式,那么,我们仍然需要在各个文件中来编写一次。如何解决?

可以采用外链样式。

3.外链样式

外链样式也叫外部样式,我们把需要的公共的样式编写在一个单独的文件,这个文件的后缀必须是 .css,然后在需要引入的文件中通过 link 标签来使用这个外部样式文件。

首先定义外部样式:通常我们需要把外部样式放到一个名为 css 的目录下。

复制代码
/*
div的样式:颜色为蓝色,字体为微软雅黑,字体大小为 14 像素
span的样式:字体为斜体,绿色
 */
div {
    color: #0000ff;
    font-family: '微软雅黑';
    font-size: 14px;
}
span {
    font-style: italic;
    color: green;
}

然后编写页面,并使用外部样式:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外链样式</title>
    <link rel="stylesheet" href="css/outer.css">
</head>
<body>
<div>这是第一个样式的<span>使用</span>,<span>采用的是行内样式</span></div>
</body>
</html>

通过 link 标签来使用外部样式,在 link 标签中需要指定 rel 属性,它的值是 stylesheel,并通过 href 属性来引入外部的样式文件地址。

注意

这种方式有问题吗?

有可能会浪费内存空间。

4.@import

还可以使用 @import 语句来引入外部的样式,它需要放到 style 标签中。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外链样式</title>
    <!--<link rel="stylesheet" href="css/outer.css">-->
    <style>
        @import "css/outer.css";
    </style>
</head>
<body>
<div>这是第一个样式的<span>使用</span>,<span>采用的是行内样式</span></div>
</body>
</html>

5.注意

加载顺序

假设我们的页面既用到外部样式,也用到内嵌样式,还用到行内样式,那么谁起作用?

1.外部样式编写

复制代码
/*outer2.css*/
div {
    color: red;
    font-size: 16px;
}

2.编写页面

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>几种使用方式的加载顺序</title>
    <link rel="stylesheet" href="css/outer2.css">
    <style>
        div {
            color: blue;
        }
    </style>
</head>
<body>
<div style="color: green;">这是一个块元素</div>
</body>
</html>

通过上面的案例我们发现,当几个样式中有相同部分时,行内样式优先于页面样式,而页面样式优先于外部样式。简单来说:就近原则

相关推荐
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓4 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js