Css căn bản

CSS là gì?

• CSS là viết tắt của Cascading Style Sheets
• Styles xác định làm thế nào để hiển thị các phần tử HTML
• Styles bắt đầu có ở phiên bản HTML 4.0
• External Style Sheets được lưu trữ ở các tệp CSS

Cú pháp CSS

Một CSS rule có 2 phần chính: một selector, và một hay nhiều declarations:

Trong đó, selector là phần tử HTML thông thường mà bạn muốn định kiểu (style).

Mỗi declaration bao gồm một thuộc tính và một giá trị.

property là thuộc tính style mà nhằm thay đổi phần hiển thị. Mỗi property có một giá trị (value) tương ứng.

Nhóm phần tử với thẻ <span>:

Thẻ <span> dùng để nhóm một khối phần tử. Thẻ <span> trong HTML là một thẻ mà text áp dụng thẻ đó không xuống dòng, qua đó có thể viết CSS để định dạng cho các phần tử mong muốn.

Thẻ <span> chỉ có tác động khi thiết đặt các thuộc tính trong nó.

The <span> tag has very similar properties to the <div> tag, in that it changes the style of the text it encloses. But without any style attributes, the <span> tag won't change the enclosed items at all. 

The <span> tag has no required attributes.

Thẻ <div> 

Thẻ <div> có thể nhóm một hoặc nhiều khối phần tử, nó khác với thẻ <span> là thẻ <div> làm văn bản áp dụng thẻ đó xuống dòng. Thẻ <div> tương đương với 1 đoạn văn bản do đó nó sẽ xuống dòng.

The <div> tag defines logical divisions (defined) in your Web page. It acts a lot like a paragraph tag, but it divides the page up into larger sections. 

One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It acts as a paragraph end/beginning.

Selector:

Đại diện cho các phần tử html dựa trên các thuộc tính(tên, thuộc tính, nội dung) hoặc vị trí của chúng bên trong tài liệu HTML. Nó có thể là các tag HTML, class hay id. 

Ví dụ:

p a
    đại diện cho một nhóm các phần tử <a> (các links) mà nằm bên trong một phần tử <p>

Hoặc body, h2, p, img, #title, #content, .username,…

#entry img, đại diện các phần tử ảnh <img> nằm trong phần tử #entry.  

Ví dụ định nghĩa thuộc tính class cho một thẻ:

li.class1 
{  

    color:FF0000  

} 

li.class2 
{  

    color:0000FF 

} 

<li class="class1">Hello</li> 

<li class="class2">World</li>

p.center {text-align:center;}

A selector is the element that is linked to a particular style. E.g. p in 
p { padding: 10px; }

A class selector is a selector that uses a defined class (multiple per page). E.g. p.section in p.section { padding: 10px; }

An ID selector is a selector that uses an individually assigned identifier (one per page). E.g. p#section in CSS: #section 
{ padding: 10px; }
<p id="section">Text</p>

A contextual selector is a selector that defines a precise cascading order for the rule. E.g. p span in 
p span { font-style: italic; }
defines that all span-elements within a p-element should be styled in italics.

An attribute selector matches elements which have a specific attribute or its value. E.g. p span in 
p[title] { font-weight: bold; }
matches all p-elements which have a title attribute.

Pseudo-classes are special classes that are used to define the behavior of HTML elements. They are used to add special effects to some selectors, which are applied automatically in certain states. E.g. :visited in 
a:visited { text-decoration: underline; }

Pseudo-elements provide designers a way to assign style to content that does not exist in the source document. Pseudo-element is a specific, unique part of an element that can be used to generate content “on the fly”, automatic numbering and lists. E.g. :first-line or :after in 
p:first-line { font-variant: small-caps; }
a:link:after { content: " (" attr(href) ")"; }

Each CSS rules starts with a selector

We can create CSS rules that apply to these newly defined blocks of our document.
When we prefix the selector string with a hash character (#), it means that instead of
applying to a tag in the document, the selector applies to the tag that has the matching
id attribute. For example:
#header {
  background-color: #dde;
  border-top: 3px solid #36c;
}

