前端的学习-CSS（一）

银杏也要学习代码

已于 2024-07-22 19:49:24 修改

阅读量570

点赞数 7

文章标签：前端学习 css

于 2024-07-22 19:47:18 首次发布

本文链接：https://blog.csdn.net/m0_68823256/article/details/140617025

版权

一：CSS——网页的美容师

CSS是层叠样式表 ( Cascading Style Sheets) 的简称。。

CSS也是一种标记性语言。

CSS主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

简单的理解就是CSS可以美化我们的HTML。

CSS一般由选择器和一条或者多条声明组成，声明与声明间使用” ; “进行分隔，属性名与属性值之间使用“ : ”进行分隔。

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式。属性名和属性值以"键值对"的形式出现。

h3{font-size: 45px;}

上面的font-size:45px,font-size就是属性名，而45px则是属性值。

二：CSS的书写方式

1：内嵌样式

理论上可以将CSS写在HTML文件的任何位置，但一般写在<head>中。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书写方式</title>
    <style>
        /* 1) 内联样式（内嵌） */
        .item {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

2：行内样式

行内样式表（内联样式）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。

<div style="width: 120px;height: 120px;background-color: blue;"></div>

3：外联样式

这种方式将样式文件彻底与HTML文件文档分离，实际开发都是外部样式表。将样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用。

 <link rel="stylesheet" href="./app.css">

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

type：定义所链接文档的类型，我们可以省略。

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

三：CSS的选择器

CSS的选择器分为基础选择器与复合选择器两种。

基础选择器是由单个选择器组成的，包括：标签选择器、类选择器、id 选择器和通配符选择器。

1：基础选择器

1：标签选择器（元素选择器）

元素选择器指的是使用HTML的标签来命名的选择器，能够快速的将html同一标签选中，缺点是不能设计差异化样式，只能选择全部的当前标签。

语法：

标签名{
    属性名：属性值；
    属性名：属性值；
    属性名：属性值；
{

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			h3{
				font-size: 45px;
				color: #000;
				font-weight: bold;
			}
			
		</style>
	</head>
	<body>
		<h3>
			三级标题~~~~
		</h3>
	</body>
</html>

2：类选择器

可以将html差异化，为标签起一个类名，使其成为单独的个体，就可以对其进行单独的美化，选择器以“ . ”符号开头，在html标签中使用class=“类名”来为标签命名。

注意：不要使用纯数字、中文等命名，尽量使用英文字母来表示。

语法：

.类名{
    属性名:属性值;
    属性名:属性值;
    属性名:属性值;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.My-h3{
				font-size: 45px;
				color: #000;
				font-weight: bold;
			}
			
		</style>
	</head>
	<body>
		<h3 class="My-h3">
			三级标题~~~~
		</h3>
	</body>
</html>

类名选择器可以使用多联名的方式，选中标签。

<h3 class="My-h3 My-h3-two">三级标题~~~~</h3>

3：id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以"#" 来定义。

id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

注意：id 属性类似于人的身份证只有一个，所有id选择器在每个 HTML 文档中只能出现一次。

语法：

#id{
    属性名:属性值;
    属性名:属性值;
    属性名:属性值;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			#My-h3{
				font-size: 45px;
				color: #000;
				font-weight: bold;
			}
			.My-h3-two{
				font-style: inherit;
			}
			
		</style>
	</head>
	<body>
		<h3 id="My-h3">
			三级标题~~~~
		</h3>
	</body>
</html>

4：通配符选择器

在 CSS 中，通配符选择器使用"*"定义，它表示选取页面中所有元素（标签）。

语法：

*{
    属性名:属性值;
    属性名:属性值;
    属性名:属性值;
}

*{
	font-size: 45px;
	color: #000;
	font-weight: bold;
}

银杏也要学习代码

关注

7
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端的学习-CSS（一）

进入CSS部分
复制链接

扫一扫