CSS笔记(一)

最新推荐文章于 2024-07-11 17:28:05 发布

韩轩eve

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量101

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/Hanjiexuan/article/details/118394360

版权

一：css的引入方式
1，内联样式
在标签中通过style属性来控制样式，只能印象一行

<h1 style="color: red ; font-size: 32px" >hanjie</h1>

2，内部样式
在head标签中通过style标签来控制样式，只能影响当前文件

	<style>
        div{
            color: red;
        }
    </style>

3，外部样式

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

二：css选择器
1，一个HTML文件中会存在很多个元素，如果相对不同的元素添加不同的样式，需要使用到选择器
2，基本选择器
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
        .cls{
            color: blue;
        }
        #d1{
            color: green;
        }
        #d2{
            color: pink;
        }
    </style>
</head>
<body>
<div>hanjie</div>
<div class="cls">hanjie1</div>
<div class="cls">hanjie2</div>
<div id="d1">hanjie3</div>
<div id="d2">hanjie4</div>
</body>
</html>

3，属性选择器
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        intput[type]{
            color:red
        }
        intput[type=password]{
            color: blue;
        }
        div[class=han] {
            color: pink;
        }
    </style>
</head>
<body>
用户名：<input type="text"><br>
密码：<input type="password"><br>
邮箱：<input type="email"><br>
<div class="han">
	属性
</div>
</body>
</html>

4，伪类选择器
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
        }
        a:link{
            color: black;
        }
        a:visited{
            color: blue;
        }
        a:hover{
            color: red;
        }
        a:active{
            color: yellow;
        }
    </style>
</head>
<body>
<a href="https://baidu.com/">百度</a>
</body>
</html>

5，组合选择器
在这里插入图片描述

韩轩eve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS笔记(一)

一：css的引入方式1，内联样式在标签中通过style属性来控制样式，只能印象一行<h1 style="color: red ; font-size: 32px" >hanjie</h1>2，内部样式在head标签中通过style标签来控制样式，只能影响当前文件 <style> div{ color: red; } </style>3，外部样式 <link rel=
复制链接

扫一扫