CSS3基础

作者: 瑟闻风倾 | 来源:发表于2019-05-29 15:50 被阅读1次

CSS3 属性/transition、animation 配合J
1 CSS3 基础认知、选择器
CSS3笔记
前端入门css3
《图解CSS3》学习记录（01-概述）
2019-06-03
前端需要掌握的技术
CSS3学习(一）：什么是CSS3
H5新增 input 标签属性选择器结构伪类选择器
前端基础搬运工-H5C3模块

1. css入门基础知识

1.1 介绍及语法

介绍：css指层叠样式表，用来定义样式，使用css样式表极大地提高了工作效率。
(1) css基础语法

selector{
        property : value
}

说明：多个属性之间用分号隔开；属性值为多个单词时需加引号。

元素选择器：根据元素便签进行使用

h1{
  color: red;
  font-size: 14px;
  font-family: sans-serif;
}
p{
  color: green;
}

<body>
  <h1>css基础语法</h1>
  <p>单独设置元素样式</p>
</body>

说明：p元素、a元素等等都可单独设置其样式。
(2) css高级语法

选择器分组：为多个元素设置同一个样式

h1,h2,h3,h4,h5,h6,a{
  color: red;
  font-family: sans-serif;
}

<body>
  <h1>css高级语法</h1>
  <h2>为多个元素设置同一个样式</h2>
</body>

通配符*：标签未指定样式时都将使用通配符定义的的样式（通配符常用来设置内外边距为0px，需要为元素单独设置该属性时可覆盖）。如

*{
  color: gray;
  margin: 0px;
  padding: 0px;
}
h1,h2,h3,h4,h5,h6,a{
  color: red;
  font-family: sans-serif;
}
p{
  margin: 10px;
}

<body>
  <h1>通配符</h1>
  <p>标签首先使用通配符的样式，自身定义的样式会覆盖通配符的样式</p>
</body>

继承：子元素未被设置样式时，采用父元素定义的样式

body{
  color: green;
}
h1{
  color: red;
  font-size: 14px;
  font-family: sans-serif;
}

<body>
  <h1>子元素被设置样式，采用自身样式</h1>
  <h2>子元素未被设置样式时，采用父元素定义的样式</h2>
</body>

1.2 选择器

selector.PNG

说明：元素选择器和选择器分组在上面的css基本语法和高级语法中已经讲述，这里不再重复叙述。

派生选择器
id选择器
类选择器
属性选择器/属性和值选择器

1.2.1 派生选择器(后代选择器)：根据元素在其位置的上下文关系来定义样式

li strong{
  color: green
}
/* p strong i{
  color: blue;
} */
p i{
  color: blue;
}
strong{
  color: red;
}

<body>
  <p><strong>p标签中的strong属性<i>-</i>未具体指定的会采用strong的样式</strong></p>
  <ul>
   <li><strong>li标签中的strong属性-已经定义的效果不会被覆盖</strong></li>
  </ul>
</body>

1.2.2 id选择器：可以为标有id的html元素指定特定的样式

说明：id选择器以#定义；id选择器常常用于建立派生选择器，两者结合起来使用。
(1)id选择器简单单独使用

#divid{
  color: green
}

<body>
  <div id="divid">
  id选择器可以为标有id的html元素指定特定的样式
  </div>
</body>

(2)id选择器+派生选择器组合使用(可看做id选择器+元素选择器)

#divid p{
  color: red
}

<body>
  <div id="divid">
  id选择器可以为标有id的html元素指定特定的样式
  <p>id选择器和派生选择器组合使用</p>
  </div>
</body>

区别类选择器和id选择器：id选择器类似于类选择器但又有一些重要差别。

id选择器是唯一的，类选择器是可重复的

<body>
  <div id="mydiv">id选择器在文档中只能使用一次</div>
  <div class="div">类选择器可使用多次</div>
  <div class="div">类选择器可使用多次</div>
  <div class="div">类选择器可使用多次</div>
</body>

id选择器不能结合使用(元素选择器+id选择器不能组合使用，但id选择器+元素选择器可组合使用)
当使用js时需用到id选择器(getElementById)
资源加载上，id选择器先找结构内容再加载样式，类选择器先加载样式再找结构内容
应用上，id选择器常用于框架级的设计上，类选择器常用于内部具体数据的构造来引用一些效果

