Thứ Sáu, 31 tháng 7, 2015
Thứ Tư, 22 tháng 7, 2015
Bai 6
Taking up space
display property
+block: It won't let anything sit next to it on the page! It takes up the full width.
+inline-block:This makes the element a block box, but will allow other elements to sit next to it on the same line.
+inline:This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs
+none: This makes the element and its content disappear from the page entirely!
Sketching it out
The margin is the space around the element. The larger the margin, the more space between our element and the elements around it
display property
+block: It won't let anything sit next to it on the page! It takes up the full width.
+inline-block:This makes the element a block box, but will allow other elements to sit next to it on the same line.
+inline:This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs
+none: This makes the element and its content disappear from the page entirely!
Sketching it out
The margin is the space around the element. The larger the margin, the more space between our element and the elements around it
The border is the edge of the element. It's what we've been making visible every time we set the
borderproperty.
The padding is the spacing between the content and the border. We can adjust this value with CSS to move the border closer to or farther from the content.
The content is the actual "stuff" in the box. If we're talking about a
floats:we determine where an element on the page
<p>element, the "stuff" is the text of the paragraph.floats:we determine where an element on the page
clear:will immediately move below any floating elements on the of the page;
absolute positioning. When an element is set to
position: absolute, it's then positioned in relation to the first parent element it has that doesn'thave position: staticRelative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the default staticpositioning. fixed positioning anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past.
bai5 CSS CLASSES AND IDS
All HTML elements are selectors
we've styled the HTML tags
any HTML element can be a CSS selector! You can modify
-it's possible to nest HTML elements inside one another, So what if you want to grab
div div p{
/*CSS stuff!*/
}
you can use *{
} to CSS styling to every element on the page:
Parents, children, and siblings
If you think of the
Can you swing it?
we've styled the HTML tags
<h1></h1> with the CSS selector h1, <p></p> with p, and so on.any HTML element can be a CSS selector! You can modify
<ul>s, <table>s, and even the entire<body> by selecting ul, table, and body, respectively-it's possible to nest HTML elements inside one another, So what if you want to grab
<p>s that are inside two <div>s, and not all<p>.You select those in the CSS tab like this:div div p{
/*CSS stuff!*/
}
you can use *{
} to CSS styling to every element on the page:
Parents, children, and siblings
If you think of the
<html> tag as the trunk of the tree,<head> and<body>—as its children. Both tags are children of <html>, and <html> is theirparent element.they are siblings.Can you swing it?
<p> that is nested inside a <div> that is nested somewhere inside another <div>. If you want to grab direct <p> ement that is directly nested inside another element, with no elements in between—you can use the> symbol,Class and ID Selectors
.
Thứ Tư, 15 tháng 7, 2015
bai4: CSS
CSS
CSS what is
Css:Cascading StyleSheets.
-used to describe the appearance and formatting of HTML
-There are two main reasons for separating orm/formatting (CSS) from your functional content/structure (HTML):
+You can apply the same formatting to several HTML elements without rewriting code (e.g.
style="color:red":) over and over
<link type="text/css" rel="stylesheet" href="stylesheet.css
+you can apply similar appearance and formatting to several HTML pages from a single CSS file
+you can apply similar appearance and formatting to several HTML pages from a single CSS file
CSS systax:
selector{
property:value;
}
A selector can be any HTML element, such as
<p>, <img>, or <table>A value is a possible setting for color,font-family;Another cool advantage of CSS is that you can set many properties for one selector. ex p{color:font-family:}it's important to remember to put a semicolon (;) at the end of each line.*Commen
systax/*aaaaaaaaaa*/
Hexawhatnow?
-Hexadecimal counting is base-16. Each digit can be the numbers 0 through 9or the letters a through f
-Hex values always start with a pound sign (
#), are up to six "digits" long, and are case-insensitive.
Pixels and ems
-When we've asked you to adjust font size,you should use px or em
ex: p{
font-size:10px;
}
Backup values
p{
font-family:Tahoma,verdana,sans-serif;
}
CSS will first try to apply Tahoma to your paragraphs. If the user's computer doesn't have that font, it will try Verdana next, and if that doesn't work, it will show a default sans-serif font.
Background color, height, and width
-background-color:color of your block,you set to a color or hex value
-height:about height of paragrap you set to a value in pixels
-width:about width of paragrap you set to a value in pixels or em.
Bordering on insanity
Many HTML elements support the
border property. This can be especially useful with tables.
The
border property in turn supports several values. example
selector{
border:2px solid red;
}
Links and text decoration
-Links have a lot properties as font, color, size, and so on.
-But links also have a property,
text-decoration, that you can change to give your links a little more custom flair. You're probably used to seeing links that are blue and underlined, right
Thứ Hai, 13 tháng 7, 2015
Bai3: HTML
HTML
tables
Tables are very useful. We use them to store tabular data so it is easy to read!
-we use <table> tag create table.
-table need have row and column:
-we use <tr></tr> create a table row and <td></td> for create a table column
-To make our table look a little more like a table, we'll use the <thead> and
-we are use <thead> tag for the hold the heading for each column.
-table is missing a title. We want to add a title row that goes all the way across the top.we need to use the colspan attribute
-ex:
<th colspan="2">aaaaaaaaa</th>
-added some styling to the table to make it a bit easier to read.we are use style such as
border-collapse:collapse
color:red
colspan="2"
padding:5px ; border-bottom;border-left
-we use <div></div> allows you to divide your page into containers.This will come in handy when you see your code or orther people understand your code easily than.and also easier to edit code.
-<span > allows to control styling for smaller parts of your page, such as text
tables
Tables are very useful. We use them to store tabular data so it is easy to read!
-we use <table> tag create table.
-table need have row and column:
-we use <tr></tr> create a table row and <td></td> for create a table column
-To make our table look a little more like a table, we'll use the <thead> and
<tbody> tags. These go within the<table> tag and stand for table head and table body, respectively.-we are use <thead> tag for the hold the heading for each column.
-table is missing a title. We want to add a title row that goes all the way across the top.we need to use the colspan attribute
-ex:
<th colspan="2">aaaaaaaaa</th>
-added some styling to the table to make it a bit easier to read.we are use style such as
border-collapse:collapse
color:red
colspan="2"
padding:5px ; border-bottom;border-left
-we use <div></div> allows you to divide your page into containers.This will come in handy when you see your code or orther people understand your code easily than.and also easier to edit code.
-<span > allows to control styling for smaller parts of your page, such as text
Chủ Nhật, 12 tháng 7, 2015
Bai 2: Task2 HTML
HTML
Ordered lists
ordered list is simply a list that is numbered:
exemple:
<ol>
<li><li>
<li><li>
</ol>
Unordered lists
- 1.First, we open our list with an unordered list
<ul>tag - 2.For each item we wish to add to the list, we use a list item tag
<li>with text in between - 3.We then tell the browser we are done with our list by calling our closing
</ul>tag - Lists inside a list
- if you have an ordered list and you want have other list inside it.you can nested it with together.
- -you've been nesting tags already. When you nest tags, the last tag you open is the first one you close.
- ex:<ol>
- <li>
- <ul>
- <li></li>
- </ul>
- </li>
- </ol>
- Making comments
- You can include little notes in your HTML code that the browser won't display. But it will be in the code to help you remember why you did certain things or for other people know that code you made.
- <!-- -->
- Font size
- Let's change the size of the text.you use the style attribute. We make it equal to font-size, followed by a colon, the size you want, and end it with
px. - ex <p style="font-size :5px"></p>
- Font color
- To change the color of text, simply add the style attribute in the opening tag, then make the style equal to "color:favorite color and if you want to change the color and the size of the text? Simple! Just add a semi-colon between each bit.
- Font family
- We want to decide what font type to use. We can do this using
font-family - ex <p style="font-family: font you want"></p>
- Background color
- can use the style attribute and set it equal to
"background-color: favorite colorto change the color of the webpage's background. - Aligning the texthelps you align word
- ex:<p style="text-align:centre or right or left "></p>
- Strong words!
- made bold text
- ex <strong>aaaaaaaaa</strong>
- Emphasize words!
- made emphasize text
- ex : <em>aaaaaaaa</em>
Đăng ký:
Bài đăng (Atom)