首页 > 其他分享 >CSS

CSS

时间：2024-02-22 20:35:16浏览次数：24  
标签：color 元素 指定 选择器 CSS 属性

CSS

（1）介绍

  • 在 HTML 中，标签（Tag）是用于定义文档结构和内容的元素，而 CSS（Cascading Style Sheets，层叠样式表）则用于控制网页的样式和布局。CSS 样式表中可以通过选择器（Selectors）来选择 HTML 中的标签，并为其应用样式。

  • 在 HTML 中，标签（Tag）是用于定义文档结构和内容的元素，而 CSS（Cascading Style Sheets，层叠样式表）则用于控制网页的样式和布局。CSS 样式表中可以通过选择器（Selectors）来选择 HTML 中的标签，并为其应用样式。

  • 以下是一些常见的 HTML 标签和它们在 CSS 中的应用方式：

  1. 标签： <div> 是 HTML 中最常用的容器标签之一，用于组织页面内容。在 CSS 中，可以通过类名或 ID 来选择 <div> 标签，并为其定义样式，例如：

    <div class="container">内容</div>

    .container {
    background-color: #f0f0f0;
    padding: 20px;
    border: 1px solid #ccc;
}

  2. <p> 标签： <p> 用于定义段落。可以为 <p> 标签定义字体样式、边距、颜色等属性，例如：

    <p>这是一个段落。</p>

    p {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}

  3. <h1>-<h6> 标签： 用于定义标题。可以为不同级别的标题定义不同的样式，例如：

    <h1>主标题</h1>
<h2>副标题</h2>

    h1 {
    font-size: 24px;
    color: #000;
}

h2 {
    font-size: 20px;
    color: #333;
}

  4. <a> 标签： <a> 用于创建超链接。可以为超链接定义文字颜色、鼠标悬停效果等样式，例如：

    <a href="https://www.example.com">链接文字</a>

    a {
    color: #00f;
    text-decoration: none; /* 取消下划线 */
}

a:hover {
    color: #f00; /* 鼠标悬停时改变颜色 */
}

以上是一些常见的 HTML 标签及其在 CSS 中的应用方式。通过选择器和样式规则，可以对 HTML 中的各种标签进行样式化，从而实现网页的美化和布局。

（2）组合选择器

  • 组合选择器是 CSS 中一种强大的选择器，它允许你选择同时满足多个条件的元素，从而更精确地定位目标元素。常见的组合选择器有以下几种：
  1. 后代选择器（Descendant Selector）：

后代选择器使用空格分隔不同元素，表示选取某个元素的后代元素。例如：

div p {
  /* 选择 <div> 元素内部的所有 <p> 元素 */
  color: blue;
}
  1. 子代选择器（Child Selector）：

子代选择器使用 > 符号，表示选取某个元素的直接子元素。例如：

ul > li {
  /* 选择 <ul> 元素下直接的 <li> 元素 */
  list-style-type: square;
}
  1. 相邻兄弟选择器（Adjacent Sibling Selector）：

相邻兄弟选择器使用 + 符号，表示选取紧接在另一个元素后的同级元素。例如：

h2 + p {
  /* 选择紧接在 <h2> 元素后的同级 <p> 元素 */
  font-weight: bold;
}
  1. 通用兄弟选择器（General Sibling Selector）：

通用兄弟选择器使用 ~ 符号，表示选取与指定元素同级的所有元素。例如：

h2 ~ p {
  /* 选择 <h2> 元素后所有同级的 <p> 元素 */
  color: green;
}

这些组合选择器可以根据元素之间的关系、位置等条件来选择目标元素，使得 CSS 的选择更加灵活和精确。

（3）属性选择器

  • 属性选择器是 CSS 中一种用于选择具有特定属性的元素的选择器。它允许你根据元素的属性值来选择目标元素，从而更精确地应用样式。常见的属性选择器有以下几种：
  1. 存在选择器（Existence Selector）：

存在选择器使用方括号（[]）表示，选择具有指定属性的元素。例如：

input[type] {
  /* 选择所有具有 type 属性的 <input> 元素 */
  border: 1px solid #ccc;
}
  1. 等值选择器（Equality Selector）：

等值选择器使用方括号和等号（[attr=value]）表示，选择具有指定属性值的元素。例如：

a[href="https://www.baidu.com"] {
  /* 选择 href 属性值为 https://www.baidu.com 的所有 <a> 元素 */
  color: blue;
}
  1. 包含选择器（Containment Selector）：

包含选择器使用方括号和星号（[attr*=value]）表示，选择属性值包含指定字符串的元素。例如：