1.2.3 类选择器

说明：类选择器以点.定义；类选择器也可用于派生选择器，两者结合起来使用。
(1)类选择器简单单独使用

.pclass{
  color: red;
}

<body>
  <p class="pclass">类选择器简单单独使用</p>
</body>

(2)类选择器+派生选择器组合使用(可看做类选择器+元素选择器)

.divclass p{
  color: red;
}

<body>
  <div class="divclass">
   类选择器
   <p>类选择器和派生选择器组合使用</p>
  </div>
</body>

(3)元素选择器+类选择器组合使用

a.div{
  color: blue;
}

<body>
  <div class='div'>类选择器</div>
  <a class="div">元素选择器和类选择器结合使用</a>
</body>

(4)多类选择器

.p1{
  color: blueviolet;
}
.p2{
font-size: 20px;
}
.p1.p2{
  font-style: italic;
}

<body>
  <div>
    <p class="p1">选择器p1的效果</p>
    <p class="p2">选择器p2的效果</p>
    <p class="p1 p2">既有选择器p1和p2的效果，又有多类选择器自定义的效果</p>
  </div>
</body>

1.2.4 属性选择器/属性和值选择器:对带有指定属性的html元素指定样式

简单属性选择：选择器不指定其值
根据具体属性值选择：常用于缩小范围，只选择具有特殊属性值的元素（如a标签有特定的href属性可缩小范围）
属性和属性值必须完全匹配：常用于元素有相同的属性，但是分别需要不同的效果
根据部分属性值选择：模糊匹配属性值
注意：属性选择器在IE6及更低的版本是不支持的。

<html>
  <head>
    <style type="text/css">
      [title]{
        color: blue;
      }

      [href]{
         font-size: 30px;
      }

      [title="book"]{
        color: red;
      }
     [href="http://www.baidu.com"]{
        color: green;
      }
    [href="http://www.jianshu.com"]{
        color: blue;
     }

      [title~="hello"]{
        font-size: 50px;
      }

    </style>
  </head>

  <body>
    <p title="">简单属性选择->选择器不指定其值时，它的值怎么写无所谓</p>
    <p title="te">简单属性选择->选择器不指定其值时，它的值怎么写无所谓</p>

     <p href="">根据具体属性值选择->只选择具有特殊属性值的元素</p>

    <p title="book">属性和属性值必须完全匹配->选择器指定其值，它的值需按照指定的值来写</p>
    <a href="http://www.baidu.com">属性和属性值必须完全匹配->选择器指定其值，它的值需按照指定的值写</a>
    <a href="http://www.jianshu.com">属性和属性值必须完全匹配->选择器指定其值，它的值需按照指定的值写</a>

    <p title="hello">根据部分属性值选择</p>
    <p title="hello liy">根据部分属性值选择</p>

  </body>
</html>

说明：“title”为选择器的名称。选择器不指定其值时，它的值怎么写无所谓；如果选择器指定其值，那么它的值必须按照指定的值来写，如果值变化则不再生效等同于不指定其值的情况。

1.2.5 子元素选择器

分别使用后代选择器和子元素选择器为元素i添加样式

<body>
  <p><strong>p标签中的strong属性<i>-</i>未具体指定的会采用strong的样式</strong></p>
</body>

(1)后代选择器：可选择作为某元素后代的元素，可多层迭代(不仅可找到子元素，也可直接找到孙子元素以及更深的元素)

/* p strong i{
  color: blue;
} */
p i{
  color: blue;
}

(2)子元素选择器：与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。

p>strong>i{
  color: blue;
}

1.2.6 相邻兄弟选择器

说明：相邻兄弟选择器可选择在另一个元素后的元素，且两者有相同父元素。在实际应用中很少使用。

<body>
  <div>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
    <ol>
      <li>item11</li>
      <li>item22</li>
      <li>item33</li>
    </ol>
  </div>
</body>

li+li{
  font-size: 50px;
  color: yellow;
}

2. css基本样式

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

2.1 背景：

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

背景属性.PNG

css3背景属性.PNG

