文本 Text
文本对齐 Text Align
web 内容大部分都是文本。CSS 外面的 text-align
属性能够管制文本的对齐形式。
text-align: justify; 将文本隔开,使每行的宽度相等。text-align: center; 能够让文本居中对齐。text-align: right; 能够让文本右对齐。text-align: left; 是默认值,它能够让文本左对齐
加粗 Bold
应用 strong
标签来加粗文字。粗体文字个别用来吸引读者留神或用来示意强调。
应用 font-weight
来加粗文字。
<strong></strong>
font-weight: bold;
font-weight: XX px;
下划线 Underline
应用 u
标签来给文字增加下划线。下划线通常用来示意重要内容或须要记忆的内容。
应用 text-decoration: underline
标签来给文字增加下划线。
如果应用 u
标签增加下划线,可能混同文本和链接,则应防止应用它。超链接标签也有默认的下划线格局。
<u></u>
text-decoration: underline;
强调 / 斜体 Italic
应用 em
标签来强调文本,应用 i
斜体文本。
应用 font-style: italic
标签来强调文本。
强调和斜体的成果一样,然而含意不同。前者强调标签中蕴含的文本,后者突出技术术语,题目或者来自另一语言的短语。
<em></em>
<i></i>
font-style: italic;
大小写 Upper/Lowercase
CSS 里的 text-transform
属性能够扭转英文字母的大小写。应用这个属性时,无需扭转 HTML 元素中的文本也能够对立页面里英文的显示。
上面的表格展现了 text-transform
的不同值对文字“Transform me”的影响:
值 | 后果 |
---|---|
lowercase |
“transform me” |
uppercase |
“TRANSFORM ME” |
capitalize |
“Transform Me” |
initial |
应用默认值 |
inherit |
应用父元素的 text-transform 值。 |
none |
Default:不扭转文字。 |
text-transform: uppercase;
高低标 Super/Subscript
应用 sup
和sub
示意高低标,在示意公式时有用。
<sup></sup>
<sub></sub>
线条 Line
删除线 Strikethrough
用 s
标签来给文字增加删除线。删除线是位于文字水平地方的一条线,它代表着一段文字不再无效。
用 text-decoration: line-through
标签来给文字增加删除线。
<s></s>
text-decoration: line-through;
水平线 Horizontal Line
用 hr
标签来创立一条宽度撑满父元素的水平线。这种程度分割线个别用来示意内容主题的扭转,或在视觉上将文档分隔成几个局部。
HTML 中的 hr
是自闭合标签。
<hr>
行 Row
换行 Wrap
用 br
标签来换行。HTML 中的 br
是自闭合标签。
<br>
行高 Line Height
CSS 提供 line-height
属性来设置行间的间隔。行高,顾名思义,能够用来设置每行文字所占据的垂直空间。
line-height: 25px;
暗影 Shadow
box-shadow
属性用来给元素增加暗影,该属性值是由逗号分隔的一个或多个暗影列表。
box-shadow
属性的暗影顺次由上面这些值形容:
offset-x
暗影的程度偏移量;offset-y
暗影的垂直偏移量;blur-radius
含糊半径;spread-radius
暗影扩大半径;color
色彩
其中 blur-radius
和 spread-radius
是可选的。
能够通过逗号分隔每个 box-shadow
元素的属性来增加多个 box-shadow。
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
透明度 Transparency
CSS 里的 opacity
属性用来设置元素的透明度。
属性值为 1 代表齐全不通明。
属性值为 0.5 代表半透明。
属性值为 0 代表齐全通明。
透明度会利用到元素内的所有内容,不论是图片,还是文本,或是背景色。
opacity: 0.7;
超链接 Anchor
能够应用 a:hover
伪类选择器来选取超链接的悬停状态。
a:hover {color: blue;}
地位 Position
绝对定位 Relative
在 CSS 里所有 HTML 元素皆为盒子,也就是通常所说的盒模型。块级元素主动从新的一行开始(比方题目、段落以及 div),行内元素排列在上一个元素后(比方图片以及 span)。元素默认依照这种形式布局称为文档的一般流,同时 CSS 提供了 position 属性来笼罩它。
当元素的定位设置为 relative
时,它容许通过 CSS 指定该元素在以后文档流页面下的 绝对 偏移量。CSS 里管制各个方向偏移量的属性是 left
、right
、top
和 bottom
。它们代表从原来地位向远离该方向 偏移 指定的像素、百分比或者 em。
p {
position: relative;
bottom: 10px;
}
把元素的地位设置成绝对,并不会扭转该元素在布局中所占的地位,也不会对其它元素的地位产生影响。
CSS 外面的 top
、bottom
、left
和 right
定义了元素在相应方位的偏移间隔。元素将从以后地位向属性 相同 的方向偏移。
相对定位 Absolute
CSS position
属性的取值选项 absolute
,它的含意是绝对于其蕴含块定位。和 relative
定位不一样,相对定位会将元素从以后的文档流外面移除,四周的元素会疏忽它。这样就能够用 CSS 的 top、bottom、left、right 属性来调整元素的地位。
相对定位比拟非凡的一点是元素的定位参照于最近的 positioned 先人元素。如果它的父元素没有增加定位规定(默认是 position: relative;
),浏览器会持续寻找直到默认的 body
标签。
p {
position: absolute;
bottom: 10px;
}
固定定位 Fixed
fixed
定位,它是一种非凡的相对(absolute)定位,将元素绝对于浏览器窗口定位。相似于相对地位,它与 CSS 偏移属性一起应用,并且也会将元素从以后的文档流外面移除。其它元素会疏忽它的存在,这样兴许须要调整其余地位的布局。
但 fixed
和 absolute
的最显著的区别在于,前者定位的元素不会随着屏幕滚动而挪动。
position: fixed;
top: 0;
left: 0;
浮动 Float
通过元素的 float
属性来设置。浮动元素不在文档流中,它向 left
或 right
浮动,直到它的外边缘碰到蕴含框或另一个浮动框的边框为止。通常须要用 width
属性来指定浮动元素占据的程度空间。
.card1 {
float: left;
width: 50%;
}
.card2 {
float: right;
width: 50%;
}
元素重叠 Overlapping
当一些元素在地位上重叠时(例如,应用 position: absolute | relative | fixed | sticky
时),在 HTML 里后呈现的元素会默认显示在更早呈现的元素的下面。能够应用 z-index
属性指定元素的重叠秩序。z-index
的取值是整数,数值大的元素会叠放到数值小的元素下面。
z-index: 2;
元素程度居中 Center
在利用设计中常常须要把一个块级元素程度居中显示。一种常见的实现形式是把块级元素的 margin
值设置为 auto(前提要设定元素的宽度 width)。
同样的,这个办法也对图片见效。图片默认是内联元素,然而能够通过设置其 display
属性为 block
来把它变成块级元素。
width: 100px;
margin: auto;
突变 Gradient
HTML 元素的背景色并不局限于单色。CSS 还为提供了色彩突变。可通过 background
里的 linear-gradient()
实现线性突变。
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
第一个参数指定了色彩过渡的方向——它的值是角度,90deg
示意垂直突变(从左到右),45deg
示意沿对角线突变(从左下方到右上方)。其余参数指定了突变色彩的程序:
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
repeating-linear-gradient()
函数和 linear-gradient()
很像,次要区别是前者会反复指定的突变。repeating-linear-gradient()
有很多参数,为了便于了解,只用到角度值和色标。角度就是突变的方向。色标代表突变色彩及产生突变的地位,由百分比或者像素值示意。
上面的代码能够帮忙了解成对的起止突变色彩值是如何过渡的。
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
如果每对起止突变色彩值的色彩都是雷同的,因为是在两个雷同的色彩间过渡,那么两头的过渡色也为同色,接着就是同色的过渡色和下一个起止色彩,最终产生的成果就是条纹。
背景图
background
属性反对应用 url()
函数作为属性值,这让咱们能够通过链接的形式引入纹理或款式的图片。图片链接的地址应写在括号内,个别会用引号包起来。
background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
元素大小 Scale
CSS 属性 transform
外面的 scale()
函数能够用来扭转元素的显示比例。
p {transform: scale(1.5);
}
transform
属性有很多函数能够调用,能够对元素进行调整大小、挪动、旋转、翻转等操作。当应用伪类选取元素的指定状态(如 :hover
)时,能够通过 transform
属性十分不便地给元素增加交互。
p:hover {transform: scale(1.1);
}
transform
属性 skewX()
:它使抉择的元素沿着 X 轴(横向)歪斜指定的角度。
transform: skewX(24deg);
skewY
属性使指定元素沿 Y 轴(垂直方向)翻转指定角度。
transform: skewY(24deg);
动画 & 关键帧 Animation&Keyframes
animation
属性管制动画,@keyframes
规定管制动画中各阶段的变动。总共有 8 个 animation 属性。
animation-name
用来设置动画的名称。animation-duration
设置动画显示的工夫。
@keyframes
能够通过设置特定工夫点的行为来创立动画。为此,只须要给持续时间内的特定帧(从 0% 到 100%)加上 CSS 规定。
#rect {
animation-name: rainbow;
animation-duration: 4s;
}
@keyframes rainbow {
0% {background-color: blue;}
50% {background-color: green;}
100% {background-color: yellow;}
}
animation-fill-mode
指定了在动画完结时元素的款式.
animation-fill-mode: forwards;
animation-iteration-count
,这个属性管制动画循环的次数。如果想让动画始终运行,能够把值设置成 infinite
。
animation-iteration-count: 3;
animation-timing-function
用来定义动画的速度曲线。速度曲线决定了动画从一套 CSS 款式变为另一套所用的工夫。如果要形容的动画是一辆车在指定工夫内(animation-duration
)从 A 静止到 B,那么 animation-timing-function
表述的就是车在静止中的减速和加速等过程。有一些预约义的关键字可用于常见的选项。比方,默认值是 ease
,动画以低速开始,而后放慢,在完结前变慢。其它罕用的值包含 ease-out
:动画以高速开始,以低速完结;ease-in
,动画以低速开始,以高速完结;linear
:动画从头到尾的速度是雷同的。
贝塞尔曲线 Bezier Curve
在 CSS 动画里,用 cubic-bezier
来定义贝塞尔曲线。曲线的形态代表了动画的速度。曲线在 1 * 1 的坐标零碎内,其中 X 轴代表动画的工夫距离(相似于工夫比例尺),Y 轴代表动画的扭转。
cubic-bezier
函数蕴含了 1 * 1 网格里的 4 个点:p0
、p1
、p2
、p3
。其中 p0
和 p3
是固定值,代表曲线的起始点和完结点,坐标值顺次为 (0, 0) 和 (1, 1)。你只需设置另外两点的 x 值和 y 值,设置的这两点确定了曲线的形态从而确定了动画的速度曲线。在 CSS 外面通过 (x1, y1, x2, y2)
来确定 p1
和 p2
。以下就是 CSS 贝塞尔曲线的例子:
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
对齐 Align
文本对齐
见第一题目文本下对齐子标题。
HTML 元素对齐
HTML 元素对齐须要思考盒子模型和文档流。
居中对齐
对于块级元素:
先给元素设定宽度,而后推外边距至充斥父元素的可用空间。
<div class="parent">
<div class="child">
</div>
</div>
通过设置边距把父元素的空间可视化:
.parent {border: 5px solid red;}
把子元素的宽度设置为父元素的 50%,给肯定的内边矩(把元素变为空心)和边框(为了可视化),为了居中子元素,把外边距设置为 auto
,该属性通知浏览器依据可用空间主动计算外边距:
.child {
width: 50%;
padding: 20px;
border: 4px solid green;
margin: auto;
}
对于行内元素,须要先把其变为块级元素,而后利用雷同的形式:
.child {
display: block;
border: 4px dashed blue;
margin: auto;
}
左右对齐
罕用形式是应用 float
属性或者 position
属性。
float
属性设置元素地位绝对于其父元素的文本内容。文本会包住子元素。
右对齐:
<div class="parent">
<img src="logo.png" class="child">Lorem
</div>
.child {float: right;}
留神文本内容在 img 元素之后,此时图片的右部和顶部是挨着屏幕的,如果文本内容在图片之前,那么图片的顶部会挨着文本。