css的基础知识

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

qq_50949773

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

阅读量66

点赞数

分类专栏：笔记文章标签： css html html5

本文链接：https://blog.csdn.net/qq_50949773/article/details/115769309

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了CSS的主要目的和作用，强调了结构与样式的分离，通过内嵌式和外链式引入CSS的方式展示了如何实现这一分离。示例中详细展示了如何使用CSS为表格和列表设置样式，包括边框、列表符号等，以提升网页的视觉效果。

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

样式结构分离

CSS的目的：为了达到结构与样式的分离
CSS的作用：可以给文字添加各种样式，给盒子添加样式用于布局······
语法：
选择器{
样式：样式值；
}
用内嵌式样式引入css时:
CSS写在HTML头部里面，对HTML身体里面的内容进行修饰。
用外链式引入css时:
在head标签内，使用link标签引入外部独立的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>
    <!-- CSS的目的：为了达到结构与样式的分离 -->
    <!-- 样式 -->
<style>
/* 表格设置样式 */
table{
    /* 设置边框 */
    border: 5px solid rebeccapurple;
}
/* 更改列表样式 */
li{list-style-type: circle;
}
</style>
</head>
<body>
<table>
        <tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
    </table>
    <!-- 列表 -->
    <ul>
        <li>第1行</li>
        <li>第2行</li>
        <li>第3行</li>
    </ul>
</body>
</html>