CSS基础样式和选择器（学习笔记1）

极具浪漫主义色彩的菜鸟学习之路

已于 2022-04-07 14:01:42 修改

阅读量431

点赞数 1

分类专栏：前端学习文章标签： python 开发语言 html5

于 2022-04-02 17:15:11 首次发布

本文链接：https://blog.csdn.net/muweichang/article/details/123898380

版权

前端学习专栏收录该内容

20 篇文章 2 订阅

订阅专栏

每天浪漫主义

提示：来自哔哩哔哩博主被生活治愈的小人物
在这里插入图片描述

“窗外的世界和自由的风”-《三葉のテーマ》

计划：

一周把CSS复习一遍，并明确其含义并能够解释

层叠样式表

提示：层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术。

HTML用于定义内容的结构和语义
CSS用于设计风格和布局。

我们可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。
CSS是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则. 比如“我希望页面中的主标题是红色的大字”
我们可以这样写

<!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>
</head>
<style>
    h1 {
    color: red;
    font-size: 5em;
}
</style>
<body>
    <h1>Lorem ipsum dolor sit amet.</h1>

    
</body>
</html>

在这里插入图片描述

    h1 {
    color: red;
    font-size: 5em;
}

在大括号内部定义一个或多个形式为

属性(property):值(value);

的声明(declarations)。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

CSS样式的引入方式

内联样式

提示：在HTML元素中使用"style" 属性；
当特殊的样式需要应用到个别元素时，就可以使用内联样式。
使用内联样式的方法是在标签中使用样式属性，样式属性可以是任何 CSS 属性。其作用范围是在当前标签内，使用较少。

   <div style="color:blue;font-size:50px;">内联样式</div>

在这里插入图片描述

嵌套样式

提示：在HTML文档头部 <head> 区域使用<style> 元素来包含CSS代码；
当单个文件需要特别样式时，就可以使用嵌套样式。通过在<head> 部分定义<style>标签书写嵌套样式，在<style>标签中可以使用标签选择器，类选择器，id选择器等去给标签设置属性，如下图所示。
在这里插入图片描述

外联样式

提示：使用外部 CSS 文件。
当样式需要被应用到很多页面的时候，将会使用外联样式，通过更改一个文件来改变所以页面的样式。此时**我们需要在<head>标签中引入<link>标签，

<link rel="stylesheet" href="nav.css">

href中为需要引入的css文件，如下图所示。
在这里插入图片描述

选择器

提示：CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

标签选择器

提示：元素选择器或也称为类型选择器

元素 {样式声明 }

结构:标签名{CSS属性名:属性值;}

作用：通过标签名，找到页面中所有这类标签，设置样式
注意：

标签选择器选择的是一类标签，而不是单独某一个
标签选择器无论嵌套关系有多深，都能找到对应的标签

<!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>
        h1 {
            color: blue;
            background-color: yellow;
        }

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


<body>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, quaerat!</p>

</body>

</html>

在这里插入图片描述

类选择器

CSS类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。

.类名 {样式声明 }

[class~=类名] {样式声明 }

.类名{ css属性名:属性值;}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：

所有标签上都有class属性，class属性的属性值称为类名（类似于名字)
类名可以由数字、字母、下划线．中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<!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>
</head>
<style>
    .name{
        background-image:url(4.jpg);
        color: aqua;
        width: 500px;
        height: 800px;

    }

</style>
<body>
    <div class="name">Lorem ipsum dolor sit amet.</div>
    <p class="name">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    
</body>
</html>

在这里插入图片描述

ID 选择器

在一个HTML文档中,CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素,元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。
提示：在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。
首先，ID 选择器前面有一个 # 号，也称为棋盘号或#号。

#id属性值{ css属性名:属性值;}

作用:通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点:

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=dixdi, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one{
            color: azure;
            font-size: 5em;
        }
    </style>
</head>
<body>
    <div id="one">Lorem ipsum dolor sit amet consectetur.</div>
    <h1 id="one">Lorem ipsum dolor sit amet.</h1>
</body>
</html>

在这里插入图片描述

id选择器和类选择器的区别

大家点这里去了解id选择器和类选择器的区别

通配符选择器

结构:*{css属性名︰属性值;}

作用:找到页面中所有的标签，设置样式
注意点:

开发中使用极少，只会在极特殊情况下才会用到
在页面中可能会用于去除标签默认的margin和padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=dixdi, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
           color: cadetblue;
           font-size: 2em;
       }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur.</div>
    <h1>Lorem ipsum dolor sit amet.</h1>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=dixdi, initial-scale=1.0">
    <title>Document</title>
    <style>
     
       *.one{
           color: deeppink;
           font-size: 3em;

       }
       *#two{
           color: orangered;
       }
    </style>
</head>
<body>
    
    <p class="one">
        <span id="two">Lorem, ipsum dolor.</span> Lorem, ipsum dolor.
      </p>
      <p  id ="two">
        <span class="one">Lorem, ipsum dolor.</span>Lorem, ipsum dolor.
      </p>
</body>
</html>

在这里插入图片描述

选择器的列表

如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。

  <style>
        h1 {
            color: blue;
        }

        p {
            color: blue;
        }
    </style>

如果是相同样式的，我们就可以结合在一起，用逗号隔开

    <style>
        h1,p{
            color: blue;
        } 
    </style>

更规范的写法我们可以写成

        h1,
        p {
            color: blue;
        }

对于这篇学习笔记就暂时到这了，兄弟们加油❤️🤣😂😊😘💕😍😒

从现在做起，坚持下去，一天进步一小点，不久的将来，你会感谢曾经努力的你！

如果又出错的，请各位友友指正。

请添加图片描述

新人报到，各位友友们，给我个三联（点赞，关注，收藏）

极具浪漫主义色彩的菜鸟学习之路

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础样式和选择器（学习笔记1）

每天浪漫主义提示：来自哔哩哔哩博主被生活治愈的小人物 “窗外的世界和自由的风”-《三葉のテーマ》计划：一周把HTML和CSS复习一遍，并明确其含义并能够解释CSS学习层叠样式表CSS样式的引入方式内联样式嵌套样式外联样式选择器层叠样式表提示：层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术。HTML用于定义内容的结构和语义CSS
复制链接

扫一扫