CSS学习笔记01

CSS笔记01

什么是CSS

  • CSS（Cascading Style Sheets ）：层叠样式表，也可以叫做级联样式表，是一种用来表现 HTML 或 XML 等文件样式的计算机语言。
  • 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动……

在这里插入图片描述

CSS发展史

  • CSS1.0：定义了网页的基本属性（文字、颜色、位置和文本属性等）。
  • CSS2.0：内容（HTML）和表现（CSS）分离；div + CSS；使网页变得更简单，且利于SEO（搜索引擎优化）
  • CSS2.1：浮动、定位
  • CSS3.0：圆角、阴影、动画…… 浏览器兼容性问题~

快速入门

  • 项目结构：

在这里插入图片描述

  • 基本语法入门：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><!-- style标签: 可以编写CSS代码，每一个声明语句都最好使用分号结尾语法:选择器 {声明1;声明2;声明3;}--><style>h1 {color: red;}</style></head>
<body><h1>我是标题</h1></body>
</html>
  • 网页效果：

在这里插入图片描述

  • 在实际使用中，通常我们建议使用 HTML 与 CSS 分离的结构，即：把 HTML 代码中style标签内的 CSS 代码单独放在一个.css文件中，再在 HTML 代码中使用link标签引用该.css文件。
  • 例如以上代码就可以改写成这样两个文件：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><!-- 使用link标签引用.css文件 --><link rel="stylesheet" href="css/style.css"></head>
<body><h1>我是标题</h1></body>
</html>

style.css

h1 {color: red;
}
  • 项目结构：

在这里插入图片描述

  • 网页效果：

在这里插入图片描述

  • 这两种方式实现的网页效果是一样的。

CSS的优势

  • 内容和表现分离
  • 网页结构表现统一，可以实现复用
  • 样式十分丰富
  • 利用 SEO，容易被搜索引擎收录

CSS的导入方式

  • CSS 的三种常用导入方式：
    • 行内样式
    • 内部样式
    • 外部样式
  • 如果在.html文件中同时出现了三种 CSS 导入方式，那么它们会查漏补缺，也就是说程序会把没有的效果自动加上去，已有的效果才会按照它们各自的优先级大小进行选择。
  • 优先级：行内样式 > 内部样式 > 外部样式
  • 注意：若一个.html文件中同时导入了内部样式与外部样式，并且它们都修饰同一属性，那么最终网页实现的是谁的样式取决于style标签和link标签在.html文件的head标签中的先后顺序。由于代码是从上向下执行的，后面的代码会把前面的代码覆盖， 因此，网页最终实现的是写在后面的 CSS 样式，该规则也叫作就近原则，即谁离要修饰的标签更近就实现谁的样式。
  • 示例：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><!-- 内部样式 --><style>h1 {color: green;}</style><!-- 外部样式 --><link rel="stylesheet" href="css/style.css"></head>
<body><!-- 行内样式: 在标签元素中，编写一个style属性，编写样式即可 (不推荐使用) -->
<h1 style="color: red">我是标题</h1></body>
</html>

style.css

/* 外部样式 */
h1 {color: yellow;
}
  • 查看网页效果：

在这里插入图片描述

  • 此时网页实现的是我们定义的行内样式（它离我们要修饰的h1标签最近）。
  • 我们删除h1标签中的行内样式：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><!-- 内部样式 --><style>h1 {color: green;}</style><!-- 外部样式 --><link rel="stylesheet" href="css/style.css"></head>
<body><h1>我是标题</h1></body>
</html>

style.css

/* 外部样式 */
h1 {color: yellow;
}
  • 查看网页效果：

在这里插入图片描述

  • 由于在.html文件中，我们的link标签写在style标签之后（link标签离我们要修饰的h1标签更近），所以此时网页实现的是我们定义的外部样式。
  • 我们再调换一下style标签与link标签在.html文件中的顺序：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><!-- 外部样式 --><link rel="stylesheet" href="css/style.css"><!-- 内部样式 --><style>h1 {color: green;}</style></head>
