css从入门到精通实训基础内容整理

最新推荐文章于 2023-11-19 11:37:36 发布

尾迹双冒号

最新推荐文章于 2023-11-19 11:37:36 发布

阅读量324

点赞数 1

分类专栏： # web前端文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_51188461/article/details/120877552

版权

web前端专栏收录该内容

12 篇文章 2 订阅

订阅专栏

文章目录

引言
1.基础知识
2.基础选择器

引言

层叠样式表（Cascading Style Sheets， CSS）是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，由W3C定义和维护。在前端网页开发中，我们使用CSS来定义网页元素的样式，例如背景颜色、字体展示、元素位置、动画效果等等。所以，HTML 与 CSS 结合，将网页的内容与样式分离，有利于提高开发效率。基本的CSS语法如同积木一般，通过各种变换设计，构成了丰富多彩的网页世界。

1.基础知识

CSS语法主要包括两部分：选择器和声明。

选择器 {声明1}
{属性: 值;}

选择器用于指定我们要修改的HTML元素。
通过声明，我们定义要改变的元素样式。声明由属性和值构成。

CSS样式有三种引入方式：

内部样式表：在文档头部中引入；对于内部样式表，书写的方式是直接在HTML文件的头部，添加<style type="text/css"> </style>元素。

外部样式表：通过外部文件引入；将CSS单独书写在文件后缀名为.css的文件中。然后在HTML的<head>中添加CSS文件链接。

<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    /* 引入外部的CSS文件 */
    <link rel="stylesheet" href="style.css" />
  </head>

属性rel的值stylesheet代表样式表，通常不变。href属性值，代表文件的位置。与图像路径的链接方式类似，href属性值的书写方式要根据具体的CSS文件位置。

内联样式：直接在特定元素中引入。**内联样式是指直接在标签内添加样式属性。**举例如下：

<p style="color: Red; margin-left: 24px; font-size:20px;">内联样式CSS表格<p>

2.基础选择器

元素选择器
最常见和易理解的CSS选择器是元素选择器，又称为类型选择器。也就是将HTML文档中的元素，直接作为选择器使用。

例如对于HTML页面：

<body>
  <h1>标题1</h1>
  <h2>标题2</h2>
  <p>普通段落中<a href="#">删除的引用。</a></p>
</body>

使用元素选择器添加元素样式：

<style type="text/css">
    html {color:black;}
    h1 {color:darkcyan;}
    h2 {color:lightSeaGreen;}
    p {color:grey;}
    a {text-decoration:line-through;}
  </style>

显示效果如下：
在这里插入图片描述

当我们指定一个元素，并设置样式属性之后，文档中该元素便会应用样式。例如，我们设置p元素的颜色为灰色(grey)，在没有其他样式覆盖的情况下，文档中所有的p元素都将为灰色。

如果想要多种元素应用同一样式，可以直接使用组合元素选择器。将多个要应用样式的元素用逗号隔开，例如：

例如对于HTML页面：

<body>
    <h1>组合选择器</h1>
    <p>组合选择器，可以将样式同时运用于多个元素。</p>
</body>
</html>

使用元素选择器添加元素样式：

<style type="text/css">
/* 组合元素选择器 */
/*将`h1`、`p`元素的颜色同时设置为灰色*/
h1,p {color:grey;}
</style>

显示效果如下：在这里插入图片描述

注意：

多个元素之间的逗号是必不可少的，如果缺失了逗号将表示其他含义。
元素选择器语法
我们可以看出元素选择器的语法规则如下：

/*单个元素选择器*/
元素 {样式声明}
/*组合元素选择器*/
元素1，元素2 {样式声明}

类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式，而不考虑具体的元素时，会使用类选择器。
例如，对于HTML页面:

<body>
<div class="main">
  <article class="news">
    <h1>地震自救指南</h1>
    <p>大的晃动时间约为1分钟左右。这时首先应顾及的是您自己与家人的人身安全。首先，在重心较低、且结实牢固的桌子下面躲避，并紧紧抓牢桌子腿。在没有桌子等可供藏身的场合，无论如何，也要用坐垫等物保护好头部。</p>
  </article>
</div>
</body>

在该页面中，我们将第一个div元素的class设置为main，article元素的class值设置为news。通常设置class名字时，不要设置已有元素名，例如p、articel。

之后，添加页面样式:

<style type="text/css">
  .main {
    background-color: ivory;
    margin: 10px;
  }
  .news {
    padding: 10px;
    color: black;
    font-weight: bold;
  }
  p {
    color: grey;
  }
  </style>

与元素选择器不同，对同一类的元素应用样式，需要在类名前加上一个点号（.），然后书写相应的样式声明。

最后，样式应用的效果如图：
在这里插入图片描述

类选择器语法
所以，我们可以看出，类选择器的语法规则如下：首先，将html中想要应用类样式的元素，指定类名；
<元素名 class=“指定的类名”></元素名>
<元素名 class=“指定的类名”>
然后，书写相应类的样式；
.指定的类名 {样式声明}

id选择器
id选择器与我们上一关中学习的类选择器类似，但在使用上有不同。使用类选择器时，指定一个元素属于某类，使用的是关键字class，例如:

<body>
  <h1 class="important">温馨提示</h1>
  <p>少一串脚印，多一份绿意。</p>
</body>

而在使用id选择器时，使用的是关键字id。对于上面类选择器的例子，用id选择器书写：

<body>
  <h1 id="important">温馨提示</h1>
  <p>少一串脚印，多一份绿意。</p>
</body>

在样式表中，指定对应id名元素的样式，使用#符号，也称为棋盘号或井号。

#important {
    color: red;
    font-weight: bold;
}

样式应用效果如图：
在这里插入图片描述
id选择器语法
同理，我们可以看出，id选择器的语法规则如下：
首先，将html中想要应用类样式的元素，指定id名。
<元素名 id=“指定的类名”></元素名>
<元素名 id=“指定的类名”>
然后，书写相应类的样式。

#指定的类名 {样式声明}

类选择器与id选择器的区别:

它们最大的区别在于，在一个 HTML 文档中，可以为任意多个元素指定类，但id选择器只能使用一次，一个id只能运用于一个元素。一般情况下，都推荐使用类选择器。而在一些特定情况下，我们才会建议使用id选择器。例如，通过id选择器在页面中定义锚，在编写 JavaScript 为指定的页面元素应用特殊行为时。

表格样式，背景样式，文本与字体样式，css转换知识内容可以搜索，就不写了哈

尾迹双冒号

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css从入门到精通实训基础内容整理

文章目录引言1.基础知识2.基础选择器引言层叠样式表（Cascading Style Sheets， CSS）是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，由W3C定义和维护。在前端网页开发中，我们使用CSS来定义网页元素的样式，例如背景颜色、字体展示、元素位置、动画效果等等。所以，HTML 与 CSS 结合，将网页的内容与样式分离，有利于提高开发效率。基本的CSS语法如同积木一般，通过各种变换设计，构成了丰富多彩的网页世界。1.基础知识CSS语法主要包括两部分：选择器
复制链接

扫一扫