CSS学习

SY_XLR

已于 2023-01-25 22:47:40 修改

阅读量245

点赞数 2

分类专栏：前端笔记文章标签： css 学习 html

于 2023-01-25 22:38:30 首次发布

本文链接：https://blog.csdn.net/m0_61465701/article/details/128763106

版权

笔记同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

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

CSS导入方式

css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：

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

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

给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。

2.内部样式：定义<style>标签，在标签内部定义css样式

<style type="text/css">
	div{
		color: red;
    }
</style>

这种方式可以做到在该页面中复用。

3.外部样式：定义link标签，引入外部的css文件。编写一个css文件。名为：demo.css，内容如下:

div{
	color: red;
}

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

这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 link 标签引入该css文件。

样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        span{
            color: aqua;
        }
    </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>

demo.css:

p{
    color: blanchedalmond;
}

CSS选择器

CSS选择器就是选取需设置样式的元素（标签）

元素选择器

格式：

元素名称{color: red;}

例子：

div {color:red}

id选择器

格式：

#id属性值{color: red;}

例子：

html代码如下：

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

css代码如下：

#name{color: red;

类选择器

格式：

.class属性值{color: red;}

例子：

html代码如下：

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

css代码如下：

.cls{color: red;}

样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*元素选择器*/
        div{
            color: brown;
        }

        /*id选择器*/
        #name{
            color: red;
        }
        /*选择范围小的生效*/

        /*类选择器，可以选择多个*/
        .cls{
            color: chartreuse;
        }

    </style>
</head>
<body>

<div>div1</div>
<div id="name">div2</div>
<div class="cls">div3</div>

<span class="cls">span</span>

</body>
</html>