CSS选择器（2）

集选择器

给所有的选择器选中的标签设置属性。以","隔开,如下所示

 
   <style>
     /* 为 <h1> ~ <h4> 元素的文本内容设置相同颜色 */
     /* h1 {
       color: lightcoral;
     }
 ?
     h2 {
       color: lightcoral;
     }
 ?
     h3 {
       color: lightcoral;
     }
 ?
     h4 {
       color: lightcoral;
     }
     */
       
     /* 通过并集选择器进行改写 */
     h1,h2, h3, h4{
                 color: lightcoral;
         }
   </style>
 ?
 <body>
   <h1>标题一</h1>
   <h2>标题二</h2>
   <h3>标题三</h3>
   <h4>标题四</h4>
 </body>

效果：h1~h4颜色相同，可以用并集选择器集合起来

交集选择器

 <!DOCTYPE html>
 <html lang="en">
 ?
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>交集选择器</title>
   <style>
     p {
       color: lightcoral;
     }
 ?
     .cls {
       color: lightskyblue;
     }
 ?
     /* 交集选择器 */
     p.cls {
       color: magenta;
     }
   </style>
 </head>
 ?
 <body>
   <p>18级启嘉班</p>
   <p class="cls">19级启嘉班</p>
   <p>20级启嘉班</p>
   <div class="cls">启嘉网</div>
 </body>
 ?
 </html>

效果：交集改变了19级启嘉班的颜色

伪类选择器

CSS 伪类是向已有选择器添加关键字，改变元素的状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

写法：选择器：关键字

例子：

   <style>
       /*改变button的颜色*/
     button:hover {
       background-color: lightcoral;
     }
   </style>

效果：原本鼠标放上去是没有颜色的，现在鼠标放上去变成了红色、

说明：CSS允许在同一个选择器上同时编写多个伪类选择器。

伪类选择器按照用途分为以下5中类型：

动态伪类选择器:常与<a>元素配合使用，用来表示用户的某种行为状态。
目标伪类选择器:常与<a>元素配合使用，用来定位当前HTML页面中唯一一个目标元素。
元素状态伪类选择器:常与表单组件元素配合使用，用来表示表单组件的某种状态。
结构伪类选择器:常与<table> 元素配合使用，利用HTML元素之间的关系定位目标元素。
否定伪类选择器:用来定位与指定选择器不匹配的HTML元素。

否定伪类选择器

否定选择器用来定位不匹配某个选择器定位的HTML元素的元素

 写法：:not (某个选择器){
         属性：属性值
 }

例子：

 <style>
     .C {
       text-shadow: 2px 2px 3px rgb(240, 9, 98);/*文本阴影*/
     }
 ?
     p:not(.C) {
       color: green;
     }
 ?
     body :not(p) {
       text-decoration: underline;/*表示下划线*/
     }
   </style>
 </head>
 ?
 <body>
   <p>我是一个p标签。</p>
   <p class="C">我是带有class的p标签！</p>
   <div>我不是一个块标签。</div>
 </body>

效果：p:not(.c)是筛选不是p标签里有Class选择器的p标签,那就是第一个p标签,所以是绿色的，而.C不是绿色的。

伪元素选择器

CSS中伪元素选择器的用法与伪类选择器的用法类似，都是在指定CSS选择器增加关键字。但作用不同，伪类选择器是用来改变状态信息的，伪元素选择器是用来设定样式的。

写法：选择器::伪元素

