09网页前端CSS——概述

最新推荐文章于 2024-02-27 16:22:56 发布

lemon_wsm

最新推荐文章于 2024-02-27 16:22:56 发布

阅读量328

点赞数

分类专栏：网页前端

本文链接：https://blog.csdn.net/weixin_41167340/article/details/81354799

版权

网页前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一：概述

CSS是一种标记语言，不需要编译，直接由浏览器解释执行。在网页制作时，采用层叠样式表技术，可以有效的对页面的额布局，字体，颜色，背景和其他效果实现

二：HTML中如何使用CSS样式

1：内联式（InLine）：应用内嵌样式到各自的网页元素就是在HTML 的标签中使用style属性来设置css

格式：<html 标签 style=“属性:值；属性：值。。。。">被修饰的内容<html/>

<p style="color:blue;font-family:隶书">
            html中使用css的样式
        </p>

2:嵌入式：在网页上创建嵌入式表，就是在head标签中使用<style type="text/css">......</style>标签设置css样式

格式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css概述</title>
        <style>
            h1{
                color: green;
            }
        </style>
    </head>
    <body>
        <p style="color:blue;font-family:隶书">
            html中使用css的样式
        </p>
        <h1>嵌入式样式</h1>
        <h1>嵌入式样式作用于整个页面</h1>
        
    </body>
</html>

3：外联式：将网页连接到外部样式表，就是在head标签中使用<link> 标签导入一个css文件，在作用于本页面，实现css样式设置。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css概述</title>
        <!--嵌入式：样式设置-->
        <style>
            h1{
                color: green;
            }
        </style>
        <!--外联式：引入样式表-->
        <link href="./1.css" type="text/css" rel="stylesheet"><!--样式表-->
    </head>
    <body>
       <!--内联式：-->
        <p style="color:blue;font-family:隶书">
            html中使用css的样式
        </p>
           <!--嵌入式-->
        <h1>嵌入式样式</h1>
        <h1>嵌入式样式作用于整个页面</h1><br>

        <h2>外联引入</h2>
    </body>
</html>

新建1.css文件。

h2{
    color:red;
}