常用CSS样式
常用css属性
如果你需要设置小于指定px的设备,比如想单独设置手机样式可以使用如下内容包裹
/* 小于750px的屏幕 */
@media screen and (max-width: 750px)
{
/* 应用于小于750px的屏幕的样式 */
}文字类
设置文字颜色 color: red;
文字禁止选中示例 user-select: none;
设置字体大小 font-size: 30px;
设置文字对齐方向，对元素也可以好像 text-align: center;
设置文字阴影 text-shadow: 5px 5px 5px #ff0000;
设置文字加粗
font-weight: bolder;
设置文字倾斜
font-style: italic;
设置文字高度
line-height: 10px;
取消链接默认下划线
text-decoration: none;
背景类
设置背景颜色 background-color: aquamarine;
设置渐变背景,to bottom 表示渐变的方向，这里表示从上到下。 background: linear-gradient(to top, #f5a623, #508114);
设置背景图片 background-color: aquamarine;
背景自适应高度，且居中示例 background-image: url(?developer/article/2281743/“https:/tp.iu00.cn/2023/04/19/643f975122a5a.gif”); background-repeat: no-repeat; background-size: contain; background-position: center;
背景自适应铺满示例 background-image: url(?developer/article/2281743/“https:/tp.iu00.cn/2023/04/19/643f975122a5a.gif”); background-repeat: no-repeat; background-size: 100% 100%;
边框类
元素边框颜色 border: 1px solid #FF00FF;
设置元素下边框颜色，上边框为border-top，左为border-left border-bottom: 1px solid #FF00FF;
元素边框圆角化示例，需要圆形设为50%即可 border-radius: 5px;
效果类
元素透明度 opacity:30%;
设置动画效果。这里的动画名称为 light，持续时间为 4 秒，使用 ease-in-out 缓动函数，且动画会一直循环播放（infinite）。 animation: light 4s ease-in-out infinite;
元素动画过渡时间 transition: 0.5s;
设置元素的变换效果。其中 scale(1.15) 表示将元素放大 1.15 倍，rotate(720deg) 表示将元素旋转 720 度。 transform: scale(1.15) rotate(720deg);
定位类
整个元素外部空间 margin: 30px;
外边距距离左侧 margin-left: 30px;
垂直居中示例 display: flex; justify-content: center; align-items: center;
左上定位示例 display: flex; justify-content:left; align-items:flex-start;
左下定位示例 display: flex; justify-content:left; align-items:flex-end;
右下定位示例 display: flex; justify-content:right; align-items:flex-end;
右上定位示例 display: flex; justify-content:right; align-items:flex-start;
选择器
鼠标经过元素
:hover {
color: #FF00FF;
}
元素最初状态
:link {
color: #000000;
}
元素被点击时
:active {
color: #0000FF;
}
:元素被点击后
visited {
color: #00FF00;
}伪元素
::before 用于在元素的内容前插入内容，通常用来添加装饰性图案或文字等。
::after 用于在元素的内容后插入内容，也通常用来添加装饰性图案或文字等。
::first-letter 用于选中元素的第一个字母，可以对其应用样式。
::first-line 用于选中元素的第一行，可以对其应用样式。
::selection 用于选中文本时的状态，可以对选中的文本应用样式。