例子：

 <style>
     .p1::first-line {
       color: lightcoral;
     }
 ?
     .p2 span {
       color: lightcoral;
     }
   </style>
 </head>
 ?
 <body>
   <p class="p1">家乡门前空院上植有一棵梨树。至今约莫三十个年头。万不是那声名显赫的名品，结的是青皮小个的酸梨。
 ?
 这梨即使熟透到掉落都难得有一丝丝的甜蜜，恰如这人生百味，甘之如饴是只应天上有的美好期盼。
 ?
 犹记年幼时候，每至初春，那皑皑白雪还没有全部退去，满树的花蕾迎着乍暖还寒的风便窜出头来，约莫两三个星期，满树梨花放，伴着那春阳和煦，梨树便时常没来由的飞花飘絮，如那仙女翩翩起舞的霓裳，美的张扬而放肆。</p>
   <p class="p2"><span>待过两个月满树都是那酸酸的青皮梨，父亲知我喜爱上树摘梨，时常忧心我的安危，便自制了一个专用的摘梨小网，放于瓦檐之下。</span> 
 即使小网上面布满尘埃，我也难得去用它，我就喜欢攀树而上，脚下感受着树枝有节奏的颤动。一手抓着树枝，一手摘得那繁叶不能遮挡的向阳方向的果子。因为向阳的那一面有一块红彤彤的皮，那是我认为勇敢者的勋章。
 母亲和奶奶站在树下，早已按捺不住心中的担忧，仰头看着我不断叮咛：“小心、小心……”此起彼伏。可又害怕声大吓着我，所以两个平时坦诚干净的农村妇人敛起了嗓门儿，有了难得一见的温柔。</p>
 </body>

效果：.p1::first-line的一直是一行，他会自动的把第一行的字加上颜色

before和after伪元素

添加一些修饰性的内容，写法::before 和 ::after

示例代码：

 <style>
         h1::before{
             color: brown;
             content: "?";
         }
         p::after{
             color: chartreuse;
             content: "?";
         }
         p{
             font-size: 30px;
         }
     </style>
 </head>
 <body>
     <h1>18级启嘉班</h1>
     <p>19级启嘉班</p>
 </body>

效果：如下 ::before在文本的前面添加修饰内容，::after在文本下面添加了修饰内容

下次更新HTML的颜色

叠样式表 (CSS) 是一种编程语言，可用于确定电子文档的设计。借助简单说明（以清晰的源代码形式呈现），可以根据需要调整布局、颜色和版式等网站元素。由于级联样式表，文档的语义结构和内容不受影响。 CSS 出现于 20 世纪 90 年代中期，现在被认为是万维网上的标准样式表语言。

什么是 CSS？

CSS 与 HTML 一样，是万维网的核心语言之一。当您使用 HTML 将文本添加到网站并按语义构建其结构时，您可以使用 CSS 定义其内容的设计。虽然 HTML 和 CSS 结合使用，但 CSS 设计指令和 HTML 元素是分开存在的。这意味着即使没有 CSS，机器也可以读取电子文档。在 CSS 的帮助下，浏览器内容可以在视觉上准备好并以吸引人的方式呈现。

CSS 是一种“生活标准”，由万维网联盟继续开发。因此，总是有新的功能和实际应用有待发现。广泛应用的样式表语言出现于 20 世纪 90 年代。使用样式表来显示 Web 内容的想法在当时已不再是全新的。但 CSS 与 HTML 中已存在的其他面向显示的元素在一个重要方面有所不同：用户现在可以选择为跨多个文档和单个样式表的元素组定义设计规则。

定义：CSS（层叠样式表）
用于网站视觉设计的编程语言。例如，使用层叠样式表，您可以确定显示 HTML 元素的字体、大小或颜色。

CSS 的优点和应用领域

一个成功的网站不仅取决于内容，还取决于良好的设计。用户很快就会对不用户友好或结构良好的网站失去兴趣。在这里，CSS 提供了一系列纯 HTML 中不提供的设计选项。

例如，CSS 允许您集中控制某些规范。这意味着可以使用单个命令来识别单个文档中的相似元素（例如所有超链接或图像）并对其进行格式化。设计指令不必采用 HTML 文档本身内部样式表的形式。如果将 CSS 指令保存在外部样式表（即单独的文件）中，则这也可以用于其他文档。

