CSS——结合方式

最新推荐文章于 2024-09-16 23:33:40 发布

panpan_1994

最新推荐文章于 2024-09-16 23:33:40 发布

阅读量457

点赞数

分类专栏： WEB开发文章标签： html 标签 javascript css 框架

本文链接：https://blog.csdn.net/panpan_1994/article/details/52008006

版权

WEB开发专栏收录该内容

44 篇文章 0 订阅

订阅专栏

其实html,css,javascript一般是放在一起学的，html主要用于定制一个页面的框架，早期只有html，没有css,这时候很多页面显示的部分的渲染都是靠html属性来做的，像font中的属性，color,size等，随着之后的发展，html文件中写太多的东西会显得很臃肿，于是为了“解耦合”，CSS就应运而生了，下面就是介绍CSS和HTML的结合方式了，这里主要介绍三种：
1、直接在html标签上加style属性，属性的值填写css代码，所有的标签都有style属性。
举例：将一句话设置为红色；

<html>
<head>
    <title>结合方式1</title>
</head>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html";charset="utf-8">
<body>
    <p style="color:red;">Welcome to CSS World!</p>
</body>
</html>

2、使用head标签中的style标签。设置页面样式。style中填写css代码；
举例：将两句话设置为红色；

<html>
<head>
    <title>结合方式2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <style type="text/css">
  p{
        color:red;
    }
    </style>

</head> 
<body>
    <p>Welcome to CSS World!</p>
    <p>----Welcome to CSS World----!</p>
</body>
</html>

3、应用外部的一个链接link,同样的在head中添加；这里需要先建立一个css文件，用于link使用；命名为p.css；

p{
    color:red;
}

接着在下面的代码中引用;

<html>
<head>
    <title>结合方式3</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <link rel="stylesheet" type="text/css" href="p.css">

</head>

<body>
    <p > Welcome to CSS World!</p>
</body>
</html>