常用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(“https://tp.iu00.cn/2023/04/19/643f975122a5a.gif”); background-repeat: no-repeat; background-size: contain; background-position: center;

背景自适应铺满示例 background-image: url(“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 用于选中文本时的状态，可以对选中的文本应用样式。