<body><h1>我是标题</h1></body>
</html>

style.css

/* 外部样式 */
h1 {color: yellow;
}
  • 查看网页效果：

在这里插入图片描述

  • 由于在.html文件中，我们的style标签写在link标签之后（style标签离我们要修饰的h1标签更近），所以此时网页实现的是我们定义的内部样式。

拓展：外部样式的两种写法

  • 链接式（推荐使用）：
<!-- 链接式 -->
<link rel="stylesheet" href="css/style.css">
  • 导入式：
<!-- 导入式 -->
<style>@import url("css/style.css");
</style>
  • 区别：
    • link属于 HTML 标签，但@import 是 CSS 提供的一种方式。link标签不仅可以加载 CSS，还可以定义 RSS、定义 rel 连接属性等；但是@import 只能加载 CSS。
    • 兼容性的差别。@import是 CSS2.1 提出的，所以在此之前的旧浏览器不支持，即@import只能在 IE5 以上才能被识别；但是link标签不存上述的问题。
    • 在使用 JS 控制 DOM 去改变样式的时候，只能用link标签，不能使用@import指令。原因是 DOM 不可控的。

选择器

  • 作用：定位，选择页面上的某一个或者某一类元素。

基本选择器

  • 基本选择器包括以下三种：

    • 标签选择器：选择一种标签。它在代码中的格式如下：
    标签名 {声明1;声明2;声明3;
}
    • 类选择器：选择所有class属性一致的标签，可以实现跨标签选择。它在代码中的格式如下：
    .class的名称 {声明1;声明2;声明3;
}
    • id选择器：选择指定id的标签，全局唯一。它在代码中的格式如下：
    #id名称 {声明1;声明2;声明3;
}

标签选择器

  • 示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签选择器</title><style>/* 标签选择器，会选择到页面上所有这个标签的元素格式: 标签名 {声明1;声明2;声明3;}*/h1 {color: red; /* 字体颜色 */background: skyblue; /* 背景色 */border-radius: 24px; /* 圆角边框 */}p {font-size: 80px; /* 字体大小 */}</style></head>
<body><h1>我在学习Java</h1>
<h1>我在学习HTML</h1>
<p>我在学习CSS</p></body>
</html>
  • 网页效果：

在这里插入图片描述

类选择器

  • 示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器</title><style>/* 类选择器格式:.class的名称 {声明1;声明2;声明3;}优点: 可以给多个标签归类(同一个class)，可以复用*/.study {color: orange;}.rest {color: lightgreen;}</style></head>
<body><h1 class="study">我在学习Java</h1>
<h1 class="rest">我在休息</h1>
<h1 class="study">我在学习HTML</h1>
<p class="study">我在学习CSS</p></body>
</html>
  • 网页效果：

在这里插入图片描述

id选择器

  • 示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id选择器</title><style>/* id选择器: id必须保证全局唯一格式:#id名称 {声明1;声明2;声明3;}*/#java {color: red;}#html {color: #34b1e5;}</style>
</head>
<body><h1 id="java">我在学习Java</h1>
<h1 id="html">我在学习HTML</h1>
<h1 id="css">我在学习CSS</h1>
<h1 id="js">我在学习JS</h1></body>
</html>
  • 网页效果：

在这里插入图片描述

测试三种基本选择器的优先级

  • 我们先测试标签选择器和类选择器的优先级大小：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id选择器</title><style>.study {color: blue;}h1 {color: green;}</style>
</head>
<body><h1 class="study">我在学习Java</h1>
<h1 class="study">我在学习HTML</h1>
<h1>我在学习CSS</h1>
<h1>我在学习JS</h1></body>
</html>
  • 查看网页效果：

在这里插入图片描述

  • 得出结论：类选择器 > 标签选择器，不遵循就近原则。
  • 我们再测试类选择器和id选择器的优先级大小：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id选择器</title><style>#java {color: red;}.study {color: blue;}h1 {color: green;}</style>
