蓝旭24春季培训-第一周预习-CSS进阶+设计

最新推荐文章于 2024-07-31 15:35:03 发布

Sure54291

最新推荐文章于 2024-07-31 15:35:03 发布

阅读量725

点赞数 10

文章标签： css 前端

本文链接：https://blog.csdn.net/2303_80228948/article/details/137181272

版权

一、CSS伪类与伪元素

(一)CSS伪类

1、什么是伪类？

伪类用于定义元素的特殊状态

2、伪类的分类

2.1 锚伪类：能够帮助链接以不同的形式显示

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

以上代码可以控制链接在“未访问”“已访问”“鼠标悬停”“已选择”时分别显示不同的颜色。

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
2.2 伪类和CSS类
伪类可以和css类结合，同样可以达到上述效果

a.highlight:hover {
  color: #ff0000;
}

2.3 悬停在 <div> 上
以:hover伪类为例，当鼠标悬停在<div>元素上时，同样可以改变其背景色

div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}

在这里插入图片描述

2.4 简单的工具提示悬停
有时元素并不出现，需要鼠标悬停到元素上才会出现

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

在这里插入图片描述

2.5 CSS - :first-child 伪类
:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。
以下例子匹配的为第一个<p>元素

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>这是一段文本。</p>

<p>这是一段文本。</p>

</body>
</html>

在这里插入图片描述
同时，它还可以匹配所有<p>中的首个i元素或首个<p>中的单个i元素。

(二)CSS伪元素

1、什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

2、伪元素的分类

2.1 ::first-line 伪元素
::first-line 伪元素用于向文本的首行添加特殊样式。

p::first-line {
  color: #ff0000;
  font-variant: small-caps;

在这里插入图片描述
注意：::first-line 伪元素只能应用于块级元素。同时，要注意为伪元素是双冒号，不要与伪类的单冒号弄混
2.2 ::first-letter 伪元素
::first-letter 伪元素用于向文本的首字母添加特殊样式。

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

在这里插入图片描述
注意：与::first-line 一样::first-letter 伪元素只能应用于块级元素。
2.3 ::before 伪元素
::before 伪元素可用于在元素内容之前插入一些内容。

h1::before {
  content: url(/i/photo/smile.gif);
}

在这里插入图片描述

2.4 ::after 伪元素
::after 伪元素可用于在元素内容之后插入一些内容。

h1::after {
  content: url(/i/photo/smile.gif);
}

在这里插入图片描述

*伪元素可以多个共同使用，也可以与css类结合使用

2.5 ::selection 伪元素
::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：
color
background
cursor
outline

二、关系选择器

（一）后代选择器

后代选择器匹配属于指定元素后代的所有元素。用==”空格“==连接

div > p {
  background-color: yellow;
}

（二）子代选择器

子选择器匹配属于指定元素子元素的所有元素。用==“>”==连接

div + p {
  background-color: yellow;
}

（三）相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。用==“+”==连接
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

div + p {
  background-color: yellow;
}

（四）通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。用==“~”==连接

div ~ p {
  background-color: yellow;
}

对比四种不同选择器的样式
在这里插入图片描述

三、CSS布局

在这里插入图片描述
如图所示为一般网站的布局，页眉处置于网站顶部，放置网站的logo、名称等到，导航栏帮助读者快速到达想看的内容，在其下方写主要内容，最后的页脚位于页面底部，通常包含诸如版权和联系方式之类的信息
在html中我们可以利用<div>和<span>等块级元素，对网页进行分块，之后利用css进行美化

（一）页眉

/* 设置页眉的样式 */
.header {
  background-color: red;
  padding: 20px;
  text-align: center;
}
<div class="header">
  <h1>Header</h1>

在这里插入图片描述

（二）导航栏

/* 设置页眉的样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* 设置顶部导航栏的样式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>

在这里插入图片描述
导航栏可以设置超链接进行交互，帮助读者快速到达网页内部或外部的相应位置。同时设置访问前后、鼠标悬停等样式，给予读者提示。

（三）内容

内容的排版多种多样，可以根据个人喜好及实际情况进行设计。
同时，利用代码，可以使网页在不同大小时显示不同的排版，方便读者阅读

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* 设置页眉的样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* 设置顶部导航栏的样式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* 创建并排的三个非等列 */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* 清除列之后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 响应式布局 - 创建堆叠而非并排的三列 */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}

在这里插入图片描述

四、盒模型

CSS 盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素
可以通过box-sizing 属性来设置盒模型
在box-sizing中，宽度和高度可以包括边框，从而避免了因边框大小不同导致的图片大小不同

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

在这里插入图片描述