CSS的简介

2023-09-25 19:26:45

CSS主要使用场景是美化网页，布局页面的

1.1 HTML的局限性

HTML只关注内容，比如<h1>表示这是一个标题，<img>表示这是一个图片，<p>表示这是一个段落。在HTML标签中对每项内容的修改过于麻烦，同时代码段是无尽的臃肿

1.2 CSS是网页的美容师

CSS是层叠样式表的简称

1.HTML主要是写结构，来展示元素内容

2.CSS是用来美化网页的，布局作用。

3.CSS的价值，由HTML专注做结构，样式用CSS。即结构与样式分离

1.3 CSS的语法规范

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>
    <!-- css书写位置 -->
    <style>
        /* 选择器{样式} */
        p{
            color: red;
            font-size: 50px;  /* 修改文字为50像素 */
        }
    </style>
</head>
<!-- HTML书写位置 -->
<body>
    <p>你也别想活着</p>
</body>
</html>

1.选择器是用来指定CSS的样式的HTML标签（就像上面的p）

2.属性与属性值以“键值对”的形式出现。

3.属性与属性值之间用 : 来分割，在每一行的最后用；结束。

1.4 CSS代码风格（在实际开发中常使用的）

1. 样式格式的书写

1.紧凑书写

h1{color: red;font-size: 30px}

2.展开书写

h1{
    color: red;
    font-size: 30px
}

2. 样式大小的书写

h1{
    color: red;
}

H1{
    COLOR: RED;
}

一般来说选择器，属性和属性值全部使用小写字母。特殊情况除外。

3. 样式空格的书写

h1 {
    color: red;
}

1.在属性值前面，冒号后面加一个空格。

2.在选择器和大括号中间保留空格

码农公寓