CSS入门（CSS的基本语法、CSS的使用）

原创已于 2022-11-07 19:34:33 修改 · 212 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

于 2022-11-07 18:01:05 首次发布

本文介绍了CSS的基本语法，包括选择器、属性及属性值的设置方法，并演示了如何在HTML中应用这些样式。同时，文章详细说明了CSS的三种使用方式：行内样式、内部样式和外部样式。

CSS的基本语法

css样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性值。
选择器名{属性:属性值;......}
样式设置在style标签中
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>CSS的基础语法和注释</title>
    <!-- 样式设置在style标签中 -->
    <style type="text/css">
        body{
            background-color: antiquewhite;
            color: red;
            font-family: "arial black";
        }
    </style>
</head>
<body>
HELLO WORLD !!
</body>
</html>

CSS的使用（样式就近原则）

1.行内样式

将样式定义在html标签上的style属性中
以行内样式写的CSS耦合度较高
<p style="color: black;font-family: 宋体;">床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>

2.内部样式

定义在head标签中的style标签中
-<style type="text/css"> p { color:blue; font-family: 楷体; } </style>

3.外部样式

通过link标签引入外部的CSS文件

<link rel="stylesheet" href="style.css">

rel：当前文件与引入文件之间的关系
type：类型，CSS类型
href：引入的资源的路径
- p { color: red; font-family: 楷体; }

在这里插入图片描述

代码块

<!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>CSS的使用</title>
    <!-- 定义内部样式 -->
    <style type="text/css">
        /* p 标签 */
        p {
            color:blue;
            font-family: 楷体;
        }
    </style> 
   <!-- 引入外部的css文件 -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <h3><p style="color: black;font-family: 宋体;">床前明月光，疑是地上霜。举头望明月，低头思故乡。</p></h3>
   <h4><p>床前明月光，</p>
   <p>疑是地上霜。</p>
   <p>举头望明月，</p>
   <p>低头思故乡。</p></h4>
</body>
</html>

标签

#css #css3 #html