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.mzph.cn/news/57091.shtml

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

相关文章

5 群起集群

5 群起集群

1.在启动集群之前&#xff0c;先配置workers,有几个节点就配置几个 [atguiguhadoop102 hadoop]$ vim /opt/module/hadoop-3.1.3/etc/hadoop/workers在该文件中增加如下内容&#xff1a; hadoop102 hadoop103 hadoop104 注意&#xff1a;该文件中添加的内容结尾不允许有空格&a…
阅读更多...
成都瀚网科技：抖店如何经营？

成都瀚网科技：抖店如何经营？

作为热门的短视频分享平台&#xff0c;抖音不仅是一种娱乐工具&#xff0c;更是一个蕴藏着无限商机的电商平台。开店、抖音下单成为很多人的选择。那么&#xff0c;抖音如何开店、下单呢&#xff1f; 1、如何在抖音上开店和下单&#xff1f; 注册账号&#xff1a;首先&#xff…
阅读更多...
vue 后台管理系统登录 记住密码 功能（Cookies实现）

vue 后台管理系统登录 记住密码 功能（Cookies实现）

安装插件 import Cookies from js-cookie 组件引入 import Cookies from js-cookie; 存值&#xff1a; Cookies.set(username, state.account, { expires: 30 }); // username 存的值的名字&#xff0c;state.account 存的值 expires 存储的时间&#xff0c;30天Cookies…
阅读更多...
mysql sql_mode数据验证检查

mysql sql_mode数据验证检查

sql_mode 功能 sql_mode 会影响MySQL支持的sql语法以及执行的数据验证检查。通过设置sql_mode ,可以完成不同严格程度的数据校验&#xff0c;有效地保障数据准确性 sql_mode 严格模式 VS 宽松模式 宽松模式 比如&#xff0c;插入的数据不满足 表的数据类型&#xff0c;也可能…
阅读更多...
2023年高教社杯 国赛数学建模思路 - 案例：ID3-决策树分类算法

2023年高教社杯 国赛数学建模思路 - 案例：ID3-决策树分类算法

文章目录 0 赛题思路1 算法介绍2 FP树表示法3 构建FP树4 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模…
阅读更多...
opencv 车牌号的定位和识别+UI界面识别系统

opencv 车牌号的定位和识别+UI界面识别系统

目录 一、实现和完整UI视频效果展示 主界面&#xff1a; 识别结果界面&#xff1a;&#xff08;识别车牌颜色和车牌号&#xff09; 查看历史记录界面&#xff1a; 二、原理介绍&#xff1a; 车牌检测->图像灰度化->Canny边缘检测->膨胀与腐蚀 边缘检测及预处理…
阅读更多...
Vue3（开发h5适配）

Vue3（开发h5适配）

在开发移动端的时候需要适配各种机型&#xff0c;有大的&#xff0c;有小的&#xff0c;我们需要一套代码&#xff0c;在不同的分辨率适应各种机型。 因此我们需要设置meta标签 <meta name"viewport" content"widthdevice-width, initial-scale1.0">…
阅读更多...
第十四课：采用 Qt 开发翻页/分页/多页窗体组件

第十四课：采用 Qt 开发翻页/分页/多页窗体组件

功能描述&#xff1a;采用 Qt 开发一个翻页/分页/多页的窗体组件&#xff0c;封装为 QWidget 的子类&#xff0c;在你的应用程序中可直接使用。 一、最终演示效果 本次制作的翻页/分页/多页窗体组件是基于 Qt 开发&#xff0c;整个程序封装成 PageWidget 类&#xff0c;继承于…
阅读更多...
【微信红包】Axure聊天发红包原型图，含流程图和PRD产品文档

【微信红包】Axure聊天发红包原型图，含流程图和PRD产品文档

作品概况 页面数量&#xff1a;共 60 页 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;聊天软件、社交软件 作品申明&#xff1a;页面内容仅用于功能演示&#xff0c;无实际功能 作品特色 本作品为「发红包」的原型设计图&#xff0c…
阅读更多...
Linux_4_文本处理工具和正则表达式

Linux_4_文本处理工具和正则表达式

目录 1文本编辑工具之神VIM1.1 vi和vim简介1.2使用vim1.2.1 vim 命令格式1.2.2三种主要模式和转换 1.3扩展命令模式1.3.1扩展命令模式基本命令1.3.2 地址定界1.3.3查找并替换1.3.4定制vim的工作特性1.3.4.1行号1.3.4.2忽略字符的大小写1.3.4.3白动缩进1.3.4.4复制粘贴保留格式1…
阅读更多...
商城-学习整理-集群-K8S-集群环境部署（二十四）

商城-学习整理-集群-K8S-集群环境部署（二十四）

