Note-day3(2)

Day03 Css基础1

一、Css基础知识

什么是css?
——层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)。等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素
进行格式化。

层叠样式表 — 核心关键词

  • 样式表:负责美化
  • 层叠:样式不会被干掉而只会被覆盖
二、Css的使用方式

Css有三种使用方式。分别是在标签中使用Style属性、使用Style标签和建立一个.Css文件。

<!-- 使用css第一种方式  在标签中使用"style属性" -->
<!-- color:red ;改变字体颜色 -->
<h1 style="color:red;">Hello,World</h1>
<!-- css第二种使用方式 使用"style标签" -->
<style>
    /*css注释*/
    /*css选择器 */
    p {
        color: blue;
    }
</style>
<!--第三种方式直接建立css文件后直接在文件中写css语句 -->
三、Css选择器

Css有三种选择器,分别是html标签选择器,class选择器和id选择器。这三种选择器均有各自的优缺点,在编写代码时需综合情况合理选择适合的选择器。

三种选择器的语法如下所示:

<style>
/*html标签选择器 ,直接选择html标签,他可以作用于文件中所有相同的标签,也因为这个他不够精确。*/
    p {
        color: red;
    }

    h6 {
        color: blue;
    }

    /*id选择器,此时id名为d1,作用于唯一的id*/
    #d1 {
        color: green;
    }

    /*class选择器*/
    /*class可以重复使用,多个class之间用空格隔开,此时class名为e1。作用于相同class的标签*/
    .e1 {
        color: blue;
    }
</style>

当三种选择器发生冲突时,我们遵循的原则是:
谁更精确就听谁的

如:

<style>
/*谁更精确就听谁的*/
    div {
        color: blue;
    }

    #test {
        color: green;
    }

    .d1 {
        color: red;
    }
</style>

在html body内有一个p标签:

<body>
<p class="d1" id="test">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</p>
</body>

大家可以先预测一下之后运行代码核实一下。

四、通配符

通配符使用星号*表示,意思是“所有的”。他会选择页面中所有标签。

<style>
    * {
        /*通配符 选择网页中的所有标签*/
        color: red;
    }
</style>
五、div&Span标签

div和span都是无意义标签。

<div>标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素,以便通过 CSS来对这些元素进行格式化。主要是用来切割。

<span> 用于对文档中的行内元素进行组合。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。主要是针对于跨度。

通常用这两个标签来对网页进行模块划分。

<div>我是div标签</div>
<span>我是span标签</span>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值