37个问题快速复习CSS3

Java全栈的牛马

已于 2024-08-09 11:35:49 修改

阅读量761

点赞数 24

分类专栏：前端文章标签： css3

于 2024-08-08 11:10:17 首次发布

本文链接：https://blog.csdn.net/qq_51263863/article/details/141021672

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是CSS?

CSS (Cascading Style Sheets) 是用于描述HTML或XML文档样式的语言。它控制网页的布局、颜色、字体等视觉效果。

CSS文字颜色，背景色

p {
  color: blue; /* 设置文字颜色为蓝色 */
  background-color: yellow; /* 设置背景色为黄色 */
}

常见的颜色值单词(至少5个)

red (红色)
blue (蓝色)
green (绿色)
yellow (黄色)
black (黑色)
white (白色)

CSS控制元素宽高

div {
  width: 200px; /* 设置宽度为200像素 */
  height: 100px; /* 设置高度为100像素 */
}

文本对齐方式

p {
  text-align: center; /* 居中对齐 */
  /* 其他选项: left (左对齐), right (右对齐), justify (两端对齐) */
}

id、class选择器

#unique-element { /* id选择器,以#开头 */
  color: red;
}

.common-class { /* class选择器,以.开头 */
  font-size: 16px;
}

引入CSS的三种方式及区别

a. 内联样式:

<p style="color: red;">This is red text.</p>

b. 内部样式表:

<head>
  <style>
    p { color: red; }
  </style>
</head>

c. 外部样式表:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

区别:

内联样式: 直接应用于单个元素,优先级最高,但难以维护
内部样式表: 适用于单个HTML文件,方便管理小型项目
外部样式表: 最灵活,可在多个页面中重用,便于维护large项目

标签、通配符、后代、子代选择器用法

p { color: blue; } /* 标签选择器 */

* { margin: 0; } /* 通配符选择器,选择所有元素 */

div p { font-size: 14px; } /* 后代选择器,选择div内的所有p元素 */

div > p { font-weight: bold; } /* 子代选择器,选择div的直接子元素p */

属性、后面兄弟、相邻兄弟、分组选择器

[type="text"] { border: 1px solid gray; } /* 属性选择器 */

h1 ~ p { margin-top: 20px; } /* 后面兄弟选择器,选择h1后的所有同级p元素 */

h1 + p { font-style: italic; } /* 相邻兄弟选择器,选择紧跟h1的p元素 */

h1, h2, h3 { font-family: Arial, sans-serif; } /* 分组选择器 */

背景图片、尺寸、位置、重复、固定

div {
  background-image: url('image.jpg'); /* 设置背景图片 */
  background-size: cover; /* 调整尺寸以覆盖整个容器 */
  background-position: center; /* 居中放置 */
  background-repeat: no-repeat; /* 不重复 */
  background-attachment: fixed; /* 固定背景 */
}

首行缩进,行高,单词、字母间隔

p {
  text-indent: 2em; /* 首行缩进2个字符 */
  line-height: 1.5; /* 行高为字体大小的1.5倍 */
  word-spacing: 5px; /* 单词间隔 */
  letter-spacing: 1px; /* 字母间隔 */
}

大小写转换、文本下中下划线,空白处理-不许换行

.text {
  text-transform: uppercase; /* 转换为大写 */
  text-decoration: underline; /* 下划线 */
  white-space: nowrap; /* 不换行 */
}

文本阴影

h1 {
  text-shadow: 2px 2px 4px #000000; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-style: italic; /* 倾斜 */
  font-weight: bold; /* 粗体 */
}

最大宽高,最小宽高

div {
  max-width: 800px;
  min-width: 300px;
  max-height: 600px;
  min-height: 200px;
}

a链接样式控制

a {
  color: blue;
  text-decoration: none; /* 移除下划线 */
}
a:hover {
  color: red; /* 鼠标悬停时变红 */
}
a:visited {
  color: purple; /* 访问过的链接 */
}

CSS注释如何写

/* 这是单行注释 */

/*
  这是
  多行
  注释
*/

自定义ul列表前的图标

ul {
  list-style-type: none; /* 移除默认样式 */
}
ul li::before {
  content: "🌟"; /* 使用Unicode字符作为图标 */
  margin-right: 5px;
}

合并表格的边框

table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid black;
}

元素之间转换,注意事项

可以使用display属性改变元素的显示类型:

.inline-to-block {
  display: block;
}
.block-to-inline {
  display: inline;
}

注意事项:

改变display可能会影响布局
inline元素变为block后可以设置宽高
block元素变为inline后会失去宽高设置

重置CSS样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

什么是精灵图,怎么用

