HTML5
external link:
1
2
3
4<!--href: URL address-->
<!--target:where to open the link-->
<!--eg:"_blank"specifies to open the link in a new tab.-->
<a href="http://freecatphotoapp.com" target="_blank">cat photos</a>internal link:
1
2<a href="#contacts-header">Contacts</a>
<a id="contacts-header">Contacts</a>dead link:hash symbol ,to create a dead link.
eg:href="#"
let the picture to a link:
1
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
Create a Form Element:
1
<form action="/url-where-you-want-to-submit-form-data"></form>
Create a placeholder in the input field.
1
<input type="text" placeholder="cat..." required>
Create a Set of Radio Buttons
1
2
3<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
Basic CSS
Basic CSS:Change the Color of Text
1
<h2 style="color: blue;">CatPhotoApp</h2>
Import a Google Font
1
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
border-radius: 50%
Use the
[type = 'radio']
to set the property.1
2
3[type='radio'] {
margin: 20px 0px 20px 0px;
}Use a custom CSS Variable
1
2--penguin-skin: gray;
background: var(--penguin-skin);
Applied Visual Design
- add a box-shadow to a Card-like Element
The
box-shadow
property applies one or more shadows to an element.
The
box-shadow
property takes values foroffset-x
(how far to push the shadow horizontally from the element),offset-y
(how far to push the shadow vertically from the element),blur-radius
,spread-radius
and a color value, in that order. Theblur-radius
andspread-radius
values are optional.
Here’s an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:
1 box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
Create a Gradual CSS Linear Gradient
1
2
3
4
5
6
7
8
9
10background: linear-gradient(gradient_direction, color1, color2,...);
background: linear-gradient(35deg, #CCFFF, #FFCCCC);
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}Use the css transform scale property to scale an element on hover
1
2
3
4
5
6
7
8
9
10
11<style>
div {
width: 70%;
height: 100px;
margin: 50px auto;
background: linear-gradient(53deg, #ccfffc, #ffcccf);
}
div:hover {
transform: scale(1.1);
}
</style>Learn how the css
@keyframes
and animation properties workanimation-name
:sets the name of the animation,which is later used by@keyframes
to tell CSS which rules go with which animations.animation-duration
:sets the length of time for the animation.animation-iteration-count
:the count of animation will stop after running, but it’s possible to make the animation run continuously by setting that value to infinite.animation-timing-function
:controls how quickly an animates element changes over the duration of the animation.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
}
#rect {
animation-name: rainbow;
animation-duration: 4s;
}
@keyframes rainbow {
0% {
background-color: blue;
}
50% {
background-color: green;
}
100% {
background-color: yellow;
}
}
</style>
有问题?发送 issues 给我~