目录 一、MySQL集群1、mysql集群原理2、Docker安装模拟MySQL主从复制集群1、下载mysql镜像2、创建Master实例并启动3、创建 Slave 实例并启动4、为 master 授权用户来同步数据1、进入 master 容器2、进入 mysql 内部 &#xff08;mysql –uroot -p&#xff09;3、查看 master 状…
阅读更多...
Haproxy+Keepalive 整合rabbitmq实现高可用负载均衡

Haproxy+Keepalive 整合rabbitmq实现高可用负载均衡

Haproxy 实现负载均衡 HAProxy 提供高可用性、负载均衡及基于 TCPHTTP 应用的代理&#xff0c;支持虚拟主机&#xff0c;它是免费、快速并且可靠的一种解决方案&#xff0c;包括 Twitter,Reddit,StackOverflow,GitHub 在内的多家知名互联网公司在使用。HAProxy 实现了一种…
阅读更多...
响应式web-PC端web与移动端web（H5）兼容适配 选型方案

响应式web-PC端web与移动端web（H5）兼容适配 选型方案

背景 项目需要&#xff0c;公司已经有一套PC端web&#xff0c;需要做一套手机端浏览器可用的&#xff0c;但是又想兼容pc端&#xff0c;适配的web项目。 以下是查阅到响应布局现成的开源模版。根据自己技术栈&#xff0c;vue2,js来搜索相关的开源项目。 RuoYi 使用若依快速…
阅读更多...
【LeetCode75】第三十七题 二叉树中的最长交错路径

【LeetCode75】第三十七题 二叉树中的最长交错路径

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 给我们一棵二叉树&#xff0c;问我们在这棵树里能找到的最长交错路径。最长交错路径就是在二叉树里一左一右一左一右这样走&#xff0c;最…
阅读更多...
后端面试话术集锦第三篇：spring cloud 面试话术

后端面试话术集锦第三篇：spring cloud 面试话术

🚗后端面试集锦目录 💖后端面试话术集锦第一篇：spring面试话术💖 💖后端面试话术集锦第二篇：spring boot面试话术💖 💖后端面试话术集锦第三篇：spring cloud面试话术💖 💖后端面试话术集锦第四篇：ElasticSearch面试话术💖 💖后端面试话术集锦第五篇：r…
阅读更多...
利用深度蛋白质序列嵌入方法通过 Siamese neural network 对 virus-host PPIs 进行精准预测【Patterns，2022】

利用深度蛋白质序列嵌入方法通过 Siamese neural network 对 virus-host PPIs 进行精准预测【Patterns，2022】

研究背景&#xff1a; 病毒感染可以导致多种组织特异性损伤&#xff0c;所以 virus-host PPIs 的预测有助于新的治疗方法的研究&#xff1b;目前已有的一些 virus-host PPIs 鉴定或预测方法效果有限&#xff08;传统实验方法费时费力、计算方法要么基于蛋白结构或基因&#xff…
阅读更多...
以太网交换机高稳定性时钟系统应用方案

以太网交换机高稳定性时钟系统应用方案

随着网络技术的不断发展&#xff0c;我们的生活也发生着巨大的变化&#xff0c;这离不开以太网起到的重大作用&#xff0c;全球大部分地区的以太网交换机市场都出现了增长。 那么&#xff0c;平常我们所说的以太网交换机到底是什么&#xff1f;今天小扬给大家科普科普以太网交…
阅读更多...
ubuntu学习（六）----文件编程实现cp指令

ubuntu学习（六）----文件编程实现cp指令

1 思路 Linux要想复制一份文件通常指令为&#xff1a; cp src.c des.c 其中src.c为源文件&#xff0c;des.c为目标文件。 要想通过文件编程实现cp效果&#xff0c;思路如下 1 首先打开源文件 src.c 2 读src到buf 3 创建des.c 4 将buf写入到des.c 5 close两个文件 2 实现 vi …
阅读更多...
第一次实验：Protocol Layers

第一次实验：Protocol Layers

第一次实验&#xff1a;Protocol Layers 捕获跟踪*Pick a URL and fetch it with* wget *or* curl*.* 检查跟踪数据包结构协议开销复用密钥*Which Ethernet header field is the demultiplexing key that tells it the next higher layer is IP?**Which IP header field is th…
阅读更多...
get请求报错400 非法参数

get请求报错400 非法参数

get请求报错400 非法参数 背景&#xff1a;get请求数据&#xff0c;SpringBoot提供接口&#xff0c;返回400&#xff0c;报错非法参数此种情况排除接口本身错误之外&#xff0c;检查参数中有没有特殊字符 " < > [ \ ] ^ { | } 我这边就是因为其中一个参数中有中括…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023