精灵图(CSS Sprites)是将多个小图标合并成一张大图,通过background-position来显示所需部分:

.icon {
  width: 20px;
  height: 20px;
  background-image: url('sprites.png');
  background-repeat: no-repeat;
}
.icon-home {
  background-position: 0 0;
}
.icon-email {
  background-position: -20px 0;
}

什么是盒子模型,组成是怎样的

盒子模型描述了HTML元素如何在页面上显示。它由以下部分组成:

Content: 内容区域
Padding: 内边距
Border: 边框
Margin: 外边距

盒子模型分类

标准盒模型: width和height只包括content
IE盒模型(怪异盒模型): width和height包括content, padding和border

可以通过box-sizing属性控制:

.box {
  box-sizing: content-box; /* 标准盒模型 */
  /* box-sizing: border-box; */ /* IE盒模型 */
}

margin重叠现象、块元素居中

margin重叠: 当两个垂直外边距相遇时,它们会合并成一个外边距,值为较大的那个。

块元素居中:

.center-block {
  width: 300px;
  margin: 0 auto;
}

隐藏元素的3种方式,区别

.hidden1 { display: none; } /* 完全隐藏,不占空间 */
.hidden2 { visibility: hidden; } /* 隐藏,但仍占空间 */
.hidden3 { opacity: 0; } /* 透明,但仍占空间且可交互 */

什么是伪元素

伪元素用于创建不存在于DOM中的元素,如::before和::after:

p::first-letter {
  font-size: 2em;
}

如何使元素浮动,浮动有什么作用

.float-left {
  float: left;
}

浮动可以使元素脱离正常文档流,实现文字环绕或创建多列布局。

浮动的起始位置,对自身的影响

浮动元素的起始位置是其在正常文档流中的位置。浮动会使元素:

脱离正常文档流
向左或向右移动,直到碰到容器边缘或另一个浮动元素
变为块级元素(可设置宽高)

什么是浮动塌陷,如何解决

浮动塌陷是指当容器内所有子元素都浮动时,容器高度塌陷为0。解决方法:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

什么是定位,有什么用

定位用于控制元素在页面上的精确位置。它可以创建复杂的布局,如固定导航栏、悬浮元素等。

定位方式有哪些,各有什么特点

.static { position: static; } /* 默认定位,按正常文档流排列 */

.relative {
  position: relative; /* 相对定位,相对于自身原本位置 */
  top: 10px;
  left: 20px;
}

.absolute {
  position: absolute; /* 绝对定位,相对于最近的非static祖先元素 */
  top: 0;
  right: 0;
}

.fixed {
  position: fixed; /* 固定定位,相对于浏览器窗口 */
  bottom: 20px;
  right: 20px;
}

.sticky {
  position: sticky; /* 粘性定位,在指定阈值前为相对定位,之后为固定定位 */
  top: 10px;
}

圆角控制,圆,椭圆实现

.rounded {
  border-radius: 10px; /* 普通圆角 */
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 圆形 */
}

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%; /* 椭圆 */
}

hover制作下拉菜单思路

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-content {
  display: block;
}

鼠标变成手型

.clickable {
  cursor: pointer;
}

颜色表示的4种办法

.color-examples {
  color: red; /* 颜色名称 */
  background-color: #00ff00; /* 十六进制 */
  border-color: rgb(0, 0, 255); /* RGB */
  outline-color: rgba(255, 0, 0, 0.5); /* RGBA (带透明度) */
}

CSS优先级如何判断

CSS优先级从高到低:

!important
内联样式
ID选择器
类选择器、属性选择器、伪类
元素选择器、伪元素
通配符选择器

如果优先级相同,后面的规则会覆盖前面的规则。

示例:

#header { color: blue; } /* 优先级高 */
.header { color: red; } /* 优先级低 */

这里#header的优先级更高,因此文本会是蓝色。

Java全栈的牛马

关注

24
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
37个问题快速复习CSS3

CSS (Cascading Style Sheets) 是用于描述HTML或XML文档样式的语言。margin重叠: 当两个垂直外边距相遇时,它们会合并成一个外边距,值为较大的那个。定位用于控制元素在页面上的精确位置。它可以创建复杂的布局,如固定导航栏、悬浮元素等。浮动塌陷是指当容器内所有子元素都浮动时,容器高度塌陷为0。浮动可以使元素脱离正常文档流,实现文字环绕或创建多列布局。浮动元素的起始位置是其在正常文档流中的位置。如果优先级相同,后面的规则会覆盖前面的规则。的优先级更高,因此文本会是蓝色。
复制链接

扫一扫

专栏目录