css中常用的规则样式

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS(层叠样式表)是用于控制网页样式和布局的语言。以下是CSS中常用的规则样式。/*文本格式*/ color: red; /* 字体颜色 */ font-size: 16px; /* 字体大小 */

CSS(层叠样式表)是用于控制网页样式和布局的语言。以下是CSS中常用的规则样式。

/*文本格式*/
color: red; /* 字体颜色 */
font-size: 16px; /* 字体大小 */
font-family: Arial, sans-serif; /* 字体族 */
font-weight: bold; /* 加粗 */
text-align: center; /* 对齐方式 */
text-decoration: underline; /* 下划线 */

/*盒模型*/
width: 300px; /* 盒子宽 */
height: 200px; /* 盒子高 */
padding: 20px; /* 内边距 */
margin: 30px; /* 外边距 */
box-sizing: border-box; /* 边框盒模型(大小包括边框和内边距) */

/*背景*/
background-color: #eee; /* 背景颜色 */
background-image: url("paper.jpg"); /* 背景图片 */
background-repeat: repeat-x; /* 重复方式 */
background-size: cover; /* 大小 */

/*边框*/
border-width: 2px; /* 边框宽度 */
border-style: dotted; /* 边框样式 */
border-color: green; /* 边框颜色 */
border-radius: 10px; /* 圆角 */

/*浮动*/
float: left; /* 向左浮动 */
clear: both; /* 清除浮动 */

/*定位*/
position: absolute; /* 绝对定位 */
top: 100px; /* 顶部距离 */
left: 200px; /* 左侧距离 */

/*鼠标悬停*/
:hover {
    color: blue; /* 字体颜色 */
    background-color: yellow; /* 背景颜色 */
}

/*响应式布局*/
@media screen and (max-width: 768px) {
    /* 在宽度小于768px时应用以下样式 */
    /*...*/
} 

以上是CSS中常用的规则样式,它们可以帮助你设计出优美的网页布局。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中常用的规则样式

粉丝

0

关注

0

收藏

0

已有0次打赏