The class attribute is very similar to the id attribute, except that the class attribute can be used over and over on any number of tags in the document. The general notion is that we use the id attribute to identify major blocks of our page and we use the class to format elements that may be repeated many times in the page. In this case, we are using a class because we might want to later add another navigation area in the #content area and then we can simply reuse the class attribute.
Make the following change to the navigation in the topics.htm file:
     <div id="header">
       <h1><a href="index.htm">AppEngineLearn</a></h1>
       <ul>
        <li><a href="sites.htm">Sites</a></li>
        <li><a href="topics.htm" class="selected">Topics</a></li>
       </ul>
   </div>
This gives us a handle so that we can style tags with class="selected" differently. To style this tag, we add the following to our CSS:
     #header li a.selected {
        color: black;
        text-decoration: none;
     }
The selector on this CSS rule says, “Within the div that has an id of header, when you
are inside of an <li> tag and you find an anchor tag with a class of selected, make the color black and remove the underline from the link.”
So we can reach in and very precisely change the selected link, leaving the formatting of the rest of the page unchanged.

Elements can have BOTH ID & Class:

There is nothing stopping you from having both an ID and a Class on a single element. In fact, it is often a very good idea. Take for example the default markup for a WordPress comment list item:

<li id="comment-27299" class="item">

It has a class applied to it that you may want for styling all comments on the page, but it also has a unique ID value (dynamically generated by WordPress, nicely enough). This ID value is useful for direct linking. Now I can link directly do a particular comment on a particular page easily.

It's sometimes useful to use both id and class. For example, a page has a header and a footer. I want these to look these same in terms of colour, font, etc. So they are class="bar", say. But they have position settings too. So one is id="header", the other id="footer".

Sự ưu tiên:

Áp dụng css cho các phần tử html được thực hiện ưu tiên theo trình tự sau:

> Thứ nhất là ưu  tiên áp dụng các CSS nội tuyến (định nghĩa bởi thuộc tính style bên trong thẻ html)

> Thứ hai là CSS bên trong(định nghĩa ở phần head)

> Thứ 3 là CSS bên ngoài

> Thứ tư là CSS mặc định của trình duyệt.

Thuộc tính !important.

Đặt thuộc tính này sau một thuộc  tính nào đó theo cú pháp selector { property:value !important } thì trình duyệt sẽ hiểu đây là một thuộc tính được ưu tiên hơn cả.

Đơn vị chiều dài trong CSS

% Phần trăm
in Inch (1 inch = 2.54 cm)
cm Centimeter
mm Millimeter
em

px Pixel

ex X-height
pt Point

pc Pica

display:block

Phần tử hiển thị trong một khỗi hộp (block box) mà có sự xuống dòng(a line break) trước và sau khối hộp.

Thuộc  tính overflow

Chỉ ra sẽ như thế nào nếu nội dung hiển thị tràn (overflows) ra ngoài phần box hiển thị.

(hidden: trình bày dữ liệu trong một phạm vi, dữ liệu vượt quá phạm vi sẽ không được hiển thị).

background-position
For y
   %|px|top|center|bottom
For x:
   %|px|left|center|right

e.g. top left
e.g. 50% right
e.g. 50% 20px

CSS Links

Có 4 loại selectors tương ứng với các trạng thái của link.

A:link
Định nghĩa style cho những links thông thường chưa click vào.
A:visited
Định nghĩa style cho những links đã ghé qua.
A:active
Định nghĩa style cho những links đang kích hoạt, nghĩa là link của nội dung trang  web đang mở ra hiện tại.
A:hover
Định nghĩa style cho những hovered links. Một link là hovered khi di chuột qua nó.

Pseudo-classes:

