2. css基本样式

背景
文本
字体
链接
列表
表格
轮廓

1. 背景

说明：css允许应用纯色作为背景，也允许使用背景图片创建相当复杂的效果。主要的背景属性如下

属性	描述
background-attachment	背景图片是否固定或者随着页面的其它部分滚动
background-color	设置元素的背景颜色
background-image	把图片设置为背景
background-position	设置图片背景的起始位置
background-repeat	设置背景是否以及如何重复
background-size	规定背景图片的尺寸
background-origin	规定背景图片的定位区域
background-clip	规定背景的绘制区域

(1) background

body{
  background: darkgray;
}

p{
  background: greenyellow;
  width: 200px;
  padding: 10px;
}

<body>
  <p>当元素未指定背景颜色时，背景颜色不可被继承；当指定时，采用自身定义的背景颜色</p>
</body>

拓展：小程序中背景颜色可以被继承且p便签的宽度默认会包裹自身，p标签设置宽度不起作用；html中背景颜色不可被继承且p便签的宽度默认会超出自身需自定义宽度。
(2) background-image

body{
  background-image: url("icon_nav_study.png");
}

或

p{
  background-image: url("icon_nav_study.png");
  width: 200px;
}

<body>
  <p>当元素未指定背景颜色时，背景图片不可被继承</p>
</body>

拓展：小程序的本地资源无法通过 WXSS 获取。background-image可以使用网络图片，或者 base64，或者使用<image/>标签
(3) background-repeat
说明：默认允许重复铺满全屏。可设置为不允许重复；允许重复且铺满全屏；允许在X轴重复铺满；允许在Y轴重复铺满。

background-repeat.PNG

(4) background-position
eg1:

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-position: right;
}

等同于

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-position: right center;
}

说明：第一个参数代表图片在视图的右边，第二个参数代表图片从自身中间(默认)显示。
eg2:数值

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

说明：图片在视图左上角位置。

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-position: 100px 100px;
}

说明：图片左边距视图100px的距离，上边距视图100px的距离。
eg2:百分比

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-position: 30% 50%;
}

说明：图片左边距视图宽30%的距离，上边距视图高50%的距离。
(5) background-attachment

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

<body>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
  <p>图片背景是否随内容滚动</p>
</body>

说明：默认图片背景随内容滚动。
(6) background-size

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-size: 500px 500px;
}

说明：设置背景图片大小为500px * 500px。
(7) background-clip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景相关属性</title>
    <style>
        div{
            background-color: #FF8C00;
            border: dashed 10px green;
            padding: 10px;
        }
        .div1{
            background-clip: content-box;/*背景只覆盖内容区域*/
        }
        .div2{
            margin-top: 40px;
            background-clip: padding-box; /*背景覆盖内容区域和内边距*/
        }
        .div3{
            margin-top: 40px;
            background-clip: border-box;/*背景覆盖内容区域、内边距和边框*/
        }
    </style>
</head>
<body>
    <div class="div1">示例1</div>
    <div class="div2">示例2</div>
    <div class="div3">示例3</div>
</body>
</html>

background-clip.png

(8) background-origin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景相关属性</title>
    <style>
        div{
            background-color: #FF8C00;
            border: dashed 10px green;
            padding: 10px;
            background-image: url("jokul.jpg");
            background-repeat: no-repeat;
        }
        .div1{
            background-clip: content-box;/*背景只覆盖内容区域*/
            background-origin: content-box;/*背景图片从内容区域左上角开始*/
        }
        .div2{
            margin-top: 40px;
            background-clip: padding-box; /*背景覆盖内容区域和内边距*/
            background-origin: padding-box;/*背景图片从内边距左上角开始*/
        }
        .div3{
            margin-top: 40px;
            background-clip: border-box;/*背景覆盖内容区域、内边距和边框*/
            background-origin: border-box;/*背景图片从边框左上角开始*/
        }
    </style>
</head>
<body>
    <div class="div1">示例1</div>
    <div class="div2">示例2</div>
    <div class="div3">示例3</div>
</body>
</html>

background-origin.png

