Scribd
Upload
2 views

Html_Css

The document provides a comprehensive overview of HTML and CSS structures, including the syntax for various HTML elements and CSS properties. It covers formatting elements, attributes, layout, styling, and form handling, along with examples for each. Additionally, it discusses concepts like box model, positioning, and responsive design techniques.

Uploaded by

nguyenquocvuong160705
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Html_Css

The document provides a comprehensive overview of HTML and CSS structures, including the syntax for various HTML elements and CSS properties. It covers formatting elements, attributes, layout, styling, and form handling, along with examples for each. Additionally, it discusses concepts like box model, positioning, and responsive design techniques.

Uploaded by

nguyenquocvuong160705
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

HTML

Cấu trúc file html


<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="mystyle.css">
<link rel="icon" type="image/x-icon" href=" ">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
</body>
</html>

Formatting Element
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
Các thẻ trong html
- Heading: <h1>  <h6>
- Paragraph: <p>
- <span></span>: được sử dụng cho 1 đoạn văn nhỏ trong 1 đoạn văn
lớn
- <img scr=”” alt=””>  <map></map>
<picture></picture>
- Link: <a href=”” target=” _self/_blank/_parent/_top”></a>
- <br>
- <hr>
- <pre></pre>
- Quotations: <blockquote cite=””></blockquote>
- Short quotations: <q></q>
- Abbreviations: <abbr title=””></abbr>
- Contact information: <address><address>
- Work title: <cite><cite>
- <bdo dir=””></bdo>
- Comment: <!-- Write your comments here -->
- Table:  <colgroup> <col span=””></colgroup>
<table>
<caption>\</caption>
<thead>
<tr> : row
<th colspan="2"> </th> : heading
<th rowspan="2"> </th>
</tr>
</thead>

<tbody>
<tr>
<td></td>: cells
<td></td>
<td> </td>
</tr>
</tbody>
</table>
- List: <ul>, <ol>, <dl>  attribure type = “1/A/a/I/i”
<ul type = “1”>
<li> </li>
<li></li>
<li> </li>
</ul>

<dl>
<dt> </dt>
<dd> </dd>
<dt> </dt>
<dd>dd>
</dl>
- <div>: group sections
<div>
<h2> </h2>
<p></p>
<p></p>
</div>
- <iframe src="url" name=”” title="description"></iframe>
Attribute class và id
HTML layout elements

File Path

./ : cùng trong 1 thư mục

CSS
Syntax: Selector { Property: value; }
Comment: /* */
Selector:
 .class
 #id
 *
 h1, p, div
 Element.class
Background
Background-color:
Opacity: 0.0  1.0
Background-image: url(“”)
Background-repeat: no-repeat, repeat-x, repeat-y
Background-position:
Background-attachment: fixed, scroll
Background_size: cover, contain
Background shorthand: background: color, image, size/position.repeat

Border
Border-styte: top, right, bottom, left
 dotted - Defines a dotted border
 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the
border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-
color value
 inset - Defines a 3D inset border. The effect depends on the border-
color value
 outset - Defines a 3D outset border. The effect depends on the border-
color value
 none - Defines no border
 hidden - Defines a hidden border
Border-width: top, right, bottom, left
Border-color: top right, bottom, left
 border-top-…:
border-right-…:
border-bottom-…:
border-left-…:
Border shorthand: border: width style color
Border-radius

Margin
Margin: auto, inherit
Margin-collapse

Padding
Height and Width Value:
 auto - This is default. The browser calculates the height and width
 length - Defines the height/width in px, cm, etc.
 % - Defines the height/width in percent of the containing block
 initial - Sets the height/width to its default value
 inherit - The height/width will be inherited from its parent value
Max-width, min-width
Max-height, min-height

Box model
Outline

 outline-style: like border-style


 outline-color
 outline-width
 outline-offset: adds space between an outline and the edge/border of
an element.
 outline: width, style, color

Text
Text alignment:
 Text-align: left, right, center, justify
 text-align-last: align the last line of a text.
 Direction: rtl (right to left)  unicode-bidi
 Vertical-align: baseline, text-top, text-bottom, sub, super
Text decoration:
 text-decoration-line: overline, line-through, underline, overline
underline
 text-decoration-color:
 text-decoration-style:
 text-decoration-thickness: auto 5px 40%
 text-decoration (shorthand): line color style thickness (none)
Text-transform: uppercase, lowercase, capitalize
Text spacing:
 text-indent
 letter-spacing
 line-height
 word-spacing
 white-space: nowrap
text-shadow: horizontal vertical blur-effect color

