JavaWeb—CSS

咕咕猫_

已于 2022-06-25 14:28:32 修改

阅读量336

点赞数

分类专栏：笔记 JavaWeb 文章标签： css web

于 2022-06-25 11:19:18 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_61843013/article/details/125456528

版权

笔记同时被 2 个专栏收录

111 篇文章

订阅专栏

JavaWeb

13 篇文章

订阅专栏

一、什么是CSS

CSS是一门语言，用于控制网页表现
CSS（Cascading Style Sheet）：层叠样式表

1.1 使用案例

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

代码呈现结果如下

二、CSS导入方式

CSS导入HTML有三种方式

1. 内联样式：在标签内部使用style属性，属性值是css属性键值对
<div style="color: red">Hello CSS~</div>

2. 内部样式：定义<style>标签，在标签内部定义css样式
    <style>
        div{
            color: pink;
        }
    </style>

3. 外部样式：定义link标签，引入外部的css文件
<link href="../css/demo.css" rel="stylesheet">
外部文件demo.css ：

2.1 使用案例

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

    <div style="color: pink">hello,css</div>

    <span>hello,css2</span>

    <p>hello,css3</p>

</body>
</html>

三、CSS选择器

概念：选择器是选取需设置样式的元素(标签)

分类：

1. 元素选择器

2. id选择器

3. 类选择器

3.1 使用案例

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

        #name{
            color: blue;
        }
        .cls{
            color: green;
        }
    </style>

</head>
<body>

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

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

</body>
</html>