• 在线客服

  • 扫描二维码
    下载博学谷APP

  • 扫描二维码
    关注博学谷微信公众号

  • 意见反馈

原创 CSS常用样式属性有哪些?代码怎么写?

发布时间:2021-12-08 13:52:18 浏览 2731 来源:博学谷 作者:小谷

    CSS常用样式属性有哪些?CSS样式属性有两种分别是局常用样式属性和文本常用样式属性,CSS的作用是美化HTML网页和控制页面布局,我们需要掌握这两种常用的样式属性来美化页面。接下来一起学习下经常使用的样式属性。

    CSS常用样式属性有哪些

    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、布局常用样式属性示例代码布局常用样式属性

    布局常用样式属性1

    4、文本常用样式属性示例文本常用样式属性示例

    CSS样式属性小结:设置不同的样式属性会呈现不同网页的显示效果,样式属性的表现形式是:属性名:属性值。

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: CSS引入方式有几种?怎么使用? 下一篇: CSS显示特性display属性的使用介绍

相关推荐 更多

热门文章

  • 前端是什么
  • 前端开发的工作职责
  • 前端开发需要会什么?先掌握这三大核心关键技术
  • 前端开发的工作方向有哪些?
  • 简历加分-4步写出HR想要的简历
  • 程序员如何突击面试?两大招带你拿下面试官
  • 程序员面试技巧
  • 架构师的厉害之处竟然是这……
  • 架构师书籍推荐
  • 懂了这些,才能成为架构师
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码