CSS是一种用于描述网页应该如何呈现的样式语言。它包含了一系列的技术,如:选择器p { color: red; } 选择器指定哪些元素应该应用这些样式规则。盒子模型.box { width: 200p
CSS是一种用于描述网页应该如何呈现的样式语言。它包含了一系列的技术,如:
选择器
p { color: red; }
选择器指定哪些元素应该应用这些样式规则。
盒子模型
.box { width: 200px; height: 100px; padding: 10px; border: 1px solid black; margin: 20px; }
盒子模型指定了元素的边框、内边距和外边距,以及它的宽度和高度。
媒体查询
@media screen and (max-width: 600px) { body { font-size: 14px; } }
媒体查询用于指定当网页显示在不同设备上时应用不同的样式。
伪类和伪元素
a:hover { color: blue; } p::first-letter { font-size: 2em; }
伪类用于描述某个元素的特殊状态,如:hover表示当鼠标悬浮在链接上时的状态。伪元素用于描述元素的某个部分,如::first-letter表示文本的第一个字母。
属性选择器
input[type="text"] { width: 200px; }
属性选择器用于选择具有特定属性值的元素,如[type="text"]选择所有的文本输入框。
动画和过渡
.box { transition: width 2s; } .box:hover { width: 300px; }
CSS可以创建动画和过渡效果,如上面的代码表示当鼠标悬浮在盒子上时,盒子的宽度会在2秒内从原来的值过渡到300像素。
粉丝
0
关注
0
收藏
0