CSS基础

cat饼

已于 2022-11-22 09:45:11 修改

阅读量72

点赞数

文章标签： css servlet

于 2022-09-13 18:42:36 首次发布

本文链接：https://blog.youkuaiyun.com/timessshh/article/details/126839034

版权

#博学谷IT学习技术支持##博学谷IT学习技术支持#

CSS概述

CSS 是一门语言，用于控制网页表现。 CSS也有一个专业的名字：Cascading Style Sheet（层叠样式表）。

如下面的代码：

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

在浏览器中的效果如下：

css 导入方式其实就是 css 代码和 html 代码的结合方式。

css的导入的三种方式：

1.内联样式：在标签内部使用style属性，属性值是css属性键值对

<div style="color: red">Hello CSS~</div>

弊端：但是这种方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性不好。

内部样式：定义style标签，在标签内部定义css样式外部样式：定义link标签，引入外部的css文件

编写一个css文件。名为：demo.css，内容如下:

div{
	color: red;
}

在html中引入 css 文件。

<link rel="stylesheet"  href="demo.css">

css 选择器

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

div {
	color:red;
}

CSS的三种选择器：元素选择器，ID选择器，类选择器

格式：

元素名称{color: red;}



#id属性值{color: red;}



.class属性值{color: red;}

演示代码如下：

<!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>