在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
CSS常用样式属性有哪些?CSS样式属性有两种分别是局常用样式属性和文本常用样式属性,CSS的作用是美化HTML网页和控制页面布局,我们需要掌握这两种常用的样式属性来美化页面。接下来一起学习下经常使用的样式属性。
1、布局常用样式属性
•width设置元素(标签)的宽度,如:width:100px;
•height设置元素(标签)的高度,如:height:200px;
•background设置元素背景色或者背景图片,如:background:gold;设置元素的背景色,background:url(images/logo.png);设置元素的背景图片。
•border设置元素四周的边框,如:border:1pxsolidblack;设置元素四周边框是1像素宽的黑色实线
•以上也可以拆分成四个边的写法,分别设置四个边的:
•border-top设置顶边边框,如:border-top:10pxsolidred;
•border-left设置左边边框,如:border-left:10pxsolidblue;
•border-right设置右边边框,如:border-right:10pxsolidgreen;
•border-bottom设置底边边框,如:border-bottom:10pxsolidpink;
•padding设置元素包含的内容和元素边框的距离,也叫内边距,如padding:20px;padding是同时设置4个边的,也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
•margin设置元素和外界的距离,也叫外边距,如margin:20px;margin是同时设置4个边的,也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
•float设置元素浮动,浮动可以让块元素排列在一行,浮动分为左浮动:float:left;右浮动:float:right;
2、文本常用样式属性
•color设置文字的颜色,如:color:red;
•font-size设置文字的大小,如:font-size:12px;
•font-family设置文字的字体,如:font-family:'微软雅黑';为了避免中文字不兼容,一般写成:font-family:'MicrosoftYahei';
•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
3、布局常用样式属性示例代码
4、文本常用样式属性示例
CSS样式属性小结:设置不同的样式属性会呈现不同网页的显示效果,样式属性的表现形式是:属性名:属性值。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
Python科学计算教程 理论结合实践
科学计算因为Python出色的特性而选择了它。本教程将介绍Python科学计算的相关基础知识,并给大家推荐一本的书籍,让大家在丰富的实践案例中,得出学习经验和教训。
5938
2019-09-04 11:06:37
如何自学python?有好的建议吗?
自学的是一个节约成本的投资,能够按照自己设定的学习计划进行学习,时间安排也比较自由。可是自学需要强大的自制力,需要耐得住寂寞,每天固定的坚持学习,但是遇到技术难点很容易做牛角尖,导致半途而废。如何自学python?有好的建议吗?让我给大家说一说自学前大概做得准备吧!
6618
2020-01-13 15:56:28
学Python编程能做什么工作?从事什么岗位?
随着人工智能发展,学习python语言的人员有更多的岗位机会,python从事的职业广泛,从游戏到AI人工智能能都可以用Python实现。除了编程,各种岗位的人都应该学python编程,python编程会大大的提高工作效率。
5338
2020-12-15 13:59:06
多任务版静态Web服务器程序怎么写?
多任务版静态Web服务器程序怎么写?在Web服务器不支持多用户同时访问时,只能一个一个的处理客户端的请求,而多任务版的web服务器可以同时处理多个客户端的请求,使用多线程比进程更加节省内存资源。
3027
2021-12-22 09:54:44
jQuery选择集转移怎么操作?如何写代码?
jQuery选择集转移怎么操作?如何写代码?选择集是通过$()方法获取到的所有标签的集合。选择集转移以选择的标签为参照获取转移后的标签。
3068
2022-01-04 16:17:09