Cho phép bạn xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm (a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được  thăm (a:visited) hay khi liên kết đang được kích hoạt / đang giữ nhấn chuột (a:active).

Thuộc tính text-transform

Thuộc tính text-transform điều khiển tính chất viết hoa của văn bản.
(capitalize: Biến đổi ký tự đầu tiên của một từ thành ra ký tự in hoa (uppercase), ví dụ: 'This Is Css Document')

Thuộc tính font-family:

Thuộc tính font-family liệt kê một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên được liệt kê trong danh sách sẽ được dùng để áp dụng hiển thị phần trang web áp dụng nó. Nếu như trên máy tính truy cập  chưa  cài  đặt font này thì font thứ  hai trong danh sách sẽ  được ưu tiên…cho đến khi có một font phù hợp. 

Thuộc tính font-variant: 

Thuộc tính font-variant  được  dùng  để  chọn giữa chế  độ  bình  thường và small-caps của một font chữ. Một font small-caps là một font sử  dụng chữ  in hoa có kích cỡ  nhỏ  hơn  in hoa chuẩn để thay thế những chữ in thường. Nếu như font chữ dùng để hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế. 

Thuộc tính text-indent :

Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu  tiên  trong đoạn văn bản. Giá trị  thuộc  tính này là các đơn vị đo cơ bản dùng trong CSS. 

CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in relation to other elements.

The image below illustrates the box model:

Explanation of the different parts:

·         Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent

·         Border - A border that goes around the padding and content. The border is affected by the background color of the box

·         Padding - Clears an area around the content. The padding is affected by the background color of the box

·         Content - The content of the box, where text and images appear

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Width and Height of an Element

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins.

The total width of the element in the example below is 300px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px

Assume that you had only 250px of space. Let's make an element with a total width of 250px:

Example

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

Float & Clear

• the <body> element is the parent of both the <h1> element and the <p>
• the <h1> element and the <p> elements are both the children of the <body> element
• the <h1>, <p>, <img> and <a> elements are all descendants of the body element

The clear:both style on the footer tells the browser to “stop floating” and makes the footer stretch across all three columns.

CSS Shorthand
It’s possible to reduce the amount of CSS code by using “shorthand.” One example of this is padding and margin styles applied to an element, where
margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;
can be replaced by:
margin: 5px 10px;
There are “shorthand” styles at the beginning of each style defi nition. After you have figured out the styles, fi  ll the shorthand versions in and delete the long versions. The syntax is
font: font-size |font-style | font-variant | font-weight | line-height | font-family
Here is an example. Rather than using this
font-size:1em; font-family:Arial,Helvetica,sans-serif; font-style:italic;
font-weight:bold; line-height:1.3em;
use this font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;

Specificity
If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.
Css có tính tuyến tính, định nghĩa sau cùng của 1 phần tử sẽ override định nghĩa trước đó:
p { color: red; } p { color: blue; }

p elements would be coloured blue because that rule came last.
Định nghĩa càng cụ thể thì độ ưu tiên càng cao
div p { color: red; }
p { color: blue; }
It might seem that p elements within a div element would be coloured blue, seeing as a rule to colour p elements blue comes last, but they would actually be coloured red due to the specificity of the first selector. Basically, the more specific a selector, the more preference it will be given when it comes to conflicting styles.

The actual specificity of a group of nested selectors takes some calculating. Basically, you give every id selector ("#whatever") a value of 100, every class selector (".whatever") a value of 10 and every HTML selector ("whatever") a value of 1. Then you add them all up and hey presto, you have the specificity value.

• p has a specificity of 1 (1 HTML selector)
• div p has a specificity of 2 (2 HTML selectors; 1+1)
• .tree has a specificity of 10 (1 class selector)
• div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
• #baobab has a specificity of 100 (1 id selector)
• body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

So if all of these examples were used, div p.tree (with a specificity of 12) would win out over div p (with a specificity of 2) and body #content .alternative p would win out over all of them, regardless of the order.
If two selectors apply to the same element, the one with higher specificity wins.

Different value for the white-space property
Continuous long strings of text to wrap within the width of our <pre> content (or other block-level element, such as <div> and <p>), we need a different value for the white-space property. Here are our options:
normal – Default value for the white-space property. Sequences of whitespace are collapsed to a single whitespace. <pre> content will wrap at whitespaces according to the width of the element.

nowrap – Sequences of whitespace are collapsed to a single whitespace. <pre> content will wrap to the next line ONLY at explicit <br /> elements.

pre – All whitespace is preserved. <pre> content will wrap at implicit line breaks. This is the default behavior of the <pre> element.

pre-line – Sequences of whitespace are collapsed to a single whitespace. <pre> content will wrap at whitespaces and line breaks according to the width of the element.

pre-wrap – All whitespace is preserved. <pre> content will wrap at whitespaces and line breaks according to the width of the element.

inherit – Value of white-space inherited from parent element.

In a perfect world, we could simply use white-space:pre-line, like so:
pre {
white-space: pre-line; // mã nguồn sẽ bị mất định dạng
width: 300px;
}

Although the white-space property is supported by all major browsers, unfortunately many of them fail to apply the property to long strings of continuous text. Different browsers will wrap long strings, but they require different white-space values in order to work. Fortunately, we can apply the required values for each browser by including multiple white-space declarations in our pre selector. This is exactly what we are doing with the CSS code solution presented at the beginning of this article.