(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%的距离。
(4) 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。

2.2 文本

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

文本属性.PNG

css3文本属性.PNG

(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:为文本添加阴影

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;第一个参数为阴影距当前文本左边的距离(阴影离开文字横向的距离)，第二个参数为阴影距当前文本上边的距离(阴影离开文字纵向的距离)，第三个参数为浮雕效果的清晰度(阴影模糊程度)，第四个参数为阴影颜色。
(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：强制换行，英文将被拆分

2.3 字体

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

字体属性.PNG

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

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

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

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

div{
  font-family: myfont;
}

2.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
}

2.5 列表

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

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

列表属性.PNG

(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>

2.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>

2.7 轮廓

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

轮廓属性.PNG

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

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

3. css定位

说明：css定位改变元素在页面上的位置。
css定位机制：

普通流：元素按照其在html的位置顺序决定排布的过程(按照元素在页面摆放的上下或左右流程进行摆放)
浮动：
绝对布局(绝对定位)：元素脱离文档流

3.1 定位属性

定位属性.PNG

备注：positon设置为static 时，偏移量的设置不起作用；设置z-index时，偏移量的设置也不起作用。z-index的值无上限但尽量设置在100以内，值大的元素可覆盖值小的元素，更近地显示在用户面前。
positon的值：

static ：静态的
relative：相对的
absolute：绝对的
fixed：固定的

#position1{
  width: 100px;
  height: 100px;
  background-color: green;
  position: relative;
  left: 20px;
  top: 20px;
  z-index: 3;
}
#position2{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  left: 10px;
  top: 10px;
  z-index: 2;
}
#position3{
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  left: 5px;
  top: 5px;
  z-index: 1;
}

<body>
  <div id="position1"></div>
  <div id="position2"></div>
  <div id="position3"></div>
</body>

3.2 float浮动属性

浮动属性.PNG

#container{
  width: 500px;
  height: 500px;
}
#fd1{
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
}
#fd2{
  width: 150px;
  height: 150px;
  background-color: blue;
  float: left;
}
#fd3{
  width: 150px;
  height: 150px;
  background-color: green;
  float: left;
}
#text{
  clear: both;
}

<body>
  <div id="container">
    <div id="fd1"></div>
    <div id="fd2"></div>
    <div id="fd3"></div>
    <div id="text">该文本去除浮动效果</div>
  </div>
</body>

3.3 float属性实现瀑布流效果

通配符* ：所有的属性都会其效果
auto ：自适应
margin : 外边距
padding：内边距

*{
  margin: 0px;
  padding: 0px;
}
li{
  list-style: none;
}
div1{
  width: 950px;
  height: auto;
  margin: 20px auto;
}
ul{
  width: 250px;
  float: left;
}

<body>
  <div id="div1">
    <ul>
      <li><img src="images/icon_nav_feedback.png"></li>
      <li><img src="images/icon_nav_form.png"></li>
      <li><img src="images/icon_nav_nav.png"></li>
    </ul>
    <ul>
      <li><img src="images/icon_nav_search.png"></li>
      <li><img src="images/icon_nav_special.png"></li>
      <li><img src="images/icon_nav_study.png"></li>
    </ul>
    <ul>
      <li><img src="images/icon_nav_widget.png"></li>
      <li><img src="images/icon_nav_z-index.png"></li>
      <li><img src="images/icon_nav_study.png"></li>
    </ul>
  </div> 
</body>

4. css盒子模型

说明：盒子模型的内容范围包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。盒子模型就是通过div和css样式来设计一个可以添加逻辑的效果。

盒子模型.PNG

注意：这里的盒子模型是遵循W3C的标准盒子模型，IE的盒子模型这里不做讲解。
(1)内边距(padding)

padding.PNG

td{
  padding: 100px;
}

<body>
  <table border="1">
    <tr>
      <td>内边距</td>
    </tr>
  </table>
</body>

备注：内边距(padding)有1个参数时，上下左右外边距都为该参数值；2个参数时，第一个参数为上下外边距值，第二个参数为左右外边距值；4个参数分别代表上右下左外边距值。
(2)边框(border)：可以创造出效果出色的边框，并可以应用于任何元素。

基本的边框属性

边框/单边框宽度：border-width
边框/单边框样式：border-style
边框/单边框颜色：border-color

<body>
  <p>边框样式</p>
</body>

p{
  border-width: 2px;
  border-style: dotted;
  border-top-style: double;
  border-color: red;
}

简化写法

p{
  border: 2px solid red;
}

备注：border: 1px solid red;三个参数分别为边框的宽度、样式和颜色属性。

css3提供的边框属性