Font
 Font-familly
 Font-style: normal, italic, oblique
 Font-weight: normal, bold
 Font-variant: normal, small-caps
 Font-size: px, em, %, vw
 Shorthand: style variant weight size/line-height familly

Icons
Font Awesome Icons: <script
src="https://kit.fontawesome.com/yourcode.js"
crossorigin="anonymous"></script>
Bootstrap Icons: <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cs
s">
Google Icons: <link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">

Links
 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked

a:hover MUST come after a:link and a:visited

a:active MUST come after a:hover

Lists
 List-style-type: circle square upper-roman lower-alpha none
 List-style-image: url(“”)
 List-style-position: outside, inside
 Shorthand: type position image
Table
Border
Border-collapse: collapse
Width
Height
Text-align
Vertical-align
:hover selector
:nth-child(even - odd)
Overflow-x: auto
Border-spacing:
Empty-cells:
Caption-side:
Table-layout:

Display
 Block: start on a new line and take up the full width
 Inline: not start on a new and only take up as much as necessary, not
allow to set width and height, top and bottom margin/padding is not
repected.
 None:
 Inline-block: allow set height and width, top and bottom
margin/padding is repected, not add a line break
Visibility: hidden

Position
 Static: (default) Không ảnh hưởng bởi các thuộc tính như top, right,
bottom, left.
 Relative: Phần tử được định vị tương đối so với vị trí ban đầu của nó
 Fixed:
 Absolute: Phần tử được định vị tuyệt đối so với phần tử tổ tiên gần
nhất có position khác static.
Nếu không có tổ tiên nào như vậy, nó sẽ được định vị so với khung nhìn
(viewport).
 Sticky:
(top, right, bottom, left)

Z-index
overflow
 visible - Default. The overflow is not clipped. The content renders
outside the element's box
 hidden - The overflow is clipped, and the rest of the content will be
invisible
 scroll - The overflow is clipped, and a scrollbar is added to see the rest
of the content
 auto - Similar to scroll, but it adds scrollbars only when necessary
 overflow-wrap
 overflow-x và overflow-y

Float
 left - The element floats to the left of its container
 right - The element floats to the right of its container
 none - The element does not float (will be displayed just where it
occurs in the text). This is default
 inherit - The element inherits the float value of its parent

Clear
The clear property specifies what should happen with the element that is
next to a floating element.
 none - The element is not pushed below left or right floated elements.
This is default
 left - The element is pushed below left floated elements
 right - The element is pushed below right floated elements
 both - The element is pushed below both left and right floated
elements
 inherit - The element inherits the clear value from its parent

Combinators
 Descendant combinator (space): (ex: div p) selects all <p>
elements inside <div> elements
 Child combinator (>): (ex: div > p) selects all <p> elements that
are children of a <div> element
 Next sibling combinator (+): (ex: div + p) selects the first <p>
element that are placed immediately after <div> elements
 Subsequent-sibling combinator (~): (ex: div ~ p) selects all <p>
elements that are next siblings of <div> elements
 Ex: (.class1.class2)  select all element have both 2 these classes

Pseudo-classes
Syntax: selector:pseudo-class {
property: value;}
 :link - unvisited link
 :visited - visited link
 :hover - mouse over link
 :active - selected link
 :first-child - the first child of the element
 :lang
 :root : đặt biến

Pseudo-elements
Syntax: selector::pseudo-element {
property: value;}
 ::first-line
 ::first-letter
 ::before - insert some content before the content of an element.
 ::after - insert some content after the content of an element.
 ::marker - selects the markers of list items.
 ::selection - the part of an element that is selected by a user.

Opacity
Opacity: 0.0  1.0

Navigation Bar
Box-sizing
- Kích thước element
- Theo mặc định, các phần tử có kích thước được tính dựa trên content-
box, có nghĩa là kích thước width và height chỉ áp dụng cho nội dung
(content) của phần tử, không bao gồm padding và border.
 content-box (mặc định): Kích thước của phần tử chỉ tính từ nội dung
(content), không tính padding và border.
 border-box: Kích thước của phần tử bao gồm nội dung, padding và
border. Khi sử dụng border-box, các phần tử sẽ giữ kích thước chính xác
mà bạn chỉ định (ví dụ: width: 100px), bao gồm cả padding và border.

Đơn vị của kích thước:


Đơn vị tuyệt đối: px, cm ,mm, pt, pc,in
Đơn vị tượng đối:
 Đơn vị liên quan đến font chữ

 em dựa vào kích thước của phần tử cha trực tiếp.


 rem dựa vào kích thước của phần tử gốc (html).
 Đơn vị liên quan đến viewport

Các hàm trong css


