前端 --- CSS

于 2024-05-01 18:25:56 发布
阅读量853 收藏 19
点赞数 17
分类专栏： 程序员 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84436058/article/details/138377304
版权
本文详细介绍了CSS的基础样式定义（如style属性、内部/外部样式表、选择器类型），包括后代选择器、子选择器、并集选择器和伪类选择器。还涵盖了字体、文本、背景、圆角矩形等元素属性，以及块级元素特性和React与Vue的区别。
摘要由CSDN通过智能技术生成

① 直接定义标记的 style 属性

你好 你好 你好

在这里插入图片描述

② 定义内部样式表

你好 你好 你好

在这里插入图片描述

③ 嵌入外部样式表

你好 你好 你好

1.css

p {

color: red;

font-size: 20px;

}

在这里插入图片描述

④ 链接外部样式表

你好 你好 你好

1.css

p {

color: red;

font-size: 20px;

}

在这里插入图片描述

2. 选择器的种类

=============================================================================

2.1 基础选择器

由单个选择器构成的

① 标签选择器

HTML

HTML

CSS
CSS

在这里插入图片描述

② 类选择器

HTML

HTML

CSS
CSS

在这里插入图片描述

③ id 选择器

HTML

HTML

在这里插入图片描述

④ 通配符选择器

使用 * 的定义, 选取所有的标签

HTML

HTML

CSS
CSS

在这里插入图片描述

2.2 复合选择器

① 后代选择器

又叫包含选择器. 选择某个父元素中的某个子元素.

元素1 元素2 {样式声明}

  • 元素 1 和 元素 2 要使用空格分割
  • 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
