一.内部样式表

只针对当前html有效
把style标签写在head中
style标签中写入选择器{}
在{}中写入选择器{属性名：属性值；属性名；属性值；

1.基础最常用选择器

*通配符选择器选择所有元素
标签选择器选择特定的标签
类名选择器选择拥有类名的标签
id 选择器选择拥有id并且值匹配的标签

2.优先级

id选择器>类名选择器>标签选择器>通配符选择器

二.基础样式

1.最基本的样式

颜色：color：颜色
background-color：背景色

字体：font-sise 字体大小
font-weight 字体粗细

边框：border：1px solid red 边框
：border0 radius ：圆角

外边距：margin maigin-* 外边距

内补：padding padding—-* 内补

宽高：width height 宽高

文本：text-align 水平居中 center

height=line height 垂直居中
text-decoration none 去除下划线

显示：dispaly inline 不换行
bblock 换行
inline-block 行内块

列表：list-style none去除列表样式（小圆点）

2.选择器+样式代码示例

<!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>
    <style>
        /* 通配符  能够适配所有元素*/
        /* 从样式来看 标签可以任意转换 */
        *{

            color: brown;
            margin: 0px;
            font-weight: 400;
            font-size: medium;
            text-decoration: underline;
            cursor: pointer;
        }
        /* 标签选择器 */
        h1{
            color:green;
        }
        /* class类名选择器 */
        .item{
            background-color: pink;
            margin-bottom: 10px;
        }
        /* id选择器 优先级最高*/
        #p{
            background-color: blue;
        }

        /* 
        优先级 id选择器>类名选择器>标签选择器>通配符选择器
        */
    </style>
</head>
<body>
    <h1 class="item">一级标题</h1>
    <p class="item"id="p">段落</p>
    <div class="item">一个块</div>
   
</body>
</html>

3.运行效果图

在这里插入图片描述

三.外部样式表

在css文件中编写
在css文件中写入选择器{}
在{}中写入选择器{属性名：属性值；属性名：属性值；}
在需要使用的页面内使用link标签引入在style标签上面

1.示例

在这里插入图片描述
在vicode里所需文档中创建css文件，

（优点：可以使用在多个html文件中。
1.选择器选择标签
2.{}编写样式语句
3.在head中使用link标签将css引入html
优先级低于内部样式表

一般情况优先级：外部样式表<内部样式表<行内样式
作用范围：外部样式表>内部样式表>行内样式）

之后就可以往里面插入你想设计的各种样式，注意也要用选择器。

原文链接：https://blog.csdn.net/a2237464569/article/details/126023359