Var()
Linear-gradient()
Rgba() – rgb()
Calc()
Attr()
Priority
1. !Important
2. Internal – External : gọi sau thì ưu tiên hơn
3. Inline – 1000
4. #id – 100
5. .class -10
6. Tag -1
7. Equal specificity
8. Universal selector(* selector) and inherited

Transform
translate: Di chuyển phần tử theo các trục.
 translateX(px) - Di chuyển theo chiều ngang.
 translateY(px) - Di chuyển theo chiều dọc.
 translate(x, y) - Di chuyển đồng thời cả hai chiều.
rotate: Xoay phần tử theo góc độ.
 Đơn vị là deg (độ), rad (radian).
scale: Thay đổi kích thước phần tử.
 scaleX(number) - Thay đổi chiều ngang.
 scaleY(number) - Thay đổi chiều dọc.
 scale(x, y) - Thay đổi đồng thời cả hai.
skew: Nghiêng phần tử theo trục.
 skewX(angle) - Nghiêng theo chiều ngang.
 skewY(angle) - Nghiêng theo chiều dọc.
 skew(x, y) - Nghiêng đồng thời cả hai.

Form
An HTML form is used to collect user input. The user input is most often sent
to a server for processing.
<form action=”” target=”” method=”” autocomplete=””
novalidate>
<label for=””></label>
<input name=”” value=”” readonly required placeholder pattern autofocus
disabled size=”” maxlength=”” step=”” multiple min=”” max=””
formnovalidate="formnovalidate" formtarget=" " formmethod=" "
formenctype=”” form=”” formaction="”></input>
</form>

Type: password, submit, reset, color, date, datetime-local, email, image, file,
month, number, range, search, tel, time, url, week
The input readonly attribute specifies that an input field is read-only (cannot
be modified)

<textarea>
<input type=”password”>

The action attribute defines the action to be performed when the form is
submitted.
Usually, the form data is sent to a file on the server when the user clicks on
the submit button.

The method attribute specifies the HTTP method to be used when


submitting the form data.
The form-data can be sent as URL variables (with method="get") or as
HTTP post transaction (with method="post").

The autocomplete attribute specifies whether a form should have


autocomplete on or off.
When autocomplete is on, the browser automatically complete values
based on values that the user has entered before.
The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be
validated when submitted.

<form action=”” >


<label for=””></label>
<select id=" " name="cars" size=”” multiple>
<optgroup label=" ">
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
</optgroup>
</select>
</form>
The <select> element defines a drop-down list:
The <option> element defines an option that can be selected.
The <optgroup> tag is used to group related options in a <select> element
(drop-down list).

Use the size attribute to specify the number of visible values:


Use the multiple attribute to allow the user to select more than one value:

By default, the first item in the drop-down list is selected.


To define a pre-selected option, add the selected attribute to the option:
<option value="fiat" selected>Fiat</option>

<form action=””>
<textarea name=" " rows="" cols=""> </textarea>
<input type="submit">
</form>

The <textarea> element defines a multi-line input field (a text area):


The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

The <button> element defines a clickable button:


<form action=””>
<fieldset>
<legend></legend>
<label for=" "> </label><br>
<input type="text" id=" " name=" " value=" "><br>
</fieldset>
</form>

The <fieldset> element is used to group related data in a form.


The <legend> element defines a caption for the <fieldset> element.
The <datalist> element specifies a list of pre-defined options for
an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value=" ">
<option value=" ">
<option value=" ">
<option value=" ">
<option value=" ">
</datalist>
</form>

Flexbox
The Flexible Box Layout Module, makes it easier to design flexible
responsive layout structure without using float or positioning, is a
layout method for arranging items in rows or columns.
A flexbox always consists of: flex container and flex items.
Flex container
Setting flex for attribute display of flex container
The CSS properties we use for the flex container are:
 flex-direction: row, column, row-reverse, column-reverse.
 flex-wrap: nowrap, wrap, wrap-reverse.
 flex-flow: a shorthand property for setting both the flex-
direction and flex-wrap properties.
 justify-content: center, flex-start, flex-end, space-around, space-
between, space-evenly (horizontally).
 align-items: center, flex-start, flex-end, stretch, baseline, normal
(vertically).
 align-content: center, stretch, flex-start, flex-end, space-around,
space-between, space-evenly

Flex items
 order: The order value must be a number, default value is 0.
 flex-grow: The value must be a number, default value is 0.
 flex-shrink: The value must be a number, default value is 0.
 flex-basis: initial length of a flex item.
 Flex: a shorthand property for the flex-grow, flex-shrink, and flex-
basis properties.
 align-self: overrides the default alignment set by the
container's align-items property.

You might also like