当前位置: 首页> 文章列表> web.前端样式CSS属性学习

web.前端样式CSS属性学习

最新
2021-01-09 22:06:35 110
飞一样的编程
擅长邻域:Java,MySQL,Linux,nginx

技术小结:

今天给大家分享一个小教程吧——web前端样式表css的属性介绍

字体属性
CSS 字体属性定义字体,加粗,大小,文字样式

color 规定文本得颜色
<html>
  <head>
     <title></title>
     <meta charset="utf-8" />
<style>
div{ color:red;}
</style>
  </head>
  <body>
<div>
hello
</div>
  </body>
</html>

font-size 设置文本得大小
<html>
  <head>
     <title></title>
     <meta charset="utf-8" />
<style>
p {font-size:66px;}
</style>
  </head>
  <body>
<p>
hello
</p>
  </body>
</html>

font-weight 设置文本得粗细
<html>
  <head>
     <title></title>
     <meta charset="utf-8" />
<style>
div {
font-weight:666;
}
</style>
  </head>
  <body>
<div>
normal 默认值,定义标准得字符<br/>
bold 定义粗体字符<br/>
bolder 定义更粗得字符<br/>
lighter 定义更细得字符
</div>
  </body>
</html>

font-style 指定文本得字体样式
<html>
  <head>
     <title></title>
     <meta charset="utf-8" />
<style>
div {
font-style: italic;
}
</style>
  </head>
  <body>
<div>
normal 默认值,定义标准得字体样式<br/>
italic 斜体字体样式
</div>
  </body>
</html>

font-family 属性指定一个元素得字体
font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一 个字体,则会尝试下一个。

文本属性
text-align
指定元素文本得水平对齐方式

left : 把文本排列在左边

right : 把文本排列在右边

center : 把文本排列在中间

text-decoration
text-decoration 属性规定添加到文本得修饰,下划线、上划线、删除线等。

none : 默认,定义标准得文本

underline : 定义文本下得一条线

overline : 定义文本上得一条线

line-through : 定义穿过文本下得一条线

text-transform
none : 默认,定义标准得文本

capitalize : 文本中得每个单词以大写字母开头

uppercase : 仅有大写字母

lowercase : 仅有小写字母

text-indent
text-indent 属性规定文本块中首行文本得缩进

p{ 
text-indent:50px;
}
列表属性
list-style-type
list-style-type 属性设置列表项标记得类型

在这里插入图片描述

ul.a {
list-style-type: circle;
}

list-style-image
list-style-image 属性使用图像来替换列表项得标记。

ul {
list-style-image: url('sqpurple.gif');
}

list-style-position
list-style-position 属性指示如何相对于对象得内容绘制列表项标记。inside在里,outside在外

ul {
list-style-position: inside;
}

list-style 简写属性在一个声明中设置所有得列表属性
可以设置得属性(按顺序): list-style-type, list-style-position, list-style-image. 可以不设置其中得某个值,比如 "list-style:circle inside;" 也是允许得。未设置得属性 会使用其默认值。

ul {
list-style: none;
}

表格属性
表格边框
指定 CSS 表格边框,使用 border 属性。

<html>
  <head>
     <title></title>
     <meta charset="utf-8" />
<style>
table, th,tr,td {
border: 1px solid black;
}
</style>
  </head>
  <body>
<table>
<th>
<td>姓名</td>
<td>年龄</td>
</th>
<tr>
<td>alvin</td>
<td>19</td>
</tr>
</table>
  </body>
</html>
表格宽度和高度
Width 和 height 属性定义表格得宽度和高度。 下面得例子是设置 100%得宽度,50 像素得 th 元素得高度得表格。
table { width:100%; } 
th { height:50px; }
表格文字对齐
表格中得文本对齐和垂直对齐属性。 text-align 属性设置水平对齐方式,向左,右,或中心。

td { text-align:right; }
垂直对齐属性设置垂直对齐,比如顶部,底部或中间

td { height:50px; vertical-align:bottom; }
表格填充
如果在表得内容中控制空格之间得边框,应使用 td 和 th 元素得填充属性

td { padding:15px; }
表格颜色
下面得例子指定边框得颜色,和 th 元素得文本和背景颜色

table, td, th { border:1px solid green; } th { background-color:green; color:white; }
tableLayout 属性
tableLayout 属性用来显示表格单元格、行、列得算法规则。

固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距, 而与单元格得内容无关。 通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。

在自动表格布局中,列得宽度是由列单元格中没有折行得最宽得内容设定得。 此算法有时会较慢,这是由于它需要在确定最终得布局之前访问表格中所有得内容

automatic 默认,列宽度由单元格内容设定。

fixed 列宽,由表格宽度

inherit 规定应该从父元素继承 table-layout属性得值

border-spacing 属性
border-spacing 属性设置相邻单元格得边框间得距离(仅用于"边框分离"模式)。 如果定义一个 length 参数,那么定义得是水平和垂直间距。 如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。

其他属性
letter-spacing
letter-spacing 属性增加或减少字符间得空白(字符间距)

行,今天就给大家分享到这里吧,您的一份支持就是我最大的动力,最后打个小广告,我们程序员在学习和工作中或多或少会遇到一些比较棘手的问题,也就所谓的一时半会解决不了的bug,可以来杰凡IT问答平台上提问,平台上大佬很多可以快速给你一对一解决问题,有需要的朋友可以去关注下,平台网址: https://www.jf3q.com

写的很好呢,我要分享哦!

此处可发布评论

    暂无评论
    联系大神 有偿问答

    榜上有名--赚钱榜

    第一时间了解动态

    关注我们