常用样式

Posted zhangpang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了常用样式相关的知识,希望对你有一定的参考价值。

常用样式

1、字体样式

  • font-family:字体族科,多值用于备用,以,隔开

font-family: "STSong", "Arial";
  • font-size:字体大小

  • font-style: 字体风格 normal | italic | oblique

  • font-weight:字体重量 normal | bold | lighter | 100~900

  • line-height:行高

  • font:字重 风格 大小/行高 字族

2、文本样式

  • color:文本颜色

  • text-align:横向排列

left 居左 | center 居中 | right 居右
  • vertical-align:纵向排列

baseline:将支持valign特性的对象的内容与基线对齐 
sub:垂直对齐文本的下标
super:垂直对齐文本的上标
top:将支持valign特性的对象的内容与对象顶端对齐
text-top:将支持valign特性的对象的文本与对象顶端对齐
middle:将支持valign特性的对象的内容与对象中部对齐
bottom:将支持valign特性的对象的文本与对象底端对齐
text-bottom:将支持valign特性的对象的文本与对象顶端对齐
  • text-indent:字体缩减

  • text-decoration:字划线

  • letter-spacing:字间距

  • word-spacing:词间距

  • word-break:自动换行

normal:默认换行规则
break-all:允许在单词内换行

3、背景样式

  • background-color:颜色

  • background-image:图片

background-image: url(bg.png);
  • background-repeat:重复

repeat | no-repeat | repeat-x | repeat-y
  • background-position:定位

top | bottom | left | right | center
  • background-attachment:滚动模式

scroll | fixed
==============================================================================================================================================================

笔记

字体样式:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>字体样式</title>
  <style type="text/css">
  span {
  /*大小*/
  font-size: 30mm;
  /*字重: bold normal lighter 100~900*/
  font-weight: 900;
  /*行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示*/
  line-height: 50mm;
  /*样式: 一般不关心*/
  font-style: normal;
  /*字族:可以自定义字族*/
  /*当Segoe UI Emoji不存在,或不起作用,再选取 微软雅黑 */
  /*备用字族*/
  font-family: "Segoe UI Emoji", "微软雅黑";

  /*css语法: 空格隔开为多个值赋值, ,隔开为一个值多值赋值*/
  font: lighter 50mm/80mm "Segoe UI Emoji", "微软雅黑";
  }
  </style>
</head>
<body>
  <span>123abc呵呵</span>
</body>
</html>

文本样式:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文本样式</title>
  <style type="text/css">
  span {
  /*颜色*/
  color: red;
  /*水平居中方式:left center right*/
  text-align: center;
  /*字划线: underline line-through overline none*/
  text-decoration: overline;
  /*字间距*/
  letter-spacing: 3px;
  /*词间距*/
  word-spacing: 10px;
  }
  a {
  /*应用场景*/
  text-decoration: none;
  }
  div {
  width: 300px;
  /*显示方式*/
  display: inline-block;
  }
  div {
  font-size: 12px;
  /*垂直排列方式: top baseline bottom*/
  vertical-align: baseline;
  /*缩进*/
  text-indent: 2em;
  }
  /*遇到连体的英文,html将其解析为一个单词(作为一个整体)*/
  .div {
  /*按标签的设定宽度强行换行,可以在单词(整体)内部换行*/
  word-break: break-all;
  }
  h1 {
  text-align: center;
  }
  </style>
  </head>
<body>
  <h1>标题</h1>
  <span>123 abc 呵呵</span>
  <!-- <a href="">123</a> -->
  <div>嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈  </div>
  <div>red yellow green big small red yellow green big small red</div>
  <div class="div">abcdefabcdefabc</div>
</body>
</html>

背景样式:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>背景样式</title>
  <style type="text/css">
  div {
  width: 300px;
  height: 300px;
  background-color: red;
  }
  div {
  /*背景图片*/
  background-image: url("data/bg_repeat.gif");
  /*平铺: no-repeat repeat-x repeat*/
  background-repeat: no-repeat;
  /*定位*/
  /*10px == 10px center 设置一个值,第二个值默认为center*/
  /*10px 10px 第一个值控制水平位置,第二个值控制垂直位置*/
  /*background-position: right center;*/

  /*定位相关的涉及到滚动时的效果: scroll fixed*/
  background-attachment: fixed;
  }
  div {
  /*整体设置*/
  background: url("data/bg_repeat.gif") 10px 10px no-repeat red;
  }
</style>
</head>
<body>

  <div><div/>

  br*100

<body/>

<html/>



















































































































以上是关于常用样式的主要内容,如果未能解决你的问题,请参考以下文章

常用python日期日志获取内容循环的代码片段

swift常用代码片段

# Java 常用代码片段

# Java 常用代码片段

IOS开发-OC学习-常用功能代码片段整理

21个常用代码片段