Web前端-CSS

作者：菜鸟追梦旅行 | 2024-03-23 13:06:00

踩

Web前端-CSS

HTML 是页面的骨，CSS 就是页面的样式，就是皮，就是描述了任意一个网页的元素：大小、字体、颜色、背景、边框。

每一个 CSS 包含两个部分：选择器+应用的属性键值：

这里就是键值对结构，p 就是选择器，大括号里面就是键值对结构，每个键值对就对应一个 CSS 的属性。CSS 代码可以放到 HTML 当中（通常是放在 style 当中），然后 style 标签可以放到 HTML 中的任意位置。


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

span标签

<span>标签是一个无语义的标签。

CSS 的引入方式

行内样式：写在标签的styel属性中


<body>
    <p style="color: brown">
        hello world
    </p>
</body>

内部样式表，通过 style 标签来写 CSS(可以写在文件的任何位置，通常写在head标签中)


<head>
<style>
        p {
            color: red;
        }
    </style>
</head>

外联样式：写在一个单独的.css文件中(需要通过link标签在网页中引入)


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <p>
        hello world
    </p>
</body>

css选择器

css选择器是用来选取需要设置样式的标签

优先级：id选择器>类选择器>标签选择器

1.标签选择器：将所有标签p的内容全部修改

2.id选择器：先给被选中的元素，设定一个 id 属性。id 在一个页面中，不能重复，因此 id 选择器只能选中一个元素，不能选中多个。

3.类选择器：可以随心选中多个元素，将多个内容纳入同一个类中，通过类名来指定样式。

4.通配符选择器：就是 * 直接选中了页面上的所有元素，最大的用途就是取消浏览器的默认样式。不同的浏览器，默认样式不一样，所以前端开发的时候，就要取消默认样式。

通过调试工具来查看CSS属性

我这里通过 edge 浏览器来演示，打开调试模式：

按 F12，或者 Fn+F12
右键鼠标，检查

查看属性

调试模式里面选中元素，就可以查看对应的属性了：

盒子模型

HTML页面中的元素（标签）可以看成是一个盒子，由盒子中的元素包含在矩形中，通过盒子的视角进行页面布局。

组成：内容区域(content)，内边距区域(padding)，边框区域(border)，外边框区域(margin)

CSS属性：

元素的显示模式

元素的显示模式有很多：块级元素，行内元素，行内块元素。

块级元素（独占一行，可以设置宽度和高度）【div，h1-h6，p，ul，li，table】
行内元素（不独占一行，不能设置宽度和高度）【span，a，em，i…】
行内块元素（相当于是一个杂交种：不独占一行，但是能设置高度和宽度）【input，img…】
上面都是标签的默认的显示模式，也就是说可以通过 CSS 的 display 属性来修改元素的显示模式。常见的用法就是把行内元素改成块级元素。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/295322