前端三件套之一的CSS体验卡

我不算小饼干

已于 2022-04-18 17:16:34 修改

阅读量981

点赞数 27

分类专栏： JavaWeb学习笔记文章标签： java 前端 html5

于 2022-04-18 11:18:43 首次发布

本文链接：https://blog.csdn.net/m0_69528918/article/details/124236091

版权

JavaWeb学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

各位好，我是小饼干🍪，一个编程界的小学生，每天都希望学习一点点编程相关。前端三件套分别是HTML，CSS，Javascript，前端的内容太多本文浅浅地体验一下。感谢各位的驻足，笔芯♥。

这里写目录标题

- 2，CSS

2，CSS

2.1 概述

CSS 是一门语言，用于控制网页表现。

CSS也有一个专业的名字：Cascading Style Sheet（层叠样式表）。

2.2CSS导入方式

CSS 导入 HTML有三种方式：

内联样式：在标签内部使用style属性，属性值是css属性键值对
```
<div style="color: red">Hello CSS~</div>
```
给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。（很不建议）
内部样式：定义<style>标签，在标签内部定义css样式
```
<style type="text/css">
	div{
		color: red;
    }
</style>
```
这种方式可以做到在该页面中复用。一般写在body快要结束的地方
外部样式：定义link标签，引入外部的css文件

编写一个css文件。名为：demo.css，内容如下:
```
div{
	color: red;
}
```
在html中引入 css 文件。
```
<link rel="stylesheet"  href="demo.css">
```
这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 link 标签引入该css文件。

代码演示：

项目目录结构如下：

编写页面 02-导入方式.html，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>
    <link href="../css/demo.css" rel="stylesheet">
</head>
<body>
    <div style="color: red">hello css</div>

    <span>hello css </span>

    <p>hello css</p>
</body>
</html>

2.3 css 选择器

css 选择器就是选取需设置样式的元素（标签），比如如下css代码：

div {
	color:red;
}

如上代码中的 div 就是 css 中的选择器。我们只讲下面三种选择器：

元素选择器

格式：

元素名称{color: red;}

例子：

div {color:red}  /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/

id选择器

格式：

#id属性值{color: red;}

例子：

html代码如下：

<div id="name">hello css2</div>

css代码如下：

#name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/

类选择器

格式：

.class属性值{color: red;}

例子：

html代码如下：

<div class="cls">hello css3</div>

css代码如下：

.cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/

（区别在于，id只能给一个标签使用，class可以给多个标签使用）

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }

        #name{
            color: blue;
        }

        .cls{
            color: pink;
        }
    </style>

</head>
<body>
    <div>div1</div>
    <div id="name">div2</div>
    <div class="cls">div3</div>
    <span class="cls">span</span>
</body>
</html>

2.4 css 属性

css属性可以在W3school查找观看。不做过多说明
在这里插入图片描述

我不算小饼干

关注

27
点赞
踩
22

收藏

觉得还不错? 一键收藏
25
评论
前端三件套之一的CSS体验卡

各位好，我是小饼干🍪，一个编程界的小学生，每天都希望学习一点点编程相关。前端三件套分别是HTML，CSS，Javascript，前端的内容太多本文浅浅地体验一下。感谢各位的驻足，笔芯♥。2，CSS2.1 概述CSS 是一门语言，用于控制网页表现。CSS也有一个专业的名字：Cascading Style Sheet（层叠样式表）。2.2CSS导入方式CSS 导入 HTML有三种方式：内联样式：在标签内部使用style属性，属性值是css属性键值对<div style="colo.
复制链接

扫一扫