CSS基础 样式和选择器(学习笔记1)

每天浪漫主义

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

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


计划:

  • 一周把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属性名:属性值;}

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

  1. 标签选择器选择的是一类标签,而不是单独某一个
  2. 标签选择器无论嵌套关系有多深,都能找到对应的标签
<!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属性值的标签,设置样式
注意点:

  1. 所有标签上都有id属性
  2. id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的
  3. 一个标签上只能有一个id属性值
  4. 一个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属性名︰属性值;}

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

  1. 开发中使用极少,只会在极特殊情况下才会用到
  2. 在页面中可能会用于去除标签默认的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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

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

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值