示例：在一个元素中显示多个背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在一个元素中显示多个背景图片</title>
    <style>
        div{
            width: 350px;
            height: 200px;
            background-image: url("../img/11.png"),url("../img/crab.png");/*设置多个背景图片*/
            background-repeat: repeat-x,no-repeat;/*第一张在x轴重复，第二张不重复*/
            background-position: 100%,100%,center,center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

多个背景图片.png

2. 文本

说明：css文本属性定义文本外观，可改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进等。常用的属性有文本的颜色、对齐方式、对文本缩进。

属性	描述
color	设置文本颜色
direction	设置文本方向
line-height	设置行高
text-align	设置元素中文本的水平对齐方式
text-decoration	规定添加到文本的修饰
text-indent	设置文本首行缩进
text-transform	设置文本的大小写
unicode-bidi	设置文本方向
white-space	设置元素中空白的处理方式
letter-spacing	设置字符间距
word-spacing	设置字间距
word-wrap	规定文本的换行规则
text-shadow	向文本添加阴影

(1) color

body{
  color: red;
}
h1{
   color: blue;
}

<body>
  <p>颜色可被继承</p>
  <h1>采用元素指定颜色</h1>
</body>

(2) text-aligen : 左中右

p{
  color: red;
  text-align: center;
}

<body>
  <p>对齐方式</p>
</body>

说明：小程序中p标签设置对齐方式未起作用。
(3) text-indent
eg1:数值

h1{
  text-indent:  -2em;
  padding-left: 2em
}

p{
  padding-left: 2em
}

<body>
  <div>
    <h1>标题</h1>
    <p>文本</p>
    <p>文本</p>
    <p>文本</p>
    <p>文本</p>
  </div>
</body>

eg2:百分比

h1{
  text-indent:  10%;
}

(4) text-transform：元素中字母的处理

#p1{
  text-transform: capitalize;
}
#p2{
  text-transform: lowercase;
}
#p3{
  text-transform: uppercase;
}

<body>
  <p id="p1">tHis iS my pagE</p>
  <p id="p2">thIs Is mY pAGe</p>
  <p id="p3">this Is mY pAGe</p>
</body>

说明：capitalize表示首字母大写。
(5) text-shadow:为文本添加阴影
eg1：基本使用

p{
  text-shadow: 20px,20px,2px,#FF0000;
  color: black;
  font-size: 40px;
  font-weight: bold;
  font-family: 宋体;
}

<body>
  <p>阴影效果</p>
</body>

说明：text-shadow: length,length,length,color;第一个参数为阴影距当前文本左边的距离(阴影离开文字横向的距离)，第二个参数为阴影距当前文本上边的距离(阴影离开文字纵向的距离)，第三个参数为浮雕效果的清晰度(阴影模糊程度)，第四个参数为阴影颜色。
eg2：可设置多重阴影效果

text{
  text-shadow: -10px -10px 1px red,
                10px 10px 3px green,
                25px 25px 1px blue,
                45px 45px 5px yellow;
  color: black;
  font-size: 40px;
  font-weight: bold;
  font-family: 宋体;
}

<view>
  <text>为文字添加阴影</text>
</view>

(6) 文本换行

word-wrap：规定文本的换行规则

p{
  width: 50px;
  word-wrap: normal;
}

<body>
  <p>这是测试换行这是测试换行这是测试换行这是测试换行这是测试换行</p>
  <p>This is a test This is a test This is a test This is a test This is a test</p>
</body>

说明：英文单词换行时不会被拆分，能够保证单词的完整性。

word-break：文本自动换行
normal：使用浏览器的自动换行规则
keep-all：只能在半角、空格和连字符处进行换行
break-all：强制换行，英文将被拆分

3. 字体

说明：css字体属性定义文本的字体系列、字体、大小、加粗、风格和变形。

属性	描述
font-family	设置字体系列
font-size	设置字体尺寸
font-style	设置字体风格
font-variant	以小型大写字体或正常字体显示文字
font-weight	设置字体粗细

p{
  font-family: fantasy;
  font-size: 40px;
}

<body>
  <p>字体属性设置</p>
</body>

注意：虽然css3已经突破了安全字体的限制（通过@font-face的方式来引入一个字体），但是在实际开发的过程中还是会出现各种各样的问题，所有尽量仍使用计算机系统自带的十几种安全字体，其他字体需慎重使用。
(1) 引入一个字体并调用(如使用服务器端字体)

@font-face{
  font-family: myfont;
  src: url("服务器端的字体地址")format("truetype");
}

text{
  font-family: myfont;
}

说明：url("")括号内为服务器端的字体地址(字体上传到服务器上，用户在使用时会自动下载下来)。
备注：字体文件拓展名为ttf则src: url()format("truetype");；字体文件拓展名为otf则src: url()format("opentype");。
优化：客户端有Arial字体则直接加载客户端Arial字体，没有则从服务器加载并使用服务器端字体。

@font-face{
  font-family: myfont;
  src: local("Arial"),
       url("服务器端的字体地址");
}

text{
  font-family: myfont;
}

(2) 修改文字种类而保持字体尺寸不变
说明：文字的样式不同字体的大小将会发生变化，可使用 font-size-adjust属性来使字体尺寸不变。

<view>
  <text id='text1'>字体样式1</text>
</view>
<view>
  <text id='text2'>字体样式2</text>
</view>
<view>
  <text id='text3'>字体样式3</text>
</view>

#text1{
  font-family: monospace;
  font-size: 16px;
  font-size-adjust: 0.58;
}
#text2{
  font-family: cursive;
  font-size: 16px;
  font-size-adjust: 0.6;
}
#text3{
  font-family: fantasy;
  font-size: 16px;
  font-size-adjust: 0.78;
}

