HTML:Hyper Text Markup Language is used to give websites structure with text,links,images, and other fundamental elements.
CSS: Cascading Style Sheets is used to change the appearance of HTML elements.
[HTML]
Headings:
h1-h6(From the biggest to the smallest)
Example:
<h1>Heading</h1>
Paragraph:
It is used for non-heading text
Example:
<p>text</p>
Link:
Example:
<a href="http://codecademy.com">Click here</a> to learn how to make a website!
Image:
Example:
HTML video:
Example:
<video width="320" height="240" controls> <source src="video-url.mp4" type="video/mp4"></video>
width & height: set the size of the screen that displays the video.
controls:adds play, pause and volume control.
source src: sets the URL of the video to play.
type: specifies different video formats.
List:
Example:
<ul>
<li>A list item</li>
<li>A second list item</li>
<li>A third list item</li>
</ul>
ul: tags create the unordered list
li: tags contain each list item.
Div:
Example:
<div class="main">
...
</div>
div : divides page by enclosing groups of elements can be organized, moved and styled independently from others.
[CSS]
A html file link to a css file like this:
<link rel="stylesheet" type="text/css" href="main.css"/>
rel: specifies the relationship between files
type: specifies the type of file link to
href: provides the URL of the file being linked to
selector: h1{
property&value: color:red;
}
CSS properties:
three ways to represent color:
color:red
color: #FF0000 Hexadecimal color(#RRGGBB)
color:rgb(128,0,128) RGB(Red,Green,Blue)
class selector can be identified by a dot "."
Example:
.main{
color:#ffffff;
}
websites often use more than one font family.
For example:
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size:
There are three ways to set font-size:
1.pixel(px):Standard unit of measurement for sizing fonts and other HTML elements.
2.rem: Represents the default font size for the web browser. On most web browsers, 1rem equals to 16px, 2rem equals to 32px and so on.
3.em: A relative value that changes in proportion to the size of the parent element. For example, if a parent element has font-size:20px; child elements with font-size: 1em; mean 20px.
using a '# 'symbol to edit id attribute
id attribute takes precedence over class
Boundaris and space:
content: includes text, images……
padding: the space between the contant and the border
border: the outline of an HTML page element.
margin: the space between the HTML page element and the next nearest element.
margin->border->padding->content
border:
requires three parts:
thickness: using pixels,ems,or rems
type:sets the border type
color
Example:
p {
border: 2px solid black;
}
Display:
There are two display types: inline & block
Example:
li {
display: inline;
}
folat: floats elements left or right
Example:
.logo{
float: left;
}
flex: can be used to align multiple page elements horizontally
Example:
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
flex-wrap:wrap: makes sure no child element moves off the page
justify-content: center: centers rows of elements
position: posits elements in exact locations on a webpage.
Example:
.container {
position: relative;
top: 10px;
left: 20px;
}
:active is a psuedo-class selector, which we use to style an element only while it's being clicked
Bootstrap split the webpage into 12 vertical bars.
Bootstrap classes:
row: Arranges HTML elements in rows, and can be useful when building headers/navigation menus, main feature sections, supporting content sections and footers.
jumbotron: Used to create large showcase sections featuring important content.
col-sm-*: Used to span a specified number of columns on the Bootstrap grid. The "sm" is short for "small", and maintains desired CSS layouts on small screens (tablet-sized).
text-right: Bootstrap class used to orient text to the right side of the webpage.
btn btn-primary: Bootstrap class used to style page elements as buttons.
网友评论