应用视觉设计
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>©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)