圆角边框： border-radius
边框阴影：box-shadow
边框图片：

p{
  width: 100px;
  background-color: blue;
  text-align: center;
  border: 2px solid red;
  border-radius: 10px;
}
#divid{
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: blue;
  border-radius: 10px;
  box-shadow: 10px 30px 5px red;
}

<body>
  <p>圆角效果</p>
  <div id="divid"></div>
</body>

阴影属性(box-shadow)的4个参数分别代表：背景阴影向右移动10个像素，再向下移动20个像素；阴影透明度；阴影颜色。

(3)外边距(margin)

外边距.PNG

备注：外边距和内边距的属性比较相似。margin的参数个数和对应代表大含义和padding一致。

.mg{
  width: 100px;
  height: 100px;
  background-color: royalblue;
  margin: 10px;
}

<body>
  <div class="mg">外边距</div>
</body>

盒子模型示例

body{
  margin: 0px;
}
.container{
  margin: 20px;
}
.bd{
  border-style: solid;
}
.pd{
  padding: 10px;
}
.content{
  background-color: blue;
}

<body>
  <div class="container">
    <div class="bd">
      <div class="pd">
        <div class="content">Hello liy</div>
      </div>
    </div>
  </div>
</body>

说明：最外层的div为容器层，之后为边框、内边距和内容区域。
(4)外边距合并：外边距合并就是一个叠加的概念

外边距合并.PNG

说明：外边距合并遵循边距大的一方，即元素1的外边距为10px，元素2的外边距为20px,则元素1和元素2间的距离为20px；元素1的外边距为10px，元素2的外边距为10px,则元素1和元素2间的距离为10px。
(5)盒子模型应用

页面盒子组成.PNG

.top{
  width: 100%;
  height: 50px;
  background-color: black;
}
.top_content{
   width: 75%;
   height: 50px;
   margin: 0px auto;
   background-color: blue;
}

.body{
  width: 75%;
  height: auto;
  margin: 10px auto;
  background-color: blanchedalmond;
}
.body_image{
  width: 100%;
  height: 100px;
  background-color: yellow;
}

.body_content{
  width: 100%;
  margin: 10px auto;
  background-color: darkgray;
}
.content_notification{
  width: 100%;
  height: 30px;
  background-color: green;
}
.content_infomation{
  width: 100%;
  height: 200px;
  margin: 0px auto;
  background-color: pink;
}

.foot{
  width: 75%;
  height: 100px;
  margin: 10px auto;
  background-color: brown;
}
.foot_content{
  width: 100%;
  height: 70%;
  background-color: powderblue;
}
.foot_subnav{
  width: 100%;
  height: 30%;
  background-color: black;
}

<body>
  <div class="top">
    <div class="top_content"></div>
  </div>

  <div class="body">
    <div class="body_image"></div>
    <div class="body_content">
      <div class="content_notification"></div>
      <div class="content_infomation"></div>
    </div>
  </div>

  <div class="foot">
    <div class="foot_content"></div>
    <div class="foot_subnav"></div>
  </div>
</body>

效果展示.PNG

5. css常用操作

(1) 对齐

<body>
  <div class="div1"></div>
</body>

使用margin属性进行水平居中对齐

.div1{
  width: 70%;
  height: 200px;
  background-color: brown;
  margin-left: auto;
  margin-right: auto;
}

或

.div1{
  width: 70%;
  height: 200px;
  background-color: brown;
  margin: 10px auto;
}

使用position属性进行左右对齐

.div1{
  width: 70%;
  height: 200px;
  background-color: brown;
  position: absolute;
  right: 0px;
}

使用float属性进行左右对齐

.div1{
  width: 70%;
  height: 200px;
  background-color: brown;
  float: right;
}

(2) 尺寸

尺寸常用属性.PNG

行高(常用来设置行间距的效果)

<body>
  <p class="p1">行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果</p>
  <p class="p2">行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果</p>
  <p class="p3">行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果行间距效果</p>   
</body>

.p1{
  width: 20px;
  color: red;
  line-height: normal;
}
.p2{
  width: 20px;
  color: green;
  line-height: 200%;
}
.p3{
  width: 20px;
  color: blue;
  line-height: 50%;
}

最小最大宽度和高度

<view>
  <text class="p">最小最大宽度和高度效果</text>
</view>