img[alt*="logo"] {
  /* 选择 alt 属性值中包含 "logo" 的所有 <img> 元素 */
  width: 100px;
}
  1. 起始选择器（Beginning Selector）：

起始选择器使用方括号和插入符号（[attr^=value]）表示，选择属性值以指定字符串开头的元素。例如：

a[href^="https://"] {
  /* 选择 href 属性值以 "https://" 开头的所有 <a> 元素 */
  text-decoration: none;
}
  1. 结尾选择器（Ending Selector）：

结尾选择器使用方括号和美元符号（[attr$=value]）表示，选择属性值以指定字符串结尾的元素。例如：

a[href$=".pdf"] {
  /* 选择 href 属性值以 ".pdf" 结尾的所有 <a> 元素 */
  font-weight: bold;
}
  1. 精确值选择器（Exact Value Selector）：

精确值选择器使用方括号和等号（[attr=value]）表示，选择属性值与指定字符串完全相同的元素。例如：

input[type="checkbox"] {
  /* 选择 type 属性值为 "checkbox" 的所有 <input> 元素 */
  margin-right: 5px;
}

这些属性选择器可以根据元素的属性及其值来选择目标元素，使得 CSS 的选择更加灵活和精确。

（4）伪类选择器

（1）介绍

  • CSS 伪类选择器（pseudo-class selector）是用于选择元素的特定状态或位置的一种方式。伪类选择器以冒号 : 开头，放置在选择器的末尾，用于为满足特定条件的元素应用样式。

  • CSS 伪类选择器（pseudo-class selector）是用于选择元素的特定状态或位置的一种方式。伪类选择器以冒号 : 开头，放置在选择器的末尾，用于为满足特定条件的元素应用样式。

（2）常见的伪类选择器

  1. :hover：选择鼠标悬停在元素上的状态。

    a:hover {
    color: red;
}

  2. :active：选择元素被点击的瞬间。

    button:active {
    background-color: #ccc;
}

  3. :focus：选择当前拥有焦点的元素，比如表单元素。

    input:focus {
    border: 2px solid blue;
}

  4. :first-child：选择元素是其父元素的第一个子元素。

    li:first-child {
    font-weight: bold;
}

  5. :last-child：选择元素是其父元素的最后一个子元素。

    li:last-child {
    color: green;
}

  6. :nth-child(n)：选择其父元素的第 n 个子元素。

    p:nth-child(2) {
    background-color: #f0f0f0;
}

  7. :nth-child(odd) 和 :nth-child(even)：选择其父元素的奇数或偶数个子元素。

    tr:nth-child(odd) {
    background-color: #f0f0f0;
}

  8. :not(selector)：选择不匹配给定选择器的元素。

    input:not([type="text"]) {
    opacity: 0.7;
}

  9. :nth-of-type(n)：选择同类型元素中的第 n 个。

    p:nth-of-type(2) {
    color: blue;
}

  10. :last-of-type：选择同类型元素中的最后一个。

    div:last-of-type {
    border: 1px solid black;
}

（5）伪元素选择器

  • CSS 伪元素选择器（pseudo-element selector）用于选择元素的某些特定部分，而不是整个元素。伪元素选择器以双冒号 :: 开头，放置在选择器的末尾。

  1. ::before：用于在元素之前插入内容。

    p::before {
    content: "前缀：";
}

  2. ::after：用于在元素之后插入内容。

    p::after {
    content: "后缀。";
}

  3. ::first-line：选择元素的第一行文本。

    p::first-line {
    font-weight: bold;
}

  4. ::first-letter：选择元素的第一个字母。

    p::first-letter {
    font-size: 150%;
}

  5. ::selection：选择用户选择的文本。

    ::selection {
    background-color: yellow;
    color: black;
}

  6. ::placeholder：选择输入框中的占位符文本。

    input::placeholder {
    color: gray;
}

  7. ::marker：选择列表项的标记。

    li::marker {
    color: red;
}

  8. ::backdrop：选择背景层，用于全屏操作时覆盖元素。

    ::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

  9. ::before 和 ::after 结合使用：用于创建元素的双倍内容。

    p::before {
    content: "前缀：";
}
p::after {
    content: "后缀。";
}

