CSS入门基础知识

最新推荐文章于 2025-04-14 18:20:59 发布

whhom

最新推荐文章于 2025-04-14 18:20:59 发布

阅读量147

点赞数

分类专栏：前端基础文章标签： css html 前端 css3 javascript

本文链接：https://blog.youkuaiyun.com/whhcs/article/details/123170947

版权

前端基础专栏收录该内容

3 篇文章

订阅专栏

CSS入门基础知识

CSS简介

CSS（Cascading Style Sheets）指的是层叠样式表，可以定义样式更好的显示html页面。

CSS的作用：

结构与样式分离的方式，便于后期维护与改版
可以用多套样式，使网页有任意样式切换的效果
使页面载入得更快、降低服务器的成本

样式表分类：外部样式表、内部样式表、行内样式。

CSS文件结构

内部样式表

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>层叠样式表</title>
    
    <!--在style标签中书写css代码-->
    <style type="text/css">
        p{
            background-color: red;
            font-size: 20px;
        }
    </style>
    
</head>
<body>
    <p>这是第一段</p>
    <p>这是第二段</p>
</body>
</html>

外部样式表

外部样式表就是将所有的样式代码放在一个或多个.css文件中，然后通过link标签将.css文件链接到html文档中。

作用：使网页的表示层与结构层彻底分离

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>层叠样式表</title>
    
    
	<link rel="stylesheet" type="text/css" href="index.css">

</head>

link：用于定义文档与外部资源的关系

rel：rel是relationship的缩写，也就是关系

type：定义css样式文件的类型

href：引用的具体的文件的路径

CSS样式属性总结

背景样式

美化、修饰页面的背景

在这里插入图片描述

文本样式

美化、修饰页面的文字部分相关内容

在这里插入图片描述

字体样式

定义文本的字体系列、大小、加粗、风格（如斜体）

在这里插入图片描述

列表样式

在这里插入图片描述

CSS选择器

作用：用来选择（找到）需要添加样式的位置。

标签和类选择器

<head>
    <style>
        <!--p为标签选择器-->
        p{
           	font-size: 10px;
        }
        
        <!--.p1为类选择器-->
        .p1{
            font-size: 10px;
        }
    </style>
</head>
<body>
    <p class="p1">这是一个段落</p>
</body>

伪类选择器

<!--a为标签，:link即为伪类选择器-->
a:link{
	font-weight: bold;
	text-decoration: none;
	color: red;
}

在这里插入图片描述

伪元素选择器

在这里插入图片描述

CSS其他选择器

在这里插入图片描述

CSS选择器优先级

在这里插入图片描述

CSS入门基础知识

目录

CSS入门基础知识

CSS简介

CSS文件结构

内部样式表

外部样式表

CSS样式属性总结

背景样式

文本样式

字体样式

列表样式

CSS选择器

标签和类选择器

伪类选择器

伪元素选择器

CSS其他选择器

CSS选择器优先级