.p{
  line-height: normal;
  min-width: 50px;
}

(3) 分类

分类操作属性.PNG

cursor：设置鼠标指针的效果

p{
  cursor: auto;// inherit,alias,cell
}

diaplay：设置元素是否显示及如何显示(常用来设置列表的方向)

<body>
  <ul>
   <li>hello1</li>
   <li>hello2</li>
   <li>hello3</li>
  </ul>
</body>

li{
  display: inline;
}

visibility：设置元素可见或不可见

li{
  display: inline;
  visibility: hidden;
}

(4) 导航栏

垂直导航栏
水平导航栏

(5) 图片

<body>
  <div class="picture">
    <a href="#" target="_self">
      <img src='vcode.jpg' alt="风景" width="200px" height="200px"></img>
    </a>
    <div class="text">风景这边独好</div>
  </div>

  <div class="picture">
    <a href="#" target="_self">
      <img src='vcode.jpg' alt="风景" width="200px" height="200px"></img>
    </a>
    <div class="text">风景这边独好</div>
  </div>

  <div class="picture">
    <a href="#" target="_self">
      <img src='vcode.jpg' alt="风景" width="200px" height="200px"></img>
    </a>
    <div class="text">风景这边独好</div>
  </div>

  <div class="picture">
    <a href="#" target="_self">
      <img src='vcode.jpg' alt="风景" width="200px" height="200px"></img>
    </a>
    <div class="text">风景这边独好</div>
  </div>

  <div class="picture">
    <a href="#" target="_self">
      <img src='vcode.jpg' alt="风景" width="200px" height="200px"></img>
    </a>
    <div class="text">风景这边独好</div>
  </div>

  <div class="picture">
    <a href="#" target="_self">
      <img src='vcode.jpg' alt="风景" width="200px" height="200px"></img>
    </a>
    <div class="text">风景这边独好</div>
  </div>
  
</body>

body{
  margin: 10px auto; 
  width: 70%;
  height: auto;
  background-color: greenyellow;
}
.image{
  border: 1px solid darkgray;
  width: auto;
  height: auto;
  float: left;
  text-align: center;
}
img{
  margin: 5px; 
  opacity: 0.5;
}
text{
  font-size: 12px;
  margin-bottom: 5px;
}
a:hover{
  background-color: burlywood;
}

备注：opacity为透明度(0~1)，0为完全透明，1为不透明。

6. css选择器

7. css动画-页面特效

8. html与css简单页面效果

注意：以下代码是在微信小程序中运行的(无body和div标签，都用view替代)

9. css3选择器(css3新追加的选择器)

9.1 属性选择器

