前端学习笔记CSS

布卡奇本人

已于 2023-05-23 18:24:03 修改

阅读量92

点赞数

文章标签： css 前端学习

于 2023-05-22 10:29:44 首次发布

本文链接：https://blog.csdn.net/weixin_44864714/article/details/130755488

版权

给HTML中的标签设置样式

内嵌式：写在style标签中

外联式：把css写在单独文件中，用link连接

一、基础选择器

1.1 标签选择器

1.2 类选择器

1.3 id选择器

1.4 通配符选择器

二、字体和文本

2.1 字体

大小：font-size 数字+px

粗细：font-weight normal / bold(加粗)

倾斜：font-style normal / italic

字体：font-family 字体名字（如果字体名称中存在多个单词，推荐使用引号包裹）

2.2 文本

缩进：text-indent 数字+px / 数字+em（字符）

对齐：text-align left / center / right

修饰：text-decoration underline（下划线）、line-through（删除线）、overline（上划线）、none（无装饰线）

行高：line-height 数字+px / 倍数控制上下间距

文字颜色：color

背景颜色：background-color

margin: 0 auto用于div的居中

删除线：

2.3 颜色

二、选择器进阶

2.1 后代选择题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p{
            color:red;
        }
       
    </style>
</head>
<body>
    <p>p标签</p>
    <div>
        <p>p子标签</p> # 这个标签会变红
    </div>
   
    
</body>
</html>

2.2 子代选择器

注：只选择子代，孙子代不选择

2.3 并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,p{
            color: red;
        }
       
    </style>
</head>
<body>
    <p>p标签</p>   # red
    <div>div标签</div>   #red
     
</body>
</html>

2.4 交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.box{
            color: red;
        }
       
    </style>
</head>
<body>
    # 要找到既是p标签，又具有box选择器
    <p class="box">p标签</p>   # red
         
</body>
</html>