CCS书写方式

最新推荐文章于 2023-10-09 12:19:00 发布

honeyws

最新推荐文章于 2023-10-09 12:19:00 发布

阅读量737

点赞数

分类专栏： Web前端基础文章标签： CCS书写方式

本文链接：https://blog.csdn.net/weixin_44802155/article/details/102824409

版权

Web前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CCS书写方式

2.1什么是书写方式？
CSS应该写到什么地方？
书写方式分为三种嵌入式外链式行内式

2.2嵌入式

什么是嵌入式
jiangCSS代码嵌入到HTML文件中，嵌入式式通过

如果我们使用的是HTML5的文档 type属性可以不写
注意：

他可以出现在HTML中任何地方，但是一般情况我们只会将他放置在标签下

在<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>嵌入式</title>
    <style type="text/css">
        div{
            width: 100px;/*宽度100像素*/
            height: 100px;/*高度100像素*/
            background-color:#ff0000;/*背景颜色红色*/
        }
        
        
    </style>
</head>
<body>
    <!---要使用CSS代码给div设置一个宽度100像素高度1
        00像素以及背景颜色为红色
        把div理解为一个存放东西的盒子--->
    <div></div>
</body>
</html>这里插入代码片

2.3外链式什么是外链式？

外链式是单独一个以CSS为扩展名的文件，然后在
标签中使用标签，将这个CSS’文件链接到html文件中。、
Css文件不能单独运行必须要依赖HTML文件中！
语法格式；
<！—将单独的css文件链接到当前的HTML文件中---->

相对路径和绝对路径都可以。可以有多个一个HTMl页面可以同时引入多个单独的CSS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外链式</title>
</head>
<body>
    <！---将单独的css文件链接到当前的HTML文件中---->
    <link rel="stylesheet" href="css地址">
</body>
</html>

2.3行内式

什么是行内式
将CSS代码书写到HTML标签的style属性中
Style是一个通用属性，每一个标签里面都拥有这个属性！
语法格式
<标签名 style=“属性:值;属性:值:”><标签名>
总结：
使用嵌入式的方式来书写CSS’代码，他只能作用于当前的HTML文件。
使用外链式的方式来书写CSS代码，他可以作用于多个HTML文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内式</title>
    <link rel="stylesheet" type="text/css" href="lhj.css">
</head>
<body>
    <!----将DIV设置为宽度100px 高度100px，背景颜色为红色
        使用行式是的方式来设置----->
     <div style="width: 100px; height: 100px; background-color:#f00;"></div>   
</body>
</html>

honeyws

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CCS书写方式

CCS书写方式2.1什么是书写方式？CSS应该写到什么地方？书写方式分为三种嵌入式外链式行内式2.2嵌入式什么是嵌入式jiangCSS代码嵌入到HTML文件中，嵌入式式通过如果我们使用的是HTML5的文档 type属性可以不写注意：他可以出现在HTML中任何地方，但是一般情况我们只会将他放置在标签下2.3外链式什么是外链式？外链式是单独一个以CSS为扩展名的文件，然后...
复制链接

扫一扫