（6）选择器优先级

  • 在 CSS 中，如果多个规则选择同一个元素，并且应用了不同的样式，则会根据选择器的优先级来确定最终应用的样式。选择器的优先级是由选择器的特定性（specificity）来决定的。

  • CSS 选择器的优先级通常按照以下顺序排列，以决定样式的优先级：

  1. 内联样式（Inline Styles）：直接在 HTML 元素中使用 style 属性设置的样式，拥有最高的优先级。例如：

    <p style="color: red;">这是内联样式的文本</p>

  2. ID 选择器（ID Selectors）：使用 # 符号指定的 ID 选择器。例如：

    #unique-element {
    color: blue;
}

  3. 类选择器、属性选择器和伪类选择器 ：使用 .class、[attribute] 或者 :pseudo-class 格式指定的选择器。例如：

    .highlight {
    background-color: yellow;
}

[type="text"] {
    border: 1px solid gray;
}

a:hover {
    text-decoration: underline;
}

  4. 元素选择器和伪元素选择器 ：使用元素名或者 ::pseudo-element 格式指定的选择器。例如：

    p {
    font-size: 16px;
}

p::first-line {
    font-weight: bold;
}

  • 当多个规则应用于同一个元素时，浏览器会比较这些规则的优先级，并选择具有最高优先级的样式应用到元素上。如果优先级相同，则后定义的样式将覆盖先前的样式。

  • 优先级可以用一个简单的公式来表示：[ a, b, c, d ]

    • a 表示内联样式的数目。

    • b 表示 ID 选择器的数目。

    • c 表示类选择器、属性选择器和伪类选择器的数目。

    • d 表示元素选择器和伪元素选择器的数目。

  • 因此，选择器的特定性可以用一个四位数的数组来表示。例如，特定性为 [0, 1, 2, 3] 的选择器优先级将高于特定性为 [0, 1, 1, 3] 的选择器。

（7）css属性相关

CSS 属性是用于描述元素样式和行为的一组键值对。通过 CSS 属性，我们可以控制元素的外观、布局、动画和交互效果等。以下是一些常见的 CSS 属性类别和示例：

（1）字体和文本样式属性

  • font-family：指定文本字体。
  • font-size：指定文本字号。
  • font-weight：指定文本粗细。
  • font-style：指定文本样式（normal、italic、oblique）。
  • color：指定文本颜色。
  • text-align：指定文本对齐方式。
  • text-decoration：指定文本装饰效果（underline、overline、line-through）。

（2）盒模型属性

  • width：指定元素宽度。
  • height：指定元素高度。
  • margin：指定外边距。
  • padding：指定内边距。
  • border：指定边框。
  • display：指定元素的显示方式（block、inline、inline-block、flex）。

（3）背景和边框属性

  • background-color：指定背景颜色。
  • background-image：指定背景图像。
  • border-color：指定边框颜色。
  • border-radius：指定边框圆角半径。
  • box-shadow：指定盒子阴影效果。

（4）定位和布局属性

  • position：指定元素定位方式（static、relative、absolute、fixed）。
  • top、right、bottom、left：指定定位元素的偏移量。
  • float：指定元素浮动方式（left、right、none）。
  • clear：指定元素在浮动元素旁边的哪一侧不允许浮动。
  • display：指定元素的显示方式（none、block、inline）。

（5）动画和过渡属性

  • animation：指定元素动画效果。
  • transition：指定元素过渡效果。
  • transform：指定元素变形效果（旋转、缩放、平移）。

（6）其他常见属性

  • opacity：指定元素不透明度。
  • cursor：指定鼠标悬停在元素上时的光标样式。
  • z-index：指定元素的堆叠顺序。
  • overflow：指定元素溢出内容的处理方式（hidden、scroll、auto）。

（8）z-index模态框

  • 在 CSS 中，z-index 属性用于控制元素在堆叠顺序（stacking order）中的位置。当多个元素重叠时，z-index 属性可以确定哪个元素位于其他元素的前面或后面。

  • 要创建一个具有模态框效果的元素，可以使用 position: fixed 来使其固定在页面上，并通过设置适当的 z-index 值确保其显示在其他内容的前面。

  • HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 按钮触发模态框 -->
<button id="openModalBtn">打开模态框</button>
<!-- 模态框 -->
<div id="modal" class="modal">
    <div class="modal-content">
        <!-- 关闭按钮 -->
        <span class="close">&times;</span>
        <!-- 模态框内容 -->
        <p>这是一个模态框！</p>
    </div>
</div>
<!-- 模态框背景遮罩 -->
<div id="overlay" class="overlay"></div>
<script src="script.js"></script>
</body>
</html>
  • CSS (styles.css)
/* 模态框容器 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000; /* 确保模态框位于其他内容的前面 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.1); /* 半透明黑色背景 */
}

