CSS入门必看

最新推荐文章于 2024-08-25 21:41:11 发布

Liuzhengyue_

最新推荐文章于 2024-08-25 21:41:11 发布

阅读量281

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/Liuzhengyue_/article/details/137434080

版权

什么是CSS？

层叠样式表CSS（Cascading Style Sheets）是一种用于描述文档样式和布局的样式表语言。它与HTML（Hypertext Markup Language）一起被广泛用于构建网页和Web应用程序。

书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。

主要作用：

1. 样式化网页：CSS用于控制网页的外观和布局，包括文字样式、颜色、大小、间距、边框、背景等。

2. 分离内容和样式：CSS的设计初衷是将文档内容与其表现样式分离，使得网页结构更清晰、易维护，并提高了网页加载速度。

3. 响应式设计：CSS可以根据不同设备的屏幕尺寸和分辨率来调整页面布局，实现响应式设计，提供更好的用户体验。

基本结构：

- 选择器：用于选择要样式化的HTML元素。

- 属性：用于定义元素的样式，如颜色、字体大小、边框等。

- 值：属性的具体取值，如`color: blue;`中的`blue`。

- 声明：属性和值的组合，如`color: blue;`。

组成：选择器{属性：属性值}

例子：

/* 选择器 */
h1 {
    color: blue;？/*颜色*/
    font-size: 24px;/*字号*/
/*通常属性和属性值是成对存在的，我们把它称之为键值对*/
}

/* 属性和值 */
color: blue;
font-size: 24px;

/* 声明 */
color: blue;

优势：

- 灵活性：CSS允许开发者精确控制页面的外观和布局，提供了丰富的样式选项。

- 可维护性：通过将样式与内容分离，使得修改样式更加方便，可以在不改变HTML结构的情况下改变页面外观。

- 性能优化：CSS文件可以被浏览器缓存，提高页面加载速度，减少带宽消耗。

总的来说，CSS是前端开发中不可或缺的一部分，它为网页设计提供了强大的样式控制能力，帮助开发者创建出美观、易读、响应式的网页。

CSS引入方式

1. 内部样式表（Internal Style Sheet）

在HTML文档的<head>标签内，可以使用<style>标签定义CSS样式，这样的样式仅适用于当前页面。

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>Hello, CSS!</h1>
</body>
</html>

2. 外部样式表（External Style Sheet）

将CSS样式单独存放在一个独立的.css文件中，然后在HTML文档中通过<link>标签引入外部样式表。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Hello, CSS!</h1>
</body>
</html>

/* styles.css */
h1 {
    color: blue;
    font-size: 24px;
}

3. 内联样式（Inline Style）

在HTML标签内使用style属性来定义元素的样式，这种方式会覆盖外部样式表和内部样式表的样式设置。

<!DOCTYPE html>
<html>
<body>
    <h1 style="color: blue; font-size: 24px;">Hello, CSS!</h1>
</body>
</html>

CSS 选择器

1.标签选择器

作用：使用标签作为选择器，选中同名标签设置相同样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: blue;
            /* 这时是将所有的p标签都设置成为一样的样式 */
        }

    </style>
</head>
<body>
  <p>文本2</p>
  <p>文本1</p>
</body>
</html>

2.类选择器

作用:查找标签，差异化设置标签的显示效果。

注意：一个类选择器可以给多个标签使用

步骤：

1.定义类选择器->.类名

2.使用类选择器->标签添加 class="类名"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 类名相同 */
        .blue {
            color: blue;
        }
        .size {
            font_size: 60px;
        }
    </style>
</head>
<body>
  <p class="blue">文本2</p>
  <!-- 现在就只有文本2显示蓝色 -->
  <p>文本1</p>
<!--一个标签使用使用多个类名，使用的时候用空格隔开-->
  <div class="blue size">可以变和文本2颜色一样吗</biv>
</body>
</html>

在类名命名的时候，我们要见名之意，多个单词可以用-连接

3.id选择器

1.定义选择器->#类名

2.使用类选择器->标签添加 id="类名"

且id唯一的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #red {
            color: rad;
            /* 这时是将标签类id="red"给为CSS中设置的样式 */
        }

    </style>
</head>
<body>
  <p id="red">文本2</p>
  <p>文本1</p>
</body>
</html>

4. 通配符选择器

通配符选择器*选择页面中的所有元素。

作用：它可以用来为所有元素设置通用样式。

* {
    margin: 0;
    padding: 0;
}

以上就是关于CSS布局的一些技巧，希望能够帮助大家更好地掌握前端开发中的布局问题。如果大家有什么疑问或者想要了解更多的内容，欢迎在评论区留言，我会尽快回复的哦！感谢大家的阅读，我们下期再见！

Liuzhengyue_

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS入门必看

层叠样式表CSS（Cascading Style Sheets）是一种用于描述文档样式和布局的样式表语言。它与HTML（Hypertext Markup Language）一起被广泛用于构建网页和Web应用程序。书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。主要作用1. 样式化网页：CSS用于控制网页的外观和布局，包括文字样式、颜色、大小、间距、边框、背景等。2. 分离内容和样式。
复制链接

扫一扫