09网页前端CSS——概述

一:概述

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;
}

猜你喜欢

转载自blog.csdn.net/weixin_41167340/article/details/81354799
今日推荐