css样式集
css样式
# 设置边框有阴影(立体感)
width: 200px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
# 让元素居中对齐,并具有换行效果
margin-left: 5%;
margin-top: 1%;
height: 10vh;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/* width: 51%; */
/* align-content: space-around; */
# 相对定位
.relative-box {
position: relative;
top: 20px;
left: 30px;
background-color: red;
width: 200px;
height: 100px;
}
# 固定定位
.fixed-box {
position: fixed;
top: 0;
right: 0;
background-color: lightcoral;
width: 150px;
height: 80px;
}
# 布局常用样式属性
width 设置元素(标签)的宽度,如:width:100px;
height 设置元素(标签)的高度,如:height:200px;
background 设置元素背景色或者背景图片,如:
background:gold; 设置元素的背景色,
background: url(images/logo.png); 设置元素的背景图片-图片来源于本地。
background-image : url("图片地址"); 设置元素的背景图片-图片来源于url
border 设置元素四周的边框,如:border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
以上也可以拆分成四个边的写法,分别设置四个边的:
border-top 设置顶边边框,如:border-top:10px solid red;
border-left 设置左边边框,如:border-left:10px solid blue;
border-right 设置右边边框,如:border-right:10px solid green;
border-bottom 设置底边边框,如:border-bottom:10px solid pink;
# 文本常用样式属性
color 设置文字的颜色,如: color:red;
font-size 设置文字的大小,如:font-size:12px;
font-family 设置文字的字体,如:font-family:'微软雅黑';为了避免中文字不兼容,
一般写成:font-family:'Microsoft Yahei';
font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高,如:line-height:24px; 表示文字高度加上文字上下的间距是24px,
也就是每一行占有的高度是24px
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。
文章标题:css样式集
本文作者:伟生
发布时间:2024-08-25, 22:01:12
最后更新:2024-08-25, 22:23:17
原始链接:http://yoursite.com/2024/08/25/qianduan_10_css/版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。