CSS基本语法，学会基会玩转前端

最新推荐文章于 2025-12-18 17:13:23 发布

原创最新推荐文章于 2025-12-18 17:13:23 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

本文深入讲解CSS的三种引入方式及其优先级，探讨选择器的使用，包括基本选择器、伪对象及动作选择器。详细解析文本样式设置，如对齐、间距、行高、文本修饰等。同时，介绍如何利用CSS实现过渡效果、动画效果及图形变换，为网页设计增添动态美感。

CSS
内联（写在标签属性里面）
嵌入式（用）
外联（来引入css文件）

优先级是就近原则：内联高于嵌入式高于外联

（class可以有多个）用.p调用

（id只能有一个）用#p调用

伪对象

css基本选择器
选择所有元素
style 元素：*{}

根据类型选择元素
style 元素：a{}
body 元素：靠谱学校

根据类选择元素
style 元素：.class1{}
body 元素：

靠谱

根据id选择元素
style元素：#id1{}
body元素：

靠谱

根据属性选择元素
style元素：[herf]{}
body元素：靠谱

选择器动作
style元素：a：hover{}当鼠标经过
body元素：靠谱

创建边框和背景
border属性
background属性
border-radius：10px/10px；（水平半径/垂直半径）

css设置文本样式
text-align：center；居中
direction：rtl；向右靠齐
（rtl和ltr）right to left
letter-spacing：10px；字母间距
word-spacing：10px；单词间距
line-height：10px；行之间的距离（行高）
text-indent：50px；首行缩进
text-decoration：underline；文本修饰
（常用属性underline overline line-through）
text-transform：capitalize；每个单词首字母大写
text-transform：uppercase；所有字母大写
text-transform：lowercase；所有字母小写
font-family：黑体；字体名称
font-size：40px；字体大小
font-style：italic；字体样式斜体
font-variant：small-caps；字体以小型大写字母显示
font-weight：900；字体加粗
text-shadow：1px 10px 10px red；（参数分别是水平偏移，垂直偏移，(模糊程度)，颜色）

css使用过渡
p{
width：100px；（宽）
height：100px；（高）
background-color：antiquewhite；
}
p：hover{（当鼠标指针经过）
width：200px；（宽）
height：200px；（高）
background-color：white；
transition-delay：150ms；（延时）
transition-duration：500ms；（过渡变化时间）
transition-property：background-color；（只有颜色是受前面延时属性控制）
transition-timing-function：ease；（还有ease-in，ease-out，ease-in-out，linear）动画变换速度
}
ease ease-in ease-out ease-in-out

创建动画
p{
width：100px；
height：100px；
background-color：antiquewhite；
}
p：hover{
animation-delay：200ms；
animation-duration：1s；
animation-name：xx；
animation-iteration-count：infinite；（无限循环）
animation-direction：alternate；（第一次正向运行第二次反向运行第三次正向运行…）
}
@keyframes xx{（关键帧）
from{（第一次）
width：100px；
height：100px；
background-color：white；
}
50％{
width：150px；
height：150px；
background-color：yellow；
}
to{（最后一次）
width：200px；
height：200px；
background-color：black；
}
}

使用变换
p{
width：100px；
height：100px；
background-color：antiquewhite；
}
p：hover{
width：100px；
height：100px；
background-color：antiquewhite；
transform：rotate（30deg）；（顺时针以图形中心旋转30度）
transform-origin：top right；（设置旋转中心点）
transform：scale（1.5）；（图形四周缩放比例）
transform：scalex（5）；（只放大x方向）
}

补充：
opacity不透明度
animation-fill-mode：forward；（是动画不会回到最初的样子）