- 什么是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的优先级更高,因此文本会是蓝色。