备注：可通过不断尝试调节font-size-adjust: aspect;中aspect的数值来使各种样式的字体尺寸操持一致；更为精细的aspect数值的获取可通过高度和尺寸计算得出，如：x-height:58 font-size:100px aspect=0.58。浏览器中的计算公式为：c=(a/b)*s，a为实际使用的字体的aspect值，b为修改前字体的aspect值，s为当前字体的尺寸，c为浏览器实际显示的字体尺寸。

4. 链接

<body>
  <a href="http://baidu.com">百度</a>
</body>

说明：小程序不起作用，需改成对应的标签、属性和语法。
(1) css链接的四种状态:通过如下的4种属性来设置对应的4种状态

a:link ：普通的、未被访问的链接状态
a:hover ：鼠标指针位于链接上方的状态
a:active ：链接被点击时的状态
a:visited ：用户已访问过的链接状态

a:link{
  color: red;
}
a:hover{
  color: yellow;
}
a:active{
  color: blue;
}
a:visited{
  color: green;
}

<body>
  <a href="http://baidu.com">百度</a>
</body>

(2) 常见的链接方式: text-decoration属性常用于去除链接下划线

a:link{
  color: red;
  text-decoration: none;
}

(3) 背景颜色:background-color

a:link{
  color: red;
  text-decoration: none;
  background-color: blueviolet
}

5. 列表

说明：css列表属性运行放置、改变列表(ul)标志，或者将图像作为列表项(li)标志。默认列表项标志是一个原点。

<body>
  <ul>
    <li>酸</li>
    <li>甜</li>
    <li>苦</li>
    <li>辣</li>
    <li>咸</li>
  </ul>
</body>

属性	描述
list-style	简写列表项
list-style-image	列表项图像
list-style-position	列表标志位置
list-style-type	列表类型

(1) list-style-type:修改列表项标志为空心圆

ul li{
  list-style-type: circle;
}

(2) list-style-image:修改列表项标志为本地图片

ul li{
  list-style-image: url("vcode.gif");
}

(3) list-style-position

.ul1{
  list-style-position: inside;
}
.ul2{
  list-style-position: outside;
}
ul li{
  list-style-type: circle;
}

<body>
  <p>列表1效果</p>
  <ul class="ul1">
    <li>酸</li>
    <li>甜</li>
    <li>苦</li>
    <li>辣</li>
    <li>咸</li>
  </ul>
  
  <p>列表2效果</p>
  <ul class="ul2">
    <li>酸</li>
    <li>甜</li>
    <li>苦</li>
    <li>辣</li>
    <li>咸</li>
  </ul>
</body>

6. 表格

说明：css表格属性帮助改善表格的外观。主要属性有

表格边框：border
折叠边框： border-collapse
表格宽高：width & height
表格文本对齐： text-align
表格内边距：padding
表格颜色：color & background-color
说明： color 为字体颜色，background-color 为背景颜色。

#tb,tr,th,td{
  border: 1px solid blue;
  text-align: center;
  padding: 5px;
  color: white;
  background-color: greenyellow;
}

#tb{
  border-collapse: collapse;
  width: 400px;
  height: 400px;
}

<body>
  <table id="tb">
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>小李</td>
      <td>男</td>
      <td>20</td>
    </tr>
    <tr>
      <td>小李</td>
      <td>男</td>
      <td>20</td>
    </tr>
    <tr>
      <td>小李</td>
      <td>男</td>
      <td>20</td>
    </tr>
  </table>
</body>

优化:

#tb{
  border-collapse: collapse;
  width: 500px;
}

#tb th,#tb td{
  border: 1px solid bisque;
  padding: 5px;
}

#tb th{
  text-align: center;
  color: white;
  background-color: aqua;
}

#tb tr.alt td{
  color: black;
  background-color: aquamarine;
}

<body>
  <table id="tb">
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>小李</td>
      <td>男</td>
      <td>20</td>
    </tr>
    <tr class="alt">
      <td>小李</td>
      <td>男</td>
      <td>20</td>
    </tr>
    <tr>
      <td>小李</td>
      <td>男</td>
      <td>20</td>
    </tr>
  </table>
</body>

7. 轮廓

说明：css的轮廓属性主要用于突出元素的作用。加粗和斜体也有突出元素效果的作用。

属性	描述
outline	设置轮廓属性
outline-color	设置轮廓颜色
outline-style	设置轮廓样式
outline-width	设置轮廓宽度

p{
  outline-color: greenyellow;
   outline-style: dotted;
  outline-width: 1px;
}

<body>
  <p>文本突出效果</p>
</body>

最后编辑于：2019.09.29 16:23:09

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,539评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,911评论 3赞 391
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 161,337评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,723评论 1赞 290
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,795评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,762评论 1赞 294
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,742评论 3赞 416
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,508评论 0赞 271
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,954评论 1赞 308
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,247评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,404评论 1赞 345
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,104评论 5赞 340
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,736评论 3赞 324
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,352评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,557评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,371评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,292评论 2赞 352