说明：在css3中新追加了三种属性选择器分别为：[att * =val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。

[att*=val]：代表选择包含val的元素
[att^=val]：代表选择首字符为val的元素
[att$ =val]：代表选择结束字符为val的元素

属性选择器.PNG
注意：val为数字式，需加反斜杠\。如：

<style>
  [id$=\1]{
    color:blue;
  }
</style>

9.2 结构性伪元素选择器(主要有4个)

first-line：
first-letter：
before
after

9.3 结构性伪类选择器

备注：结构性伪类选择器在css中已存在，需要注意的是不要以系统定义好的选择器的名称来命名，比如link和hover等。
说明：在css3中，结构性伪类选择器的共同特征是允许开发者根据文档中的结构来指定元素的样式。

root选择器：是将样式绑定到页面的根元素上
注意：指定root时，body下的样式只对内容区域起作用；未指定root时，body下的样式对整个页面起作用。
not选择器：指定某元素下的某子元素不使用该样式
empty选择器：指定当前元素内容为空白时使用的样式
target选择器：对页面中某个target元素指定样式，该样式只在用户点击页面的超链接并跳转到target页面后起作用

9.4 last-child、last-child、nth-child、nth-last-child和only-child选择器

first-child：针对一个父元素中的 第一个子元素 进行样式的指定
last-child：针对一个父元素中的 最后一个子元素 进行样式的指定
nth-child：针对一个父元素中的 指定序号的子元素 / 第偶数个子元素或第奇数个子元素进行样式的指定
nth-last-child：nth-child的倒序
only-child：针对一个父元素中的 仅一个子元素 进行样式的指定
备注：在父元素中仅一个子元素的情况下，此时last-child、last-child、nth-child(1)、nth-last-child(1)和only-child的效果一致，可使用only-child来替代它们。
nth-of-type：
nth-last-of-type：

(1) first-child

<view>
  <text>水果</text>
  <text>分类</text>
  <view>
    <text>热性</text>
    <text>温性</text>
    <text>凉性</text>
  </view>
</view>

text:first-child{
  color: red;
}

first-child.PNG

(2) last-child

<view>
  <text>水果</text>
  <text>分类</text>
  <view>
    <text>热性</text>
    <text>温性</text>
    <text>凉性</text>
  </view>
</view>

text:last-child{
  color: green;
}

last-child.PNG

(3) nth-child(position)、nth-child(odd)和nth-child(even)

<view>
  <text>热性</text>
  <text>温性</text>
  <text>凉性</text>
  <text>未知</text>
</view>

text:nth-child(2){
  color: blue;
}
text:nth-child(odd){
  color: salmon;
}
text:nth-child(even){
 color: greenyellow;
}

ntn-child.PNG
补充：nth-child(αn+β)
α：每次循环包括的样式总数
β：指定样式在循环中所处的位置

<view>
  <text>热性</text>
  <text>温性</text>
  <text>凉性</text>
  <text>热性</text>
  <text>温性</text>
  <text>凉性</text>
  <text>热性</text>
  <text>温性</text>
  <text>凉性</text>
</view>

text:nth-child(3n+1){
  color: red;
}
text:nth-child(3n+2){
  color: green;
}
text:nth-child(3n+3){
  color: blue;
}

备注：text:nth-child(3n+3)可简写为text:nth-child(3n)。

nth-child(αn+β).PNG

(4) nth-last-child(position)、nth-last-child(odd)和nth-last-child(even)

<view>
  <text>热性</text>
  <text>温性</text>
  <text>凉性</text>
  <text>未知</text>
</view>

text:nth-last-child(2){
  color: yellow;
}
text:nth-last-child(odd){
  color: blueviolet;
}
text:nth-last-child(even){
  color: green;
}

nth-last-child.PNG

(5) only-child

<view>
  <view>
    <text>水果</text>
  </view>
  <view>
    <text>热性</text>
    <text>温性</text>
    <text>凉性</text>
  </view>
</view>

/* text:nth-child(1){
  color: red;
} */
text:only-child{
  color: red;
}

only-child.PNG

9.5 UI元素状态伪类选择器

说明：在css3中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器。这些选择器的共同特征是：指定的样式只有当元素处于某种状态下才起作用，默认情况下不起作用。在css3中，共有17种UI元素状态伪类选择器，如E:hover、E:focus、E:active、E:checked、E:disabled、E:ready-only、E:default、E:indeterminate、E::selection、E:valid、E:invalid、E:required、E:optional、E:in-range等。其中最常用的有hover、focus、active、checked、enabled和disabled。

(1) hover：设置鼠标经过时元素的样式(如鼠标经过input但未点击时)
(2) focus：设置获取焦点时元素的样式(如鼠标点击input松开时)
(3) active：设置激活时元素的样式(如鼠标点击input不松开时)
(4) checked：设置选中时元素的样式(如鼠标选中checkbox时)

<view class="page">
  <view class="page__bd">
    <view class="weui-cells__title">input类型为text</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell">
        <input class="weui-cell__bd" type='text' name="name" placeholder='请输入姓名'></input>
        <input class="weui-cell__ft" type='text' name="age" placeholder='请输入年龄'></input>
      </view>
    </view>

    <view class="weui-cells__title">input类型为checkbox</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell">
        <!-- <input class="weui-cell__bd" type='checkbox'>阅读</input>
        <input class="weui-cell__bd" type='checkbox'>运动</input>
        <input class="weui-cell__bd" type='checkbox'>电影</input>
        <input class="weui-cell__ft" type='checkbox'>音乐</input> -->
        <checkbox>阅读</checkbox>
        <checkbox>运动</checkbox>
        <checkbox>电影</checkbox>
        <checkbox>音乐</checkbox>
      </view>
    </view>
  </view> 
</view>

input[type="text"]:hover{
  background-color: darkviolet;
}
input[type="text"]:focus{
  background-color: aqua;
}
input[type="text"]:active{
  background-color: darkorange;
}
/* input[type="checkbox"]:checked{
  outline: 2px solid greenyellow;
} */

说明：微信小程序中input[type="text"]:focus的样式未起作用。

(5) enabled：
(6) disabled：

<view class="page">
  <view class="page__bd">
    <view class="weui-cells__title">input类型为radio</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell">
        <text class="weui-cell__bd" style="color: {{textColor}}">姓名:</text>
        <input class="weui-cell__bd" type='text' name="name" placeholder='请输入姓名' disabled="{{isDisabled}}"></input>
      </view>

      <view class="weui-cell">
        <radio-group class="radio-group" bindchange="radioChange1">
          <radio value="red">红色</radio>
          <radio value="green">绿色</radio>
          <radio value="blue">蓝色</radio>
        </radio-group>
      </view>

      <view class="weui-cell">
        <radio-group class="radio-group" bindchange="radioChange2">
          <radio value="enabled">输入框可用</radio>
          <radio value="disabled">输入框不可用</radio>
        </radio-group>
      </view>

    </view>
  </view> 
</view>

input[type="text"]:enabled{
  background-color: gold;
}
input[type="text"]:disabled{
  background-color: dimgray;
}

data: {
    textColor : "",
    isDisabled : false,
  },

  radioChange1(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value);
    var value = e.detail.value;
    this.setData({
      textColor: value
    });
    console.log('radio发生change事件，textColor为：', this.data.textColor);
  },
  radioChange2(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value);
    var value = e.detail.value;
    if (value == "disabled"){
      this.setData({
        isDisabled: true
      });
    }else{
      this.setData({
        isDisabled: false
      });
    }
    
  },