/* 模态框内容 */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* 关闭按钮 */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* 背景遮罩 */
.overlay {
  display: none;
  position: fixed;
  z-index: 999; /* 确保背景遮罩位于其他内容的前面，但低于模态框 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */
}
  • JavaScript (script.js)
// 获取模态框和背景遮罩元素
var modal = document.getElementById('modal');
var overlay = document.getElementById('overlay');

// 获取打开模态框的按钮
var btn = document.getElementById("openModalBtn");

// 获取关闭模态框的 <span> 元素
var span = document.getElementsByClassName("close")[0];

// 点击按钮打开模态框
btn.onclick = function() {
  modal.style.display = "block";
  overlay.style.display = "block";
}

// 点击 <span> (x) 关闭模态框
span.onclick = function() {
  modal.style.display = "none";
  overlay.style.display = "none";
}

// 点击模态框外的任意位置关闭模态框
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    overlay.style.display = "none";
  }
}

在这个示例中，模态框元素 modal 使用了 position: fixed 来固定在页面上，并且设置了较高的 z-index 值以确保其显示在其他内容的前面。另外，overlay 也是一个固定定位的元素，用来实现模态框弹出时的背景遮罩效果。

标签：color,元素,指定,选择器,CSS,属性
From： https://www.cnblogs.com/ssrheart/p/18028096

相关文章

  • CSS Border Bottom常用属性详解
    原文链接：https://www.python100.com/html/90865.html一、border-bottom的基本使用border-bottom:单位边框样式颜色;border-bottom是css中用来设置底部边框的属性。border-bottom的属性值包括三个，分别是：边框宽度（单位），边框样式（solid、dotted、dashed等）和边框颜色（十六进制......
  • 使用css实现四个边框切角
    [CSS语法]clip-pathclip-path表示剪裁路径，也就是从某个物体上剪切一块内容。比如在图片上根据需要剪切一部分需要留下的区域。这里涉及到两个概念:裁剪路径clippingpath，裁剪区域clippingregion。裁剪路径就是用来裁剪元素的路径，标记了需要裁剪的区域。可以是任意形状。裁剪......
  • html四边形的的框怎么编写,html知识点之利用css四边形切角并且加上边框
    前言这几个月做了很多前端工作，其中一个需求还是蛮头疼，UI给的图上面的四边形是一个带斜边的，直接用背景图可以实现，但是会出现各种布局的问题，比如内容太大了，边框不会跟着扩大，废话不多说，这里写一些如何利用css话四边形带有斜边，并且给斜边加边框，在这之前，先简单说一下需要用到的函数li......
  • Css中的display属性linline-block(行内区块元素)的详解和应用
    原文链接：https://www.cnblogs.com/lijinwen/p/5679864.html说inline-block(行内区块元素)之前，先说下他另外的2个兄弟display:inline;内联元素，简单来说就是在同一行显示。他没有高度，给内联元素设置width和height是没效果的。display:block;块级元素，简单来说就是就是有换行，会换......
  • 马上就要元宵节了，这里给大家用css端上一碗汤圆
    「更多福利资讯查看：2024首次大厂挑战」。`....`.bowl_wrap{width:200px;height:220px;margin:100pxauto;position:relative;}先画一个碗，这个碗呢我是分3个部分组合起来的，在一个圆的上半部分放一个椭圆，下面放一个div，都是通过border-radius进......
  • css新特性—过渡
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <style> div{ width:100px; height:100px; background-color:pink; /*谁做过渡给谁加*/ /*trasision：变化的属性花费的......
  • scss 中公共变量的导出方法:export
    scss中公共变量的导出方法:export：https://blog.csdn.net/ww_5211314/article/details/109614511?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170848176116800180690474%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=170......
  • ReadableStream/TransformStream/HMR/软件设计哲学/SSR 条件渲染/CSS.escape/Copilot
    ReadableStream，TransformStream-探索如何在React服务器组件中使用流来提升性能和用户体验。HMR-简介热模块替换技术，使前端开发更加高效。软件设计哲学-深入理解软件设计背后的哲学思考。SSR条件渲染组件-SSR条件渲染的实现方法，优化页面加载速度和SEO。C......
  • css 文字垂直居中
    方法一：使用flex布局<style>.container{display:flex;align-items:center;height:100px;}</style><divclass="container"><span>要居中的文本</span></div>方法二：使用定位和transform可以通过将......
  • bs4 css选择器
    数据准备html_doc="""<html><head><title>TheDormouse'sstory</title></head><body><pid="my_p"class="title"><bid="bbb"class="boldest">TheDormou......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99