- 什么是 CSS？它的作用是什么？
CSS（层叠样式表）是一种用于描述网页样式的语言。它的作用是控制网页的布局、字体、颜色、背景等方面的样式。
- 如何在 HTML 页面中引入 CSS？
可以使用 标签将 CSS 文件引入到 HTML 页面中。例如：
<link rel="stylesheet" href="styles.css">
- 什么是选择器？如何使用选择器来匹配 HTML 元素？
选择器是一种用于选择 HTML 元素的模式。可以使用标签名、类名、ID 等属性来匹配 HTML 元素。例如：
h1 {
color: red; } // 选择所有的 <h1> 元素并将它们的颜色设置为红色
.my-class {
font-size: 16px; } // 选择所有 class 属性为 "my-class" 的元素，并将它们的字体大小设置为 16px
#my-id {
background-color: yellow; } // 选择 ID 属性为 "my-id" 的元素，并将它们的背景色设置为黄色
- 什么是 CSS 盒模型？如何计算盒模型的宽度和高度？
CSS 盒模型是一种用于描述 HTML 元素的尺寸和布局的模型。它由四个部分组成：内容区域、内边距、边框和外边距。盒模型的宽度和高度可以通过计算内容区域、内边距、边框和外边距的值来得到。
- 如何设置 CSS 盒模型的尺寸？
可以使用 width 和 height 属性来设置盒模型的尺寸。例如：
div {
width: 100px;
height: 50px;
}
- 如何设置 CSS 盒模型的边框？
可以使用 border 属性来设置盒模型的边框。例如：
div {
border: 1px solid black;
}
- 如何设置 CSS 盒模型的内边距和外边距？
可以使用 padding 和 margin 属性来设置盒模型的内边距和外边距。例如：
div {
padding: 10px;
margin: 20px;
}
- 如何设置 CSS 盒模型的背景颜色和背景图片？
可以使用 background-color 和 background-image 属性来设置盒模型的背景颜色和背景图片。例如：
div {
background-color: yellow;
background-image: url("background.jpg");
}
- 如何设置 CSS 文本的颜色、字体和大小？
可以使用 color、font-family 和 font-size 属性来设置文本的颜色、字体和大小。例如：
p {
color: blue;
font-family: Arial, sans-serif;
font-size: 16px;
}
- 如何设置 CSS 文本的对齐方式？
可以使用 text-align 属性来设置文本的对齐方式。例如：
p {
text-align: center;
}
- 如何设置 CSS 文本的行高和字间距？
可以使用 line-height 和 letter-spacing 属性来设置文本的行高和字间距。例如：
p {
line-height: 1.5;
letter-spacing: 2px;
}
- 如何设置 CSS 列表的样式？
可以使用 list-style-type 和 list-style-image 属性来设置列表的样式。例如：
ul {
list-style-type: square;
list-style-image: url("bullet.png");
}
- 如何设置 CSS 超链接的样式？
可以使用 a 标签和相关的伪类来设置超链接的样式。例如：
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
- 如何设置 CSS 图片的样式？
可以使用 img 标签和相关的属性来设置图片的样式。例如：
img {
border: 1px solid black;
width: 100px;
height: 100px;
}
- 如何设置 CSS 表格的样式？
可以使用 table、tr、td 等标签和相关的属性来设置表格的样式。例如：
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 5px;
}
- 如何设置 CSS 浮动和清除浮动？
可以使用 float 和 clear 属性来设置浮动和清除浮动。例如：
.float-left {
float: left;
}
.float-right {
float: right;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
- 如何设置 CSS 定位？
可以使用 position、top、bottom、left 和 right 属性来设置定位。例如：
div {
position: absolute;
top: 50px;
left: 50px;
}
- 如何设置 CSS 动画？
可以使用 @keyframes 规则和 animation 属性来设置 CSS 动画。例如：
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
div {
animation: rotate 2s linear infinite;
}
- 如何设置 CSS 媒体查询？
可以使用 @media 规则来设置 CSS 媒体查询。例如：
@media (min-width: 768px) {
body {
font-size: 16px;
}
}
- 如何设置 CSS 伸缩盒子布局？
可以使用 display、flex、flex-direction、justify-content 和 align-items 属性来设置伸缩盒子布局。例如：
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
- 如何设置 CSS 网格布局？
可以使用 display、grid-template-columns、grid-template-rows 和 grid-gap 属性来设置网格布局。例如：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 10px;
}
- 如何设置 CSS 变量？
可以使用 --var-name 语法来定义 CSS 变量，使用 var(–var-name) 语法来引用 CSS 变量。例如：
:root {
--primary-color: blue;
--secondary-color: green;
}
div {
color: var(--primary-color);
background-color: var(--secondary-color);
}
- 如何设置 CSS 滤镜效果？
可以使用 filter 属性来设置 CSS 滤镜效果。例如：
img {
filter: grayscale(100%);
}
- 如何设置 CSS 模糊效果？
可以使用 backdrop-filter 属性来设置 CSS 模糊效果。例如：
div {
backdrop-filter: blur(5px);
}
- 如何设置 CSS 框阴影效果？
可以使用 box-shadow 属性来设置 CSS 框阴影效果。例如：
div {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
- 如何设置 CSS 文字阴影效果？
可以使用 text-shadow 属性来设置 CSS 文字阴影效果。例如：
h1 {
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
- 如何设置 CSS 透明度？
可以使用 opacity 属性来设置 CSS 透明度。例如：
div {
opacity: 0.5;
}
- 如何设置 CSS 混合模式？
可以使用 mix-blend-mode 属性来设置 CSS 混合模式。例如：
div {
mix-blend-mode: multiply;
}
- 如何设置 CSS 3D 变换？
可以使用 transform 属性和相关的 3D 变换函数来设置 CSS 3D 变换。例如：
div {
transform: perspective(1000px) rotateX(45deg) rotateY(45deg);
}
- 如何设置 CSS 自定义光标？
可以使用 cursor 属性和相关的自定义光标值来设置 CSS 自定义光标。例如：
div {
cursor: url("custom-cursor.png"), auto;
}