说明：微信小程序中input[type="text"]:enabled和input[type="text"]:disabled的样式未起作用。

9.6 通用兄弟元素选择器

说明：通用兄弟元素选择器用来指定位于同一个父元素之中的某一个元素之后的所有其他某个种类的兄弟元素所使用的样式。

<view>
  <view>
    <text>text1</text>
    <text>text2</text>
  </view> 
  <text>text3</text>
  <text>text4</text>
  <text>text5</text>
  <text>text6</text>
</view>

view ~ text{
  color: red
}

10. css3文字与字体相关样式

10.1 给文字添加阴影

说明：给文字添加阴影的基本使用请参考2.2-(5)text-shadow；可设置多重阴影效果

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>

10.2 使用服务器端字体

@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;
}

10.3 修改文字种类而保持字体尺寸不变

说明：文字的样式不同字体的大小将会发生变化，可使用 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为浏览器实际显示的字体尺寸。

11. css3盒子相关样式

12. css3背景与边框相关样式

13. svn介绍和应用

14. css3中的动画功能

15. 老式浏览器支持html5与css3

16. css3布局属性全接触

CSS3 属性/transition、animation 配合J
CSS3 扩展 webpack基础用法
1 CSS3 基础认知、选择器
1、CSS3基础认知： (1).CSS3是在CSS2基础上新增了很多强大的功能，其拆分了很多"独立模块"，迭代过程...
CSS3笔记
一、CSS3属性选择器什么是 CSS3在 CSS2 的基础上拓展、新增的样式 CSS3 发展现状移动端支持优于 ...
前端入门css3
如果想学前端,那css3是最基础的了,也是最先学习的一门知识废话不多说直接正题什么是css3 css3形成页面...
《图解CSS3》学习记录（01-概述）
CSS3规范重复了部分CSS的内容，并在其基础上进行了很多增补和修改。 CSS3新特征： 1、强大的CSS3选择器...
2019-06-03
css基础知识完善表单: 框架集 ie6png图片的修复 css3过渡动画：例如 css3 阴影：语法:...
前端需要掌握的技术
基础知识HTML5audio、video、cancas 本地存储的了解CSS3选择器、常规样式属性、css3的变...
CSS3学习(一）：什么是CSS3
什么是CSS3？ CSS3是CSS技术的升级版本，大部分的CSS3规范都重复了CSS2.1的内容，但也在它的基础上...
H5新增 input 标签属性选择器结构伪类选择器
五、新增 input 标签六、新增表单属性七、CSS3 属性选择器(上) 什么是 CSS3在 CSS2 的基础...
前端基础搬运工-H5C3模块
八、H5C3模块基础部分 1. CSS3有哪些新特性？ - [ ] 1. CSS3实现圆角（border-ra...