除了与 HTML 元素的颜色、形状和排版相关的基本显示指令外，CSS 中现在还有更复杂的模块。例如，使用这些，您可以根据输出媒体定义动画或不同的表示形式。这样，可以为所有可能的媒体以相同的方式准备相同的 HTML 文档。由于本文档中的内容和设计是分开的，因此网站的代码更加清晰。相关的样式语言 SASS 提供了更多的可能性，但它并没有完全取代 CSS。

CSS 语句的结构

CSS 语句确定电子文档中的元素应具有的值或属性。在其基本结构中，该指令由选择器和大括号组成。声明列在括号内，并用分号分隔。每个声明由名称、冒号和特定值组成。在最终声明之后和右括号之前，可以添加另一个分号，但这不是强制性的。例如，下面示例中的 CSS 指令要求标题 h1 以蓝色显示，字体大小为 12：

h1 {color:blue; font-size:12px}

如何将 CSS 集成到您的网站中？

可以使用内部和外部样式表将 CSS 合并到电子文档中。此外，可以使用内联样式将属性直接放置在元素的 HTML 源代码中。下面，我们概述了将 CSS 集成到 HTML 中的三种方法。

外部样式表

在外部样式表中，CSS 指令通过“.css”结尾在外部文件中定义，并通过“link”标签集成到 HTML 文件中。这是最常见的方法，因为内容和设计完全分开，并且可以轻松进行更改。该链接在 HTML 文档的“head”区域中创建，如下所示：

<!DOCTYPE html>
  <html>
  <head>
  <link rel="stylesheet" href="stylesheet.css">
    </head>
<body>
    <h1>这是一个标题</h1>
  <p>这是一个段落</p>
</body>
</html>

内部样式表

您可以在此处将所有 CSS 指令添加到 HTML 文件中。请注意，这些仅适用于相关文件。对于内部样式表，将“style”元素插入 HTML 文档的“head”区域，如下所示：

<!DOCTYPE html>
  <html>
  <head>
  <style>
  h1 {color:blue; font-size:12px;}</style></head>
  <body>
  <h1>这是一个标题</h1>
<p>这是一个段落</p>
  </body>
</html>

内联样式

与内部样式表一样，CSS 指令包含在 HTML 文件中。然而，有一个重要的区别：相应的属性直接位于元素的开始标记中，并且不适用于任何其他元素。如果您不想进行一般设计说明，则此方法特别有用。

<!DOCTYPE html>
  <html>
  <body>
  <h1 style="color:blue; font-size:12px;">这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>

CSS 和 HTML 的交互

上面的例子表明 CSS 只能与经典的 HTML 结构结合使用。由于 HTML 通过段落、列表和表格构建内容，而 CSS 负责视觉设计，因此这两种网络语言相辅相成，并以这种方式紧密相连。编写级联样式表通常围绕设计“盒子”进行。 HTML 文档的结构基于嵌套原则，其中各个元素像盒子一样相互叠放。网站上占用空间的每个“盒子”都具有以下属性：

padding：元素内容周围的空间
border：位于 padding 外部的线
margin：边框外的空间

然后通过指定大小、形状和颜色来格式化这些“框”。除了这些简单的属性之外，还有更复杂的 CSS 指令，用于在文本中插入阴影、添加图像过滤功能以及突出显示表单和其他元素。

一旦您了解了样式表语言的基本原理，它们的应用就足够简单了。了解有关 CSS 顶级技巧的更多信息，这些技巧将使您的网站看起来更加专业。

现效果：

HTML结构：

基础样式：此时只是一个白色的正方形。

利用伪类添加内置阴影效果:

代码

效果图

同理设置另外四个阴影，同时旋转45度角

代码

和上图重叠后效果：

效果

按钮hover之后，中间选择文字出现，颜色向边框处改变：

代码

效果图

主要使用了css中：

box-shadows：设置内阴影颜色

transition：设置颜色过渡动画

在线咨询

上一篇：Apache Tomcat如何高并发处理请求
下一篇：10款比较好用的网页设计工具

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商