[CSS层叠样式表]

2022-04-04 06:20:29

[CSS层叠样式表]

CSS介绍

Cascading Style Sheet 层叠样式表，是专门用来为HTML标签添加样式的。

把HTML认为是网页的骨架
那么CSS就是用于对HTML骨架进行修饰,比如加背景色、显示方式、位置等等属性

CSS语法

一个完整的CSS样式需要具备两大部分：
# 1、选择器
# 2、声明
声明由属性和属性值组成，属性和属性值用冒号隔开，以分号结尾，如下图

[CSS层叠样式表]

CSS 四种引入方式：

1.行内式

? 行内式是在标签的style属性中设定CSS样式（一般不采用）

  <div style="color: green">行内式</div>

2.嵌入式

[[CSS层叠样式表]](javascript:void(0)??

? 嵌入式是将CSS样式集中写在网页的<head>标签的<style></style>标签对中。

<head>
    <style type="text/css">
        p{
            color: red
        }
    </style>
</head>

[[CSS层叠样式表]](javascript:void(0)??

3.导入式

[[CSS层叠样式表]](javascript:void(0)??

? 将一个独立的.css文件引入HTML文件中，导入式使用@import引入外部CSS文件，<style>标记也是写在<head>标记中。
? 导入式会在整个网页装载完后再装载CSS文件。

<head>
    ...
    <style type="text/css">
        @import "My.css"; 此处注意.css文件的路径
    </style>
</head>

[[CSS层叠样式表]](javascript:void(0)??

4.链接式

[[CSS层叠样式表]](javascript:void(0)??

? 将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。
? 链接式会以网页文件主体装载前装载CSS文件。

<head>
    ...
    <link href="My.css" rel="stylesheet" type="text/css">
</head>

[[CSS层叠样式表]](javascript:void(0)??

CSS选择器

1.基本选择器

id选择器

使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。
语法：#id名{样式}（id名不能以数字开头，不能是html的关键字）
#p2 {
    color: red;
}

类选择器

匹配所有class属性中包含info的元素。
语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）
标签中的class属性如果有多个，要用空格分隔
.ppp {
     color: green;
}

元素/标签选择器

匹配所有使用 div 标签的元素（可以匹配所有标签）
div {
    color: yellow
}

通用选择器

* 表示应用到所有的标签。
* {
  color: yellow
}

2.组合选择器

后代选择器

匹配所有div标签里嵌套的P标签，之间用空格分隔

[[CSS层叠样式表]](javascript:void(0)??

div p {
      color: red;
}

<div>
    <p>哈哈</p>
    <div>
         <p>嘿嘿</p>
    </div>
    <p>呵呵</p>
</div>

[[CSS层叠样式表]](javascript:void(0)??

子元素选择器

匹配所有div标签里嵌套的子P标签，之间用>分隔

[[CSS层叠样式表]](javascript:void(0)??

div>p {
      color: green;
}

<div>
    <p>哈哈</p>
    <p>呵呵</p>
</div>

[[CSS层叠样式表]](javascript:void(0)??

毗邻选择器

匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）
div+p {
      color: red;
}

<div>哈哈</div>
<p>嚯嚯</p>

通用兄弟选择器（弟弟选择器）

匹配所有div标签之后的同级标签p，之间用~分隔，无论有没有被隔开，都可以被选中，

[[CSS层叠样式表]](javascript:void(0)??

div~p {
      color: pink;
}

<div>哈哈</div>
<br>
<p>嚯嚯</p>
<p>嘿嘿</p>

[[CSS层叠样式表]](javascript:void(0)??

3.序列选择器

[CSS层叠样式表] 序列选择器

4.属性选择器

根据指定的属性名称找到对应的标签，然后设置属性
该选择器，最常用于input标签，属性选择器是以[ ]作为标志的

[[CSS层叠样式表]](javascript:void(0)??

 /*找到所有包含id属性的标签*/
[id] {
     color: red;
}

/*找到所有包含id属性的p标签*/
p[id] {
     font-size: 30px;
}

/*找到所有class属性值为part1的p标签*/
p[class="part1"] {
    color: green;
}

/*找到所有href属性值以https开头的a标签*/
a[href^="https"] {
    font-size: 50px;
}
    
/*找到所有src属性值以png结尾的img标签*/
img[src$="png"] {
    width: 100px;
}

/*找到所有class属性值中包含par的标签*/
[class*="par"] {
    text-decoration: line-through;
}

[[CSS层叠样式表]](javascript:void(0)??

[CSS层叠样式表] 示例

5.伪类选择器

link、visited、hover、active

  • a：link（未访问的链接状态）,用于定义了常规的链接状态。
  • a：visited（已访问过的链接状态）,可以看出已经访问过的链接。
  • a：hover（鼠标放在链接上的状态，悬浮态）,用于产生视觉效果。
  • a：active（在链接上按下鼠标不松开的状态，激活态）。

[[CSS层叠样式表]](javascript:void(0)??

a:link{color: red}  /*未访问前为红色*/
a:visited{color: green}  /*访问后为绿色*/
a:hover{color: pink}  /*悬浮在上面为粉色*/
a:active{color: yellow} /*按下不松手为黄色*/
 
 
<a href="https:www.jd.com">你好呀</a>

[[CSS层叠样式表]](javascript:void(0)??

以a标签为例，我们可以控制点击前、鼠标悬浮、鼠标点击、访问后的属性变化，如颜色变化：

[CSS层叠样式表] 伪类选择器

注意：hover是所有其他标签都可以使用的
focus只给input标签使用

[[CSS层叠样式表]](javascript:void(0)??

input{
       outline: none;  /*设置边框无轮廓*/
       color: #e606d5; /*设置input框输入的字体颜色*/
}
input:focus {
       color: aqua;  /*设置鼠标点击input框内字体显示效果*/
        /*点击边框背景为黄色*/
}

输入名字<input type="text">

[[CSS层叠样式表]](javascript:void(0)??

6.伪元素选择器

first-letter、before、after

  • first-letter 每个元素首字符添加样式

  • before 在每个元素的内容之前插入内容;

  • after 在每个元素的内容之后插入内容。

[[CSS层叠样式表]](javascript:void(0)??

p:first-letter {   /*将第一个字符改为100px大小*/
   font-size: 100px;
}

p:before {  /*在所有p标签的内容前面加上一个红色的！*/
   content: "！";
   color: red;
}
    
p:after {  /*在所有p标签的内容后面加上一个绿色？/
   content: "?";
   color: green;
}
 
<p> 哈哈 </p>　
<p> 嘿嘿 </p>　

[[CSS层叠样式表]](javascript:void(0)??

[CSS层叠样式表] 伪元素选择器

7.CSS的三大特性

  • 继承性

    • 继承性是指当子标签没有设置样式时，会继承父标签的样式。
    • 比如一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。

    　　可继承的属性比如有字体类属性（字体颜色、字体大小之类的）、文本类属性（行高之类的）、背景类属性（背景颜色之类的）（要注意子标签不会继承父标签的宽度、高度、边距属性。）

    ? 应用场景：通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式

       ps:打开浏览器审查元素可以看到一些inherited from。。。的属性

    [CSS层叠样式表] 继承性示例

  • 层叠性

    • 层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。
    • 比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色（明显的两种颜色设置不能并立，所以只为其一，这里没给出确定答案是因为还要考虑“优先级”）

    层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。

    注意：这里要注意只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会合并下来（包括那些允许设置多个值的属性也会合并，比如text-shadow。

    [CSS层叠样式表] 覆盖示例

  • 优先级

    • 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
      在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

      • 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的 样式会覆盖继承来的样式。

      • 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

      • 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

    • CSS定义了一个!important命令，!important其实是CSS的一种语法，定义在样式属性后面，代表这个属性不会被覆盖，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。即使行内样式离得近，最终生效的还是!important标注的属性
    • 优先级：!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

      总结优先级：

      1. 使用了 !important声明的规则。
      2. 内嵌在 HTML 元素的 style属性里面的声明。
      3. 使用了 ID 选择器的规则。
      4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
      5. 使用了元素选择器的规则。
      6. 只包含一个通用选择器的规则。
      7. 同一类选择器则遵循就近原则。
      8. 总结：权重是优先级的算法，层叠是优先级的表现

[CSS层叠样式表]

上一篇：aspnetcore 应用 接入Keycloak快速上手指南


下一篇：Visual Studio Code实时预览网页