</head>
<body><h1 class="study" id="java">我在学习Java</h1>
<h1 class="study">我在学习HTML</h1>
<h1>我在学习CSS</h1>
<h1>我在学习JS</h1></body>
</html>
  • 查看网页效果：

在这里插入图片描述

  • 得出结论：id选择器 > 类选择器，不遵循就近原则。
  • 总结：基本选择器的优先级是固定的，不遵循就近原则，id选择器 > 类选择器 > 标签选择器。

层次选择器

  • 层次选择器：通过 HTML 的 DOM 元素之间的层次关系获取元素，其主要的层次关系包括后代，父子，相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。
  • 后代选择器，选择M元素内部所有的后代N元素 --> 曾爷爷 【爷爷 父亲 你】。它的格式如下：
元素M 元素N {声明1;声明2;声明3;
}
  • 子代选择器，选择M元素内部所有的第1级子代N元素 --> 曾爷爷 【爷爷】 父亲 你。它的格式如下：
元素M > 元素N {声明1;声明2;声明3;
}
  • 相邻兄弟选择器，选择M元素相邻的下一个元素（M、N是同级元素）–> 大爷 【二大爷】 三大爷 四大爷 父亲 你。它的格式如下：
元素M + 元素N {声明1;声明2;声明3;
}
  • 通用兄弟选择器，选择M元素后所有的同级N元素（M、N是同级元素）–> 大爷 【二大爷 三大爷 四大爷】 父亲 你。它的格式如下：
元素M ~ 元素N {声明1;声明2;声明3;
}
  • 准备工作：
  • 我们先根据下图的元素层次来写一个 HTML 页面：

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p>p1</p><p>p2</p><p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li></ul></body>
</html>
  • 查看网页效果：

在这里插入图片描述

  • 准备工作完成，接下来我们就可以正式开始层次选择器部分的学习了：

后代选择器

  • 使用后代选择器，选择元素body的所有后代元素p：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><style>/* 后代选择器 */body p {background: skyblue;}</style><body><p>p1</p><p>p2</p><p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li></ul></body>
</html>
  • 查看网页效果：

在这里插入图片描述

子代选择器

  • 使用子代选择器，选择元素body的所有子代元素p：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><style>/* 子代选择器 */body > p {background: yellow;}</style><body><p>p1</p><p>p2</p><p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li></ul></body>
</html>
  • 查看网页效果：

在这里插入图片描述

相邻兄弟选择器

  • 使用相邻兄弟选择器，选择id=active的元素p（p1）的相邻的下一个元素p：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><style>/* 后代选择器 *//*body p {*//*    background: skyblue;*//*}*//* 子代选择器 *//*body>p {*//*    background: yellow;*//*}*//* 相邻兄弟选择器 */#active + p {background: brown;}</style><body><p>p0</p><p id="active">p1</p><p>p2</p><p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li></ul></body>
</html>
  • 查看网页效果：

在这里插入图片描述

通用兄弟选择器

  • 使用通用兄弟选择器，选择id=active的元素p（p1）之后的所有同级元素p：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><style>/* 后代选择器 *//*body p {*//*    background: skyblue;*//*}*//* 子代选择器 *//*body>p {*//*    background: yellow;*//*}*//* 相邻兄弟选择器 *//*#active + p {*//*    background: brown;*//*}*//* 通用兄弟选择器 */#active ~ p {background: green;}</style><body><p>p0</p><p id="active">p1</p><p>p2</p><p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li></ul>
</body>
</html>
  • 查看网页效果：

在这里插入图片描述

结构伪类选择器

什么是伪类

  • 伪类：

    • 伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
    • 伪类就是开头为冒号的关键字，例如:hover，:first-child等。

  • 我们本节先学习伪类选择器中和结构相关的选择器，即结构伪类选择器。

  • 准备工作：

  • 下面是一个 HTML 页面的元素层次图：

在这里插入图片描述

  • 我们根据上面的层次图来写一个 HTML 页面：

indedx.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul></body>
</html>
  • 查看网页效果：

在这里插入图片描述

  • 准备工作完成，接下来我们就可以正式开始结构伪类选择器部分的学习了：

