应用视觉设计

应用视觉设计

text-align 属性创建视觉平衡

text-align: justify;
//可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。
text-align: center;//可以让文本居中对齐。
text-align: right;//可以让文本右对齐。
text-align: left;//是
text-align的默认值，它可以让文本左对齐。

调整长宽

width: 220px;//长
height: 20px;//高

文本样式

font-weight:bold;//加粗
可以在文本p标签中加入————<strong>选择内容加粗</strong>

text-decoration: underline;//下划线   
Underline => u => 下划线。

font-style: italic;//强调   
emphasis => em => 强调

text-decoration: line-through;//删除线
Strikethrough => s => 删除线

Horizontal Rule => hr => 水平线
且只需要一个人<hr>在指定位置就行,一般都是在段落间

font-size:10px;//字体大小样式，随情况而改

box-shadow属性

box-shadow属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。
box-shadow属性的每个阴影依次由下面这些值描述：
offset-x阴影的水平偏移量；
offset-y阴影的垂直偏移量;
blur-radius模糊距离；
spread-radius阴影尺寸；
颜色。

举例为

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

opacity:0.5; (选择为0——1)；//调整透明图度

text-transform属性

Value	Result
lowercase	“transform me”
uppercase	“TRANSFORM ME”
capitalize	“Transform Me”
initial	使用默认值
inherit	使用父元素的text-transform值。
none	**Default:**不改变文字。

字体

font-size:10px;//字体大小
font-weight:10//字体粗细
line-height：10px//段落高

定位

当元素的 position 设置为relative时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是left、right、top和bottom。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。下面的例子展示了段落向上偏移 10 像素：

p {
 position: relative;
 bottom: 10px;
}

接下来要介绍 CSSposition属性的取值选项absolute，absolute相对于其包含块定位。和relative定位不一样，absolute定位会将元素从当前的文档流里面移除，周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。

absolute定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是position:relative;）,浏览器会继续寻找直到默认的 body 标签。

接下来要介绍的是fixed定位，它是一种特殊的绝对（absolute）定位，区别是其包含块是浏览器窗口。和绝对定位类似，fixed定位使用 top、bottom、left 和 right 属性来调整元素的位置，并且会将元素从当前的文档流里面移除，其它元素会忽略它的存在。

fixed定位和absolute定位的最明显的区别是fixed定位元素不会随着屏幕滚动而移动。

接下来要介绍的定位机制并不是position属性的选项，它通过元素的float属性来设置。浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用width属性来指定浮动元素占据的水平空间。

z-index

z-index 谁大谁覆盖

应用视觉设计：使用 margin 属性将元素水平居中

在应用设计中经常需要把一个块级元素水平居中显示。一种常见的实现方式是把块级元素的margin值设置为auto。

同样的，这个方法也对图片奏效。图片默认是内联元素，但是可以通过设置其display属性为block来把它变成块级元素。

网页样例

<style>
  body {
    background-color: white;
  }
  header {
    background-color: #09A7A1;
    color: white;
    padding: 0.25em;
  }
  h2 {
    color: #09A7A1;
  }  
  button {
    background-color: #FF790E;
  }
  footer {
    color: white;
    padding: 0.5em;
    background-color: #09A7A1;
  }
</style>
<header>
  <h1>FCC 中国</h1>
</header>
<main>
  <article>
    <h2>FCC 成都社区</h2>
    <p>【FCC成都社区】是一个非营利性的公益性技术社区，由一群编程技术爱好者，利用业余时间搭建的一个友好的交流、学习、互助的平台，帮助开发者、技术爱好者提升个人技术能力，同时帮助企业解决人才问题。</p>
    <button><a href="https://freecodecamp-chengdu.github.io/" target="_blank">更多</a></button>
  </article>
  <article>
    <h2>FCC 深圳社区</h2>
    <p>【FCC 深圳社区】全称 freeCodeCamp 深圳社区，面向深圳所有有意学习编程、热爱编程、甚至想要通过编程找到一份好工作的学生和社会群众，传承 freeCodeCamp 中文社区的主旨思想，倡导人人皆可编程。</p>
    <button><a href="https://freecodecamp-shenzhen.github.io/" target="_blank">更多</a></button>
  </article>
</main>
<br>
<footer>&copy;2018 FCC 中国</footer>

图像

颜色渐变,背景网址图像，虚浮放大

background: linear-gradient(gradient_direction(渐变角度),颜色 1, 颜色 2, 颜色 3, ...);
    background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));//例子


repeating-linear-gradient()重复指定的渐变
        background: repeating-linear-gradient(
              45deg,
              yellow 0px,
              yellow 40px,
              black 40px,
              black 80px
            );//例子

background:url(https://i.imgur.com/MJAkxbh.png);
背景指定图片地址


p {
  transform:scale(2);//指定元素放大2倍
}

p:hover {
  transform: scale(2.1); //用户悬停段落元素时，段落大小缩放到原始大小 2.1
}


transform: skewX(-32deg);//沿着 X 轴翻转段落元素 -32 度
transform:skewY(-10deg);

box-shadow: 25px 10px 10px 10px green;//依次取值offset-x、offset-y、blur-radius、spread-radius和颜色值。其中blur-radius和spread-radius是可选的。

术语表：blur-radius => 模糊半径，spread-radius => 辐射半径，transparent => 透明的，border-radius => 圆角边框。

心形

<style>
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: rotate(-45deg);
}
.heart:after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart:before {
  content:"";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
</style>
<div class = "heart"></div>

动画

样式

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}
@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

id 为anim的元素，代码设置animation-name为colorful，设置animation-duration为 3 秒。然后把@keyframes引用到名为colorful的动画属性上。colorful在动画开始时（0%）设置颜色为蓝色，在动画结束时（100%）设置颜色为黄色。注意不是只有开始和结束的过渡可以设置，0% 到 100% 间的任意百分比你都可以设置。

animation-fill-mode: forwards;//使按钮悬停时保持高亮。

animation-iteration-count: 3;//运行 3 次后停止, animation-iteration-count: infinite;//为永久运动

animation-duration:1s;//闪烁频率

animation-timing-function:ease; //默认 动画以低速开始，然后加快，在结束前变慢。
animation-timing-function:ease-out;///动画以高速开始，以低速结束。
animation-timing-function:ease-in;//动画以低速开始，以高速结束
animation-timing-function:liear;//动画从头到尾的速度是相同的。
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);//(x1, y1, x2, y2) （x1 = 0.25 = y1 和 x2 = 0.75 = y2）