前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >常用CSS样式

常用CSS样式

作者头像
Blank.
发布2023-05-07 21:44:04
1.6K0
发布2023-05-07 21:44:04
举报
文章被收录于专栏:Blank

常用css属性

如果你需要设置小于指定px的设备,比如想单独设置手机样式可以使用如下内容包裹

代码语言:javascript
复制
/* 小于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;


选择器
代码语言:javascript
复制
鼠标经过元素
:hover {
color: #FF00FF;
}
元素最初状态
:link {
color: #000000;
}
元素被点击时
:active {
color: #0000FF;
}
:元素被点击后
visited {
color: #00FF00;
}

伪元素

::before 用于在元素的内容前插入内容,通常用来添加装饰性图案或文字等。

::after 用于在元素的内容后插入内容,也通常用来添加装饰性图案或文字等。

::first-letter 用于选中元素的第一个字母,可以对其应用样式。

::first-line 用于选中元素的第一行,可以对其应用样式。

::selection 用于选中文本时的状态,可以对选中的文本应用样式。


本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 常用css属性
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档