Thứ Tư, 16 tháng 9, 2015
Thứ Tư, 26 tháng 8, 2015
Chủ Nhật, 16 tháng 8, 2015
Site 1
-----------------------------------
---------------------------------------------------------
---------------------------------------------------------------
------------------------------------------------------------
-----------------------------------------------------------
nhóm:em ,Ngọc Hiếu, Minh TRí, Thanh Long,Nguyễn Long
Thứ Tư, 12 tháng 8, 2015
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
Đăng ký:
Bài đăng (Atom)