代码示例1
    • 你好!
    • 你好!
    • 你好!

    • 在这里插入图片描述

      代码示例2
      • 你好!
      • 你好!
      • 你好!

      • 在这里插入图片描述

        代码示例3
        • 你好!
        • 你好!
        • 你好!

        • 在这里插入图片描述

          ② 子选择器

          和后代选择器类似, 但是只能选择子标签.

          元素1>元素2 { 样式声明 }

          • 使用大于号分割
          • 只选亲儿子, 不选孙子元素
          代码示例1

          不好

          • 你好
          • 你好

          • 在这里插入图片描述

            ③ 并集选择器

            用于选择多组标签.

            元素1, 元素2 { 样式声明 }

            • 通过 逗号 分割等多个元素.
            • 表示同时选中元素 1 和 元素 2
            • 任何基础选择器都可以使用并集选择器.
            • 并集选择器建议竖着写. 每个选择器占一行.
            代码示例1
            苹果

            香蕉

            • 鸭梨
            • 橙子

            • 在这里插入图片描述

              代码示例2
              苹果

              香蕉

              • 鸭梨
              • 橙子

              • 在这里插入图片描述

                ④ 伪类选择器

                1) 链接伪类选择器

                | 标记 | 描述 |

                | :-- | :-- |

                | a:link | 选择未被访问过的链接 |

                | a:visited | 选择已经被访问过的链接 |

                | a:hover | 选择鼠标指针悬停上的链接 |

                | a:active | 选择活动链接(鼠标按下了但是未弹起) |

                你好

                在这里插入图片描述

                2) :focus 伪类选择器

                选取获取焦点的 input 表单元素.

                这里此时被选中的表单的字体就会变成红色

                在这里插入图片描述

                3. 常用元素属性

                =============================================================================

                3.1 字体属性

                ① 字体设置 font-family

                注: 字体的名称可以用中文,但是不建议.

                你好 你好 你好

                在这里插入图片描述

                ② 字体大小 font-size

                你好 你好 你好

                不好 不好 不好

                在这里插入图片描述

                ③ 字体粗细 font-weight

                | 值 | 描述 |

                | :-- | :-- |

                | normal | 默认值。定义标准的字符。 |

                | bold | 定义粗体字符。 |

                | bolder | 定义更粗的字符。 |

                | lighter | 定义更细的字符。 |

                | 100,200,300,400,500,

                600,700,800,900 | 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |

                你好 你好 你好

                不好 不好 不好

                在这里插入图片描述

                ④ 字体样式 font-style

                | 值 | 描述 |

                | :-- | :-- |

                | normal | 默认值。浏览器显示一个标准的字体样式。 |

                | italic | 浏览器会显示一个斜体的字体样式。 |

                | oblique | 浏览器会显示一个倾斜的字体样式。 |

                你好 你好 你好

                不好 不好 不好

                在这里插入图片描述

                3.2 文本属性

                ① 文本颜色 color

                color 属性值的写法:

                • 颜色的单词

                • #+ 8位16进制的形式

                • RGB方式

                你好 你好 你好
                你好 你好 你好
                你好 你好 你好

                在这里插入图片描述

                ② 文本对齐 test-align

                | 值 | 描述 |

                | :-- | :-- |

                | left | 把文本排列到左边。默认值：由浏览器决定。 |

                | right | 把文本排列到右边。 |

                | center | 把文本排列到中间。 |

                | justify | 实现两端对齐文本效果。 |

                你好 你好 你好
                你好 你好 你好
                你好 你好 你好

                在这里插入图片描述

                ③ 文本装饰 text-decoration

                | 值 | 描述 |

                | :-- | :-- |

                | none | 默认。定义标准的文本。 |

                | underline | 定义文本下的一条线。 |

                | overline | 定义文本上的一条线。 |

                | line-through | 定义穿过文本下的一条线。 |

                你好 你好 你好

                你好 你好 你好

                你好 你好 你好

                你你你你你好好好好好

                在这里插入图片描述

                ④ 文本缩进 text-indent

                输入的属性值可以是长度单位,可以是百分比单位

                注: 要是想要首行缩进2格,可以为2em

                你好 你好 你好

                你好 你好 你好

                在这里插入图片描述

                ⑤ 行距 line-height

                | 值 | 描述 |

                | :-- | :-- |

                | normal | 默认。设置合理的行间距。 |

                | number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |

                | length | 设置固定的行间距。 |

                | % | 基于当前字体尺寸的百分比行间距。 |

                你好
                你好
                你好

                你好
                你好
                你好

                在这里插入图片描述

                3.3 背景属性

                ① 背景颜色 background-color

                你好
                你好
                你好

                在这里插入图片描述

                ② 背景图片 background-image:url()

                在这里插入图片描述

                ③ 背景平铺 background-repeat

                | 值 | 描述 |

                | :-- | :-- |

                | repeat | 默认。背景图像将在垂直方向和水平方向重复。 |

                | repeat-x | 背景图像将在水平方向重复。 |

                | repeat-y | 背景图像将在垂直方向重复。 |

                | no-repeat | 背景图像将仅显示一次。 |

                你好
                你好
                你好
                你好

                在这里插入图片描述

                ④ 背景位置 background-position: x y

                | 值 | 描述 |

                | :-- | :-- |

                | top left

                top center

                top right

                center left

                center center

                center right

                bottom left

                bottom center

                bottom right | 如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。 |

                | x% y% | 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。 |

                | xpos ypos         | 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。 |

                你好
                你好
                你好
                你好

                在这里插入图片描述

                ⑤ 背景尺寸 background-size

                属性值:length|percentage|cover|contain

                你好
                你好
                你好
                你好

                在这里插入图片描述

                3.4 圆角矩形

                基本用法

                border-radius: length;

                length表示内切圆的半径,length越大,弧度越大

                示例1

                哈喽

                在这里插入图片描述

                生成圆形

                让 border-radius 的值为正方形宽度的一半即可

                哈喽

                在这里插入图片描述

                生成圆角矩形

                让 border-radius 的值为矩形高度的一半即可

                哈喽

                在这里插入图片描述

                展开写法

                border-radius 是一个复合写法. 实际上可以针对四个角分别设置.

                border-radius:2em;

                等价于

                border-top-left-radius:2em;

                border-top-right-radius:2em;

                border-bottom-right-radius:2em;

                border-bottom-left-radius:2em;

                border-radius: 10px 20px 30px 40px;

                等价于

                border-top-left-radius:10px;

                border-top-right-radius:20px;

                border-bottom-right-radius:30px;

                border-bottom-left-radius:40px;

                注: CSS 中顺序一般都是按照顺时间顺序的.

                4. 元素的显示模式

                ==============================================================================

                4.1 块级元素

                常见的元素: h1~h6 p div ul ol li …

                特点

                react和vue的比较

                相同
                1）vitual dom
                2）组件化
                3）props，单一数据流

                不同点
                1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
                2）状态管理（react）
                3）对象属性（vue）
                4）vue：view——medol之间双向绑定
                5）vue：组件之间的通信（props，callback，emit）

                开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

                .csdnimg.cn/abd9bd677d80496e940787256fa93fad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd3d6enp6enp6enp6enp6,size_17,color_FFFFFF,t_70,g_se,x_16)

                生成圆角矩形

                让 border-radius 的值为矩形高度的一半即可

                哈喽

                在这里插入图片描述

                展开写法

                border-radius 是一个复合写法. 实际上可以针对四个角分别设置.

                border-radius:2em;

                等价于

                border-top-left-radius:2em;

                border-top-right-radius:2em;

                border-bottom-right-radius:2em;

                border-bottom-left-radius:2em;

                border-radius: 10px 20px 30px 40px;

                等价于

                border-top-left-radius:10px;

                border-top-right-radius:20px;

                border-bottom-right-radius:30px;

                border-bottom-left-radius:40px;

                注: CSS 中顺序一般都是按照顺时间顺序的.

                4. 元素的显示模式

                ==============================================================================

                4.1 块级元素

                常见的元素: h1~h6 p div ul ol li …

                特点

                react和vue的比较

                相同
                1）vitual dom
                2）组件化
                3）props，单一数据流

                不同点
                1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
                2）状态管理（react）
                3）对象属性（vue）
                4）vue：view——medol之间双向绑定
                5）vue：组件之间的通信（props，callback，emit）

                开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

                [外链图片转存中…(img-B5cge0JQ-1714559143875)]

              2401_84436058
              关注
              专栏目录
              评论
              添加红包

              请填写红包祝福语或标题

              个

              红包个数最小为10个

              元

              红包金额最低5元

              当前余额3.43元 前往充值 >
              需支付：10.00元
              成就一亿技术人!
              领取后你会自动成为博主和红包主的粉丝 规则
              hope_wisdom
              发出的红包
              实付元
              使用余额支付
              点击重新获取
              扫码支付
              钱包余额 0

              抵扣说明：

              1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
              2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              余额充值