:first-child & :last-child

  • 现在我们通过使用结构伪类选择器的方式来选择ul的第一个和最后一个子元素li：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 使用结构伪类选择器 --><style>/* 选择ul的第一个子元素li */ul li:first-child {background: #2addf5;}/* 选择ul的最后一个子元素li */ul li:last-child {background: red;}</style></head>
<body><h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul></body>
</html>
  • 查看网页效果：

在这里插入图片描述

:nth-child(x)【拓展】

  • 通过使用结构伪类选择器（:nth-child(x)）的方式来选择p1：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 使用结构伪类选择器 --><style>/* 选择ul的第一个子元素li */ul li:first-child {background: #2addf5;}/* 选择ul的最后一个子元素li */ul li:last-child {background: red;}/* 选择p1:通过p元素定位到p的父级元素(body)，然后选择其父级元素(body)的第二个子元素(p1)注意: 只有当父级元素(body)的第二个子元素的标签类型为p时，才能生效*/p:nth-child(2) {background: green;}</style></head>
<body><h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul></body>
</html>
  • 查看网页效果：

在这里插入图片描述

  • 注意：这里只有当p元素的父级元素（body）的第二个子元素的标签类型为p时，选择器中的声明语句才能生效。
  • 验证：我们将p1和h1调换一下位置，这样p元素的父级元素（body）的第二个子元素的标签类型就不再是P，而是变成了h1：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 使用结构伪类选择器 --><style>/* 选择ul的第一个子元素li */ul li:first-child {background: #2addf5;}/* 选择ul的最后一个子元素li */ul li:last-child {background: red;}/* 选择p1:定位到p元素的父级元素(body)，然后选择其父级元素(body)的第二个子元素(p1)注意: 只有当父级元素(body)的第二个子元素的标签类型为p时，才能生效*/p:nth-child(2) {background: green;}</style></head>
<body><p>p1</p>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul></body>
</html>
  • 我们再查看此时的网页效果：

在这里插入图片描述

  • 可以发现：当p元素的父级元素（body）的第二个子元素的标签类型不为p时，选择器中的声明语句并没有生效。

:nth-of-type(x)【拓展】

  • 通过使用结构伪类选择器（:nth-of-type(x)）的方式来选择p1：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 使用结构伪类选择器 --><style>/* 选择ul的第一个子元素li */ul li:first-child {background: #2addf5;}/* 选择ul的最后一个子元素li */ul li:last-child {background: red;}/* 选择p1:定位到p元素的父级元素(body)中所有类型为p的子元素，然后选择其中的第一个元素(p1)*/p:nth-of-type(1) {background: yellow;}</style></head>
<body><h1>h1</h1>    
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul></body>
</html>
  • 查看网页效果：

在这里插入图片描述

属性选择器【重点】

  • 属性选择器：通过已经存在的属性名或属性值匹配元素。
  • 准备工作：
  • 首先我们写一个网页，在它的body中有一个p标签，p标签又有十个a标签，我们给每个a标签都添加一些属性（herf、class、id等），再使用后代选择器选中所有的a标签，给其添加一些样式，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 后代选择器，选择元素demo下的所有后代的a元素 */.demo a {float: left; /* 设置浮动 */display: block; /* 设置为块级元素 */height: 50px; /* a标签的高度 */width: 50px; /* a标签的宽度 */border-radius: 10px; /* 圆角边框 */background: skyblue; /* a标签的背景颜色 */text-align: center; /* 文字居中对齐 */color: grey; /* 文字颜色 */text-decoration: none;  /* 去掉下划线 */margin-right: 5px; /* 设置间隔(每个a标签都向右偏移5px) */font: bold 20px/50px Arial; /* 设置字体样式(加粗 字体大小/行高 字体) */}</style></head>
<body><p class="demo"><a href="https://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item">3</a><a href="images/123.png" class="links item">4</a><a href="images/123.jpg" class="links item">5</a><a href="abc" class="links item">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="abc.doc" class="links item">9</a><a href="abcd.doc" class="links item last" id="last">10</a></p></body>
</html>
  • 查看网页效果：

在这里插入图片描述

  • 准备工作完成，接下来我们就可以正式开始属性选择器部分的学习了：

元素[属性]

  • 通过使用属性选择器来选择所有包含id属性的a元素：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 后代选择器，选择元素demo下的所有后代的a元素 */.demo a {float: left; /* 设置浮动 */display: block; /* 设置为块级元素 */height: 50px; /* a标签的高度 */width: 50px; /* a标签的宽度 */border-radius: 10px; /* 圆角边框 */background: skyblue; /* a标签的背景颜色 */text-align: center; /* 文字居中对齐 */color: grey; /* 文字颜色 */text-decoration: none;  /* 去掉下划线 */margin-right: 5px; /* 设置间隔(每个a标签都向右偏移5px) */font: bold 20px/50px Arial; /* 设置字体样式(加粗 字体大小/行高 字体) */}/* 属性选择器 *//* 选择所有包含id属性的a元素 */a[id] {background: yellow;}</style></head>
<body><p class="demo"><a href="https://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item">3</a><a href="images/123.png" class="links item">4</a><a href="images/123.jpg" class="links item">5</a><a href="abc" class="links item">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="abc.doc" class="links item">9</a><a href="abcd.doc" class="links item last" id="last">10</a></p></body>
</html>
  • 查看网页效果：

在这里插入图片描述

元素[属性=“属性值”]

  • 通过使用属性选择器来选择其中id属性值为first的a元素：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 后代选择器，选择元素demo下的所有后代的a元素 */.demo a {float: left; /* 设置浮动 */display: block; /* 设置为块级元素 */height: 50px; /* a标签的高度 */width: 50px; /* a标签的宽度 */border-radius: 10px; /* 圆角边框 */background: skyblue; /* a标签的背景颜色 */text-align: center; /* 文字居中对齐 */color: grey; /* 文字颜色 */text-decoration: none;  /* 去掉下划线 */margin-right: 5px; /* 设置间隔(每个a标签都向右偏移5px) */font: bold 20px/50px Arial; /* 设置字体样式(加粗 字体大小/行高 字体) */}/* 属性选择器 *//* 选择id属性值为first的a元素 */a[id="first"] {background: yellow;}</style></head>
<body><p class="demo"><a href="https://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item">3</a><a href="images/123.png" class="links item">4</a><a href="images/123.jpg" class="links item">5</a><a href="abc" class="links item">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="abc.doc" class="links item">9</a><a href="abcd.doc" class="links item last" id="last">10</a></p></body>
</html>
  • 查看网页效果：

在这里插入图片描述

元素[属性*=“属性值”]

  • 通过使用属性选择器来选择其中class属性值包含links的a元素：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 后代选择器，选择元素demo下的所有后代的a元素 */.demo a {float: left; /* 设置浮动 */display: block; /* 设置为块级元素 */height: 50px; /* a标签的高度 */width: 50px; /* a标签的宽度 */border-radius: 10px; /* 圆角边框 */background: skyblue; /* a标签的背景颜色 */text-align: center; /* 文字居中对齐 */color: grey; /* 文字颜色 */text-decoration: none;  /* 去掉下划线 */margin-right: 5px; /* 设置间隔(每个a标签都向右偏移5px) */font: bold 20px/50px Arial; /* 设置字体样式(加粗 字体大小/行高 字体) */}/* 属性选择器 *//* 选择class属性值包含links的a元素 */a[class*=links] {background: yellow;}</style></head>
<body><p class="demo"><a href="https://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item">3</a><a href="images/123.png" class="links item">4</a><a href="images/123.jpg" class="links item">5</a><a href="abc" class="links item">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="abc.doc" class="links item">9</a><a href="abcd.doc" class="links item last" id="last">10</a></p></body>
</html>
  • 查看网页效果：

在这里插入图片描述

元素[属性^=“xxx”]

  • 通过使用属性选择器来选择其中href属性值以https开头的a元素：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 后代选择器，选择元素demo下的所有后代的a元素 */.demo a {float: left; /* 设置浮动 */display: block; /* 设置为块级元素 */height: 50px; /* a标签的高度 */width: 50px; /* a标签的宽度 */border-radius: 10px; /* 圆角边框 */background: skyblue; /* a标签的背景颜色 */text-align: center; /* 文字居中对齐 */color: grey; /* 文字颜色 */text-decoration: none;  /* 去掉下划线 */margin-right: 5px; /* 设置间隔(每个a标签都向右偏移5px) */font: bold 20px/50px Arial; /* 设置字体样式(加粗 字体大小/行高 字体) */}/* 属性选择器 *//* 选择href属性值以https开头的a元素 */a[href^="https"] {background: yellow;}</style></head>
<body><p class="demo"><a href="https://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item">3</a><a href="images/123.png" class="links item">4</a><a href="images/123.jpg" class="links item">5</a><a href="abc" class="links item">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="abc.doc" class="links item">9</a><a href="abcd.doc" class="links item last" id="last">10</a></p></body>
</html>
  • 查看网页效果：

在这里插入图片描述

元素[属性$=“xxx”]

  • 通过使用属性选择器来选择其中href属性值以pdf结尾的a元素：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 后代选择器，选择元素demo下的所有后代的a元素 */.demo a {float: left; /* 设置浮动 */display: block; /* 设置为块级元素 */height: 50px; /* a标签的高度 */width: 50px; /* a标签的宽度 */border-radius: 10px; /* 圆角边框 */background: skyblue; /* a标签的背景颜色 */text-align: center; /* 文字居中对齐 */color: grey; /* 文字颜色 */text-decoration: none;  /* 去掉下划线 */margin-right: 5px; /* 设置间隔(每个a标签都向右偏移5px) */font: bold 20px/50px Arial; /* 设置字体样式(加粗 字体大小/行高 字体) */}/* 属性选择器 *//* 选择href属性值以pdf结尾的a元素 */a[href$="pdf"] {background: yellow;}</style></head>
<body><p class="demo"><a href="https://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item">3</a><a href="images/123.png" class="links item">4</a><a href="images/123.jpg" class="links item">5</a><a href="abc" class="links item">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="abc.doc" class="links item">9</a><a href="abcd.doc" class="links item last" id="last">10</a></p></body>
</html>
  • 查看网页效果：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/110164.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

代码随想录算法训练营之JAVA｜第四十二天|70. 爬楼梯

代码随想录算法训练营之JAVA｜第四十二天|70. 爬楼梯

今天是第 天刷leetcode&#xff0c;立个flag&#xff0c;打卡60天&#xff0c;如果做不到&#xff0c;完成一件评论区点赞最高的挑战。 算法挑战链接 70. 爬楼梯https://leetcode.cn/problems/climbing-stairs/ 第一想法 这是一个动态规划的入门题目&#xff0c;在看完完全背…
阅读更多...
液体神经网络LLN：通过动态信息流彻底改变人工智能

液体神经网络LLN：通过动态信息流彻底改变人工智能

巴乌米克泰吉 一、说明 在在人工智能领域&#xff0c;神经网络已被证明是解决复杂问题的非常强大的工具。多年来&#xff0c;研究人员不断寻求创新方法来提高其性能并扩展其能力。其中一种方法是液体神经网络&#xff08;LNN&#xff09;的概念&#xff0c;这是一个利用动态计算…
阅读更多...
【计算机网络】OSI 七层网络参考模型

【计算机网络】OSI 七层网络参考模型

OSI&#xff08;Open Systems Interconnection&#xff09;七层网络参考模型是一种用于描述计算机网络通信的框架&#xff0c;将网络通信划分为七个不同的层次&#xff0c;每个层次负责不同的功能。 以下为 OSI 七层网络参考模型的简单表格&#xff1a; --------------------…
阅读更多...
设计模式—原型模式(Prototype)

设计模式—原型模式(Prototype)

目录 一、什么是原型模式&#xff1f; 二、原型模式具有什么优缺点吗&#xff1f; 三、有什么缺点&#xff1f; 四、什么时候用原型模式&#xff1f; 五、代码展示 ①、简历代码初步实现 ②、原型模式 ③、简历的原型实现 ④、深复制 ⑤、浅复制 一、什么是原型模式&…
阅读更多...
Leetcode刷题笔记--Hot31-40

Leetcode刷题笔记--Hot31-40

1--颜色分类&#xff08;75&#xff09; 主要思路&#xff1a; 快排 #include <iostream> #include <vector>class Solution { public:void sortColors(std::vector<int>& nums) {quicksort(nums, 0, nums.size()-1);}void quicksort(std::vector<int…
阅读更多...
Apache Celeborn 让 Spark 和 Flink 更快更稳更弹性

Apache Celeborn 让 Spark 和 Flink 更快更稳更弹性

摘要&#xff1a;本文整理自阿里云/数据湖 Spark 引擎负责人周克勇&#xff08;一锤&#xff09;在 Streaming Lakehouse Meetup 的分享。内容主要分为五个部分&#xff1a; Apache Celeborn 的背景Apache Celeborn——快Apache Celeborn——稳Apache Celeborn——弹Evaluation…
阅读更多...
IntelliJ 中如何配置 Tomcat 调试

IntelliJ 中如何配置 Tomcat 调试

Tomcat 在 IntelliJ 中的配置要求首先你要下载 Tomcat。 设置服务器 在 IntelliJ 下面先选择 Run&#xff0c;然后选择配置运行配置。 在弹出的界面中&#xff0c;有一个编辑配置的选项。 然后在弹出的页面中选择添加。 选择 Tomcat 在弹出的添加页面中选择添加 Tomcat&…
阅读更多...
华为数通方向HCIP-DataCom H12-821题库(单选题：141-160）

华为数通方向HCIP-DataCom H12-821题库(单选题：141-160）

第141题 Router-LSA 能够描述不同的链路类型&#xff0c;不属于Router LSA 链路类型的是以下哪一项? A、Link Type 可以用来描述到末梢网络的连接&#xff0c;即 SubNet B、Link Type 可以用来描述到中转网络的连接&#xff0c;即 TranNet C、Link Type 可以用来描述到另一…
阅读更多...
《自动驾驶与机器人中的SLAM技术》之GNSS相关基础知识总结

《自动驾驶与机器人中的SLAM技术》之GNSS相关基础知识总结

简介 本篇基于对《自动驾驶与机器人中的SLAM技术》中的GNSS定位相关基础知识进行总结用于备忘 知识点整理 GNSS(全球卫星导航系统)定位原理 GNSS 通过测量自身与地球周围各卫星的距离来确定自身的位置 , 而与卫星的距离主要是通过测量时间间隔来确定的 GNSS与GPS的关系 GPS(…
阅读更多...
2023最新任务悬赏平台源码uniapp+Thinkphp新款悬赏任务地推拉新充场游戏试玩源码众人帮威客兼职任务帮任务发布分销机

2023最新任务悬赏平台源码uniapp+Thinkphp新款悬赏任务地推拉新充场游戏试玩源码众人帮威客兼职任务帮任务发布分销机

新款悬赏任务地推拉新充场游戏试玩源码众人帮威客兼职任务帮任务发布分销机制 后端是&#xff1a;thinkphpFastAdmin 前端是&#xff1a;uniapp 1.优化首页推荐店铺模块如有则会显示此模块没有则隐藏。 2修复首页公告&#xff0c;更改首页公告逻辑。&#xff08;后台添加有公…
阅读更多...
Vue项目中app.js过大，导致web初始化加载过慢问题

Vue项目中app.js过大，导致web初始化加载过慢问题

1、删除多余不需要的库&#xff1a; npm uninstall xxx 如例如moment库文件是很大的可以直接放到index.html文件直接CDN引入 2、修改/config/index.js配置文件&#xff1a;将productionGzip设置为false ​ 3、设置vue-router懒加载 懒加载配置&#xff1a; ​ 非懒加载配置&…
阅读更多...
工程监测仪器振弦传感器信号转换器在隧道中的详细应用

工程监测仪器振弦传感器信号转换器在隧道中的详细应用

工程监测仪器振弦传感器信号转换器在隧道中的详细应用 隧道工程是指为铁路、公路、城市轨道交通、水利等工程在地下开挖一定断面形状和尺寸得洞穴或通道&#xff0c;以满足交通运输、水利调节等需要。为了确保隧道工程的安全性和稳定性&#xff0c;需要对其进行监测&#xff0…
阅读更多...
Kubernetes(k8s)上部署redis5.0.14

Kubernetes(k8s)上部署redis5.0.14

Kubernetes上部署redis 环境准备创建命名空间 准备PV和PVC安装nfs准备PV准备PVC 部署redis创建redis的配置文件部署脚本挂载数据目录挂载配置文件通过指定的配置文件启动redis 集群内部访问外部链接Redis 环境准备 首先你需要一个Kubernetes环境&#xff0c;可参考我写的文章&…
阅读更多...
数据库的类型

数据库的类型

一说到数据库&#xff0c;大多数人可能像我一样&#xff0c;首先想到的就是 MySQL、Oracle 这样的关系型数据库。因为我们平时接触的最多&#xff0c;而且大学课程中有关于数据库的&#xff0c;也是以关系型数据库为主的。 其实&#xff0c;除了关系型数据库外&#xff0c;还有…
阅读更多...
华为云Stack的学习（三）

华为云Stack的学习（三）

四、华为云Stack公共组件 1.华为云Stack公共负载均衡方案介绍 1.1 LVS原理 LVS是四层负载均衡&#xff0c;建立在OSI模型的传输层之上&#xff0c;所以效率非常高。 LVS有两种转发模式&#xff1a; NAT模式的转发主要通过修改IP地址&#xff08;位于OSI模型的第三层网络层&…
阅读更多...
GFPGAN 集成Flask 接口化改造

GFPGAN 集成Flask 接口化改造

GFPGAN是一款腾讯开源的人脸高清修复模型&#xff0c;基于github上提供的demo&#xff0c;可以简单的集成Flask以实现功能接口化。 GFPGAN的安装&#xff0c;Flask的安装请参见其他文章。 如若使用POSTMAN进行测试&#xff0c;需使用POST方式&#xff0c;form-data的请求体&am…
阅读更多...
随机化快速排序（Java 实例代码）

随机化快速排序（Java 实例代码）

随机化快速排序 一、概念及其介绍 快速排序由 C. A. R. Hoare 在 1960 年提出。 随机化快速排序基本思想&#xff1a;通过一趟排序将要排序的数据分割成独立的两部分&#xff0c;其中一部分的所有数据都比另外一部分的所有数据都要小&#xff0c;然后再按此方法对这两部分数…
阅读更多...
jupyter notebook 插件nbextensions的安装

jupyter notebook 插件nbextensions的安装

安装步骤&#xff1a; 1、打开 jupyter notebook&#xff0c;新建一个 python 文件&#xff1b; 2、 分别输入以下代码&#xff0c;然后运行&#xff0c;出现 warning 不影响使用&#xff0c;如果出现 errors&#xff0c;则说明下载有问题&#xff1a; !python -m pip install…
阅读更多...
【注册岩土】Python土力学与基础工程计算.PDF-土中的应力

【注册岩土】Python土力学与基础工程计算.PDF-土中的应力

Python 求解代码如下&#xff1a; 1&#xff0e;&#xff03;计算竖向有效自重应力2.h12#m3.h21.5#m4.h31#m5.gamma1 19# kN/m^36.gamma218# kN/m^37.gamma317# kN/m^38.sigma_c gammal * h1 gamma2*h2 gamma3 *h39&#xff0e;print&#xff08;&#xff02;竖向有效自重应力…
阅读更多...
指针进阶详解

指针进阶详解

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂。 目录 1.字符指针 2.指针数组 3.数组指针 4.数组传…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023