CSS介绍和通用选择器

最新推荐文章于 2024-04-10 00:11:18 发布

richeneen莳姼

最新推荐文章于 2024-04-10 00:11:18 发布

阅读量589

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_53027472/article/details/125873866

版权

1.什么是CSS？

CSS(Cascading Style Sheets)层叠样式表，是一个用于修饰文档（可以是标记语言HTML,也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。

HTML和CSS之间的关系？

   HTML是网页内容的载体。内容就是网页制作者放在页面中想要让用户浏览的信息，可以包含文字、图片、视频等。
  CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

通过CSS来修改样式有什么好处?
不用记忆哪些属性属于哪个标签
当需求变更时我们不需要修改大量的代码就可以满足需求
在前端开发中css只有一个作用，就是用来修改样式

css的特点

继承性：指给父元素设置一些属性，子元素也可以使用，这个我们成为继承性
层叠性：层叠性就是CSS处理冲突的一种能力，层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性
优先级：当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

2.CSS引入方式

内联样式（行内样式）

缺点：样式与结构冗余
优点：优先级最高

<!-- 行内样式 -->
<div style="background-color: rgb(237, 237, 161);">我是一个div</div>

内部样式表

在head标签中写入style标签，将标签的样式写入style标签中。
缺点：样式复用率低
优点：样式与结构分离

<!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{
     
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>