web前端开发CSS01(css概述、css语法、三种css样式、选择器、css三大机制)

1、CSS概述

CSS ( Cascading Style Sheets,层叠样式表 ),是一种用来为结构化文档( 如 HTML 文档或 XML 应用 )添加样式( 字体、间 距和颜色等 )的计算机语言,CSS 文件扩展名为 .css

通过使用 CSS 我们可以大大提升网页开发的工作效率。

CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于 HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

  • CSS 指层叠样式表 (Cascading Style Sheets);
  • 样式定义如何显示 HTML 元素;
  • 样式通常存储在样式表中;
  • 把样式添加到 HTML 中,是为了解决内容与表现分离的问题;
  • 外部样式表可以极大提高工作效率;
  • 外部样式表通常存储在 CSS 文件中;
  • 多个样式定义可层叠为一个;

2、CSS引入规则

2.1 CSS语法

CSS规则由两个主要的部分构成:选择器[核心],以及一条或多条声明[规则]:

在这里插入图片描述

**选择器通常是您需要改变样式的 HTML 元素(**我们可以通过各种选择器灵性的选择页面的各种元素)。

每条样式声明由一个属性[样式属性]和一个值[样式值]组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号(;)结束,声明总以大括号({})括起来。

为了让CSS可读性更强,你可以每行只描述一个属性;

2.2 三种CSS样式引入规则

插入样式表的方法有三种:

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)
2.2.1 内联样式

行内样式(内联样式)引入规则:样式写在标签的style属性中

行内样式的语法规则:

<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;..."> 内容 </标记名>

该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内样式。其中属性和值的书写规范与CSS样式 规则相同,行内式只对其所在的标记及嵌套在其中的子标记起作用(部分样式)。

行内式也是通过标记的属性来控制样式的,由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法。只有在样式规则较少且只在该元素上使用一次,或者需要临时修改某个样式规则时使用。

2.2.2 内部样式表

内嵌[内部]样式引入规则:样式放在head或body标签的style标签中:

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表;

内嵌样式的语法规则

<head>
     <style type="text/css">
         选择器 {
             属性1: 属性值1;
             属性2: 属性值2;
             属性3: 属性值3;
             ....
         }
     </style>
</head>

该语法中,<style>标记一般位于<head>标记中的<title>标记之后,也可以把它放在HTML文档的任何地方。但是由于浏览器是从上到下解析代码的,把CSS代码放在head便于提前被下载和解析,以避免网页内容下载后没有样式修饰带来的尴尬。

同时最好设置type的属性值为“text/css“,这样浏览器才知道 <style>标记包含的是CSS代码,因为<style>标记还可以包含其他代码,如JavaScript代码

内嵌式CSS样式只对其所在的HTML页面有效,因此,仅设计一个页面时,使用内嵌式是个不错的选择。但如果在一个网站,不建议使用这中方式,因为它不能充分发挥CSS代码的重用优势。

2.2.3 外部样式表

外部样式[链入式]引入规则;一个单独的样式文件,存放我们的样式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link/>标记将外部样式表文件链接到HTML文 档中。

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在(文档的)头部;

链入式的语法规则:

<head>
     <like href="CSS文件的路径" type="text/css" rel="stylesheet"/>
</head>

该语法中,<link/>标记需要放在<head>头部标记中,并且必须指定<link/>标记的三个属性。如下:

  • href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
  • type:定义所链接文档的类型,在这里需要制定为”text/css“,表示链接的外部文件为CSS样式表。
  • rel:定义当前文档与被链接文档之间的关系,在这里需要指定为”stylesheet“,表示被链接的文档是一个样式表文件。
2.2.4 样式引入优先级

(内联样式)Inline style > (内部样式)Internal style sheet =(外部样式)External style sheet > 浏览器默认样式

内部样式和外部样式都是通过选择器来选择元素的,所以他们的优先级和文件顺序、选择器优先级有关;

注意:如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

2.2.5 CSS注释

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。

CSS注释以/*开始,以*/结束。

/* 这是注释 */

3、基本选择器

3.1 元素选择器

元素选择器根据元素名称来选择HTML元素。

实例:

<style>
p{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}
</style>

3.2 id选择器

id 选择器根据元素的 id 属性来选择特定的 HTML 元素。

元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!

要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id 。

实例:

<style>
#btn{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}
</style>

3.3 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。

实例:

<style>
.btn{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}
</style>

也可以指定只有特定的HTML元素会受类的影响。

实例:

<style>
p.btn{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}
</style>

HTML元素也可以引用多个类。

实例:

<p class="btn small">引用两个类</p>

3.4 通用选择器

通用选择器(*)选择页面上的所有的 HTML 元素。

<style>
    *{
        margin:0;
        padding:0;
    }
</style>

3.5 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

实例:元素选择器p、类选择器btn和id选择器btn拥有相同的样式

<style>
p{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}

.btn{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}

 #btn{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}
    
</style>

可以复用同一段代码,以减少代码重复率:

请用逗号隔开

<style>
p,.btn,#btn{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}
</style>

4、组合选择符

CSS 组合选择符包括各种简单选择符的组合方式,说明了两个选择器之间的关系。

在 CSS3 中包含了四种组合方式:

  • 后代选择器(以空格 分隔)
  • 子元素选择器(以大于号 > 分隔)
  • 普通兄弟选择器(以加号 ~ 分隔)
  • 相邻兄弟选择器(以波浪号 + 分隔)

4.1 后代选择器

后代选择器用于选取某元素的后代元素。

实例:

<style>
div p{
            color: chartreuse;
     }
</style>

<body>
    <div>
        <p>我是一级子元素和后代元素</p>
        <section>
            <p>我是后代元素</p>
        </section>
    </div>
</body>    

效果:

在这里插入图片描述

4.2 子元素选择器

与后代选择器相比,子元素选择器只能选择作为某元素直接/一级子元素的元素。

实例:

<style>
    div>p{
            color: pink;
        }
</style>

效果:

在这里插入图片描述

4.3 后续兄弟选择器

后续兄弟选择器选取指定元素之后的所有相邻兄弟元素。

实例:

<style>
    p~span{
            background-color: skyblue;
        }
</style>
<body>
    <div>
        <p>我是元素</p>
        <span>我是p元素的相邻兄弟及普通兄弟</span><br>
        <span>我是普通兄弟</span><br>
        <span>我是普通兄弟</span>
    </div>
    <section>
        <span>我才不是他们的兄弟</span>
    </section>
</body>

效果:

在这里插入图片描述

4.4 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素。

实例:

<style>
    p+span{
            background-color: hotpink;
        }
</style>

效果:

在这里插入图片描述

5、属性选择器

我们可以设置带有特定属性或属性值的HTML元素的样式。

5.1 [attribute]选择器

实例:

<style>
    a[target]{
            background-color: pink;
        }
</style>
<body>
    <a href="#" target="_parent">哈哈</a><br>
    <a href="#" target="_blank">嘿嘿</a><br>
    <a href="#" target="_self">哇哇</a>
</body>

效果:

在这里插入图片描述

5.2 [attribute=“value”]选择器

实例:

<style>
    a[target="_blank"]{
            background-color: skyblue;
        }
</style>

效果:

在这里插入图片描述

6、CSS三大机制

**CSS的三大机制是:特殊性[冲突]、继承、层叠。**样式最终的呈现由层叠机制决定,但层叠与特殊性、继承又有关系。换句话说,一个元素某一样式要应用那个值,用户代理需要考虑继承,考虑声明的特殊性,考虑声明本身的来源,而这个过程就叫做层叠。

6.1 特殊性

所谓的特殊性,其实是CSS样式一种计算声明权重的规则。特殊性是由规则的选择器确定的,然后用户代理会将计算出来的特殊性 附加给相应的每一个声明上。

如何计算/比较选择器的特殊性:

选择器类型:

  1. ID #id

  2. class  .class

  3. 标签 p

  4. 通用  *

  5. 属性  [type=“text”]

  6. 伪类  :hover

  7. 伪元素  ::first-line

  8. 子选择器、相邻选择器

权重计算规则:

第一等:代表内联样式,如: style=””,权值为1000。

第二等:代表ID选择器,如:#content,权值为0100。

第三等:代表类,伪类和属性选择器,如.content,权值为0010。

第四等:代表元素选择器和伪元素选择器,如div p,权值为0001。

通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

继承的样式没有权值

注意:!important,权值为10000

⭐重要性!important:

有时某些声明可能非常重要超过了其他所有生命。这时就可以在声明的结束分号之前插入! important来标志。

<style>
P {
color ; red !important;
background: yellow;
}
</style>

6.2 继承

CSS还有一个继承机制,即样式不仅会应用到指定的样式,而且会应用到其后代的元素。

继承的机制需要注意的点:

并不是所有的属性都可以继承,一般的,大多数框模型属性(包括外边距、内边距、背景、边框)都不能继承。

6.3 层叠

文档中的一个元素可能同时被多个css选择器选中,每个选择器都有一些css规则,这就是层叠;

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值