css简介与书写样式

最新推荐文章于 2024-01-25 06:00:00 发布

枕頭說他不想醒

最新推荐文章于 2024-01-25 06:00:00 发布

阅读量85

点赞数 4

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_52984349/article/details/125527523

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇博客介绍了CSS的基础知识，包括CSS的三层结构（结构、表现、行为）及其重要性。接着，讲解了CSS样式的三种书写位置——行内样式、内部样式表和外部样式表，分析了各自的优缺点。示例展示了如何通过外部样式表和内部样式表设置网页元素的样式。

摘要由CSDN通过智能技术生成

一、css简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 网页主要分成三个部分
            结构  网站整体的架构
            表现  外在显示的样子
            行为  
        css-它是层叠样式表，立体的存在
           - 网页是一个多层的结构，通过css来为网页的每一层进行样式设置
             
        css学习要先找到，后设置，找到要设置样式的本体，然后再对他进行设置

    -->
</body>
</html>

二、css书写样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <style> 
    p{
        font-size: 50px;
    }
    /* 内部样式表例子 */
    </style>
</head>
<body>
    <!-- 书写位置分为三种
     1、行内样式
        优点：     1、写的时候方便
        缺点：     1、结构和表现耦合
                   2、修改起来不方便
             用的较少，不推荐使用
     -->
     <h1 style="background-color: aqua;color:white;">今天星期天可以休息</h1>
     <h2>我要好好学习</h2>
     <!--
     2、内部样式表（写在我们的头部 ）
     用style标签包裹，写在style里面
        优点：修改起来方便
        缺点：只能单页面使用，不能多页面重复使用
    -->
    <!--
      3、外部样式表
        在html文件外部，设置.css文件，通过link标签引入到html文件中
        样式写在.css文件中
         优点：可以多页面重复使用
         缺点：不是很方便       
    -->
     
</body>
</html>