Sổ tay CSS pdf

Question

CSS là một trong những ngôn ngữ mã hóa phổ biến nhất hiện có, được các nhà phát triển sử dụng để tạo các trang web động, tương tác. Nếu bạn đang tìm kiếm một số sách CSS PDF tuyệt vời để giúp bạn trở thành chuyên gia viết mã bằng CSS, thì không cần tìm đâu xa – chúng tôi có mọi thứ, từ hướng dẫn dành cho người mới bắt đầu đến hướng dẫn chuyên sâu sẽ giúp bạn bắt đầu và chạy nhanh chóng.

Nội dung chính Show

Hiểu rõ về CSS có thể cực kỳ hữu ích cho cả những nhà phát triển web đầy tham vọng, cũng như những người chỉ muốn cải thiện kỹ năng xây dựng trang web của riêng họ

Chúng tôi cũng cung cấp các sách CSS PDF chuyên sâu chứa các hướng dẫn chi tiết cho các tình huống phức tạp hơn. Với những cuốn sách này, bạn có thể tìm hiểu cách xây dựng các trang web và ứng dụng web mạnh mẽ để tận dụng các tính năng mạnh mẽ có sẵn trong CSS

Mẹo để nâng cao kỹ năng CSS của bạn

Khi bạn đã có nền tảng kiến thức CSS tốt, điều quan trọng là phải thực hành và triển khai các kỹ năng mới của bạn vào các dự án. Mở rộng kiến thức cơ bản có thể giúp bạn sáng tạo và thử nghiệm các kỹ thuật khác nhau – có rất nhiều điều để khám phá. Và đừng lo lắng nếu bạn cần hướng dẫn hoặc định hướng – chúng tôi đã cung cấp cho bạn một loạt hướng dẫn dành cho người mới bắt đầu và cách thực hiện chuyên sâu. Nhận sách CSS PDF tốt nhất tại đây, ngay bây giờ

Lựa chọn sách CSS hay nhất của chúng tôi chắc chắn sẽ cung cấp tài nguyên hoàn hảo để bạn hiểu và thành thạo ngôn ngữ mạnh mẽ này. Với mọi thứ từ hướng dẫn dành cho người mới bắt đầu đến hướng dẫn chuyên sâu, tất cả những gì bạn phải làm là quyết định cuốn sách nào phù hợp nhất với mình

Tận dụng khóa học này có tên là Cẩm nang CSS để cải thiện kỹ năng phát triển Web của bạn và hiểu rõ hơn về css

Khóa học này được điều chỉnh phù hợp với trình độ của bạn cũng như tất cả các khóa học css pdf để làm phong phú thêm kiến thức của bạn

Tất cả những gì bạn cần làm là tải xuống tài liệu đào tạo, mở nó và bắt đầu học css miễn phí

Hướng dẫn này đã được chuẩn bị cho người mới bắt đầu để giúp họ hiểu cơ bản về phát triển Web css. Sau khi hoàn thành hướng dẫn này, bạn sẽ thấy mình có trình độ chuyên môn vừa phải về css từ đó bạn có thể nâng mình lên các cấp độ tiếp theo

Hướng dẫn này được thiết kế dành cho sinh viên css, những người hoàn toàn không biết về các khái niệm css nhưng họ có hiểu biết cơ bản về đào tạo phát triển Web

Một loạt các hướng dẫn toàn diện bao gồm các thành phần được tạo kiểu, CSS và tất cả các phát triển về bố cục và giao diện người dùng

Được dạy bởi Willie Yam

Bắt đầu học

Gồm 6 phần

Mua bao gồm quyền truy cập vào hơn 50 khóa học, hơn 320 hướng dẫn cao cấp, hơn 300 giờ video, tệp nguồn và chứng chỉ

CSS thường nhanh chóng bị các nhà phát triển coi là thứ dễ học hoặc thứ bạn chỉ cần chọn khi cần nhanh chóng tạo kiểu cho trang hoặc ứng dụng. Due to this reason, it’s often learned on-the-fly, or we learn things in isolation right when we have to use them. This can be a huge source of frustration when we find that the tool does not simply do what we want

This article will help you get up to speed with CSS and get an overview of the main modern features you can use to style your pages and apps

I hope to help you get comfortable with CSS and get you quickly up to speed with using this awesome tool that lets you create stunning designs on the Web

Click here to get a PDF / ePub / Mobi version of this post to read offline

CSS, a shorthand for Cascading Style Sheets, is one of the main building blocks of the Web. Its history goes back to the 90’s, and along with HTML it has changed a lot since its humble beginnings

As I’ve been creating websites since before CSS existed, I have seen its evolution

CSS is an amazing tool, and in the last few years it has grown a lot, introducing many fantastic features like CSS Grid, Flexbox and CSS Custom Properties

This handbook is aimed at a vast audience

First, the beginner. I explain CSS from zero in a succinct but comprehensive way, so you can use this book to learn CSS from the basics

Then, the professional. CSS is often considered like a secondary thing to learn, especially by JavaScript developers. They know CSS is not a real programming language, they are programmers and therefore they should not bother learning CSS the right way. I wrote this book for you, too

Next, the person that knows CSS from a few years but hasn’t had the opportunity to learn the new things in it. We’ll talk extensively about the new features of CSS, the ones that are going to build the web of the next decade

CSS has improved a lot in the past few years and it’s evolving fast

Even if you don’t write CSS for a living, knowing how CSS works can help save you some headaches when you need to understand it from time to time, for example while tweaking a web page

Thank you for getting this ebook. My goal with it is to give you a quick yet comprehensive overview of CSS

Flavio

You can reach me via email at flavio@flaviocopes. com, on Twitter @flaviocopes

My website is flaviocopes. com

Mọi quy tắc CSS đều kết thúc bằng dấu chấm phẩy. Dấu chấm phẩy không phải là tùy chọn, ngoại trừ sau quy tắc cuối cùng. But I suggest to always use them for consistency and to avoid errors if you add another property and forget to add the semicolon on the previous line

Formatting and indentation

There is no fixed rule for formatting. This CSS is valid

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

but a pain to see. Stick to some conventions, like the ones you see in the examples above. stick selectors and the closing brackets to the left, indent 2 spaces for each rule, have the opening bracket on the same line of the selector, separated by one space

Correct and consistent use of spacing and indentation is a visual aid in understanding your code

LỊCH SỬ SƠ LƯỢC VỀ CSS

Before moving on, I want to give you a brief recap of the history of CSS

CSS was grown out of the necessity of styling web pages. Before CSS was introduced, people wanted a way to style their web pages, which looked all very similar and “academic” back in the day. You couldn’t do much in terms of personalisation

HTML 3. 2 introduced the option of defining colors inline as HTML element attributes, and presentational tags like

p, a {
  font-size: 20px;
}

37 and

p, a {
  font-size: 20px;
}

38, but that escalated quickly into a far from ideal situation

CSS let us move everything presentation-related from the HTML to the CSS, so that HTML could get back being the format that defines the structure of the document, rather than how things should look in the browser

CSS is continuously evolving, and CSS you used 5 years ago might just be outdated, as new idiomatic CSS techniques emerged and browsers changed

It’s hard to imagine the times when CSS was born and how different the web was

At the time, we had several competing browsers, the main ones being Internet Explorer or Netscape Navigator

Pages were styled by using HTML, with special presentational tags like

p, a {
  font-size: 20px;
}

39 and special attributes, most of which are now deprecated

This meant you had a limited amount of customisation opportunities

The bulk of the styling decisions were left to the browser

Also, you built a site specifically for one of them, because each one introduced different non-standard tags to give more power and opportunities

Soon people realised the need for a way to style pages, in a way that would work across all browsers

After the initial idea proposed in 1994, CSS got its first release in 1996, when the CSS Level 1 (“CSS 1”) recommendation was published

CSS Level 2 (“CSS 2”) got published in 1998

Since then, work began on CSS Level 3. The CSS Working Group decided to split every feature and work on it separately, in modules

Browsers weren’t especially fast at implementing CSS. We had to wait until 2002 to have the first browser implement the full CSS specification. IE for Mac, as nicely described in this CSS Tricks post. https. //css-tricks. com/look-back-history-css/

Internet Explorer implemented the box model incorrectly right from the start, which led to years of pain trying to have the same style applied consistently across browsers. We had to use various tricks and hacks to make browsers render things as we wanted

Today things are much, much better. We can just use the CSS standards without thinking about quirks, most of the time, and CSS has never been more powerful

We don’t have official release numbers for CSS any more now, but the CSS Working Group releases a “snapshot” of the modules that are currently considered stable and ready to be included in browsers. This is the latest snapshot, from 2018. https. //www. w3. org/TR/css-2018/

CSS Level 2 is still the base for the CSS we write today, and we have many more features built on top of it

ADDING CSS TO AN HTML PAGE

CSS is attached to an HTML page in different ways

1. Using the

p, a {
  font-size: 20px;
}

40 tag

The

p, a {
  font-size: 20px;
}

40 tag is the way to include a CSS file. This is the preferred way to use CSS as it's intended to be used. one CSS file is included by all the pages of your site, and changing one line on that file affects the presentation of all the pages in the site

To use this method, you add a

p, a {
  font-size: 20px;
}

40 tag with the

p, a {
  font-size: 20px;
}

43 attribute pointing to the CSS file you want to include. You add it inside the

p, a {
  font-size: 20px;
}

44 tag of the site (not inside the

p, a {
  font-size: 20px;
}

45 tag)

The

p, a {
  font-size: 20px;
}

46 and

p, a {
  font-size: 20px;
}

47 attributes are required too, as they tell the browser which kind of file we are linking to

2. using the

p, a {
  font-size: 20px;
}

48 tag

Instead of using the

p, a {
  font-size: 20px;
}

40 tag to point to separate stylesheet containing our CSS, we can add the CSS directly inside a

p, a {
  font-size: 20px;
}

48 tag. This is the syntax

Using this method we can avoid creating a separate CSS file. I find this is a good way to experiment before “formalising” CSS to a separate file, or to add a special line of CSS just to a file

3. inline styles

Inline styles are the third way to add CSS to a page. We can add a

p, a {
  font-size: 20px;
}

48 attribute to any HTML tag, and add CSS into it

...

Example

...

SELECTORS

A selector allows us to associate one or more declarations to one or more elements on the page

Basic selectors

Suppose we have a

p, a {
  font-size: 20px;
}

31 element on the page, and we want to display the words into it using the yellow color

We can target that element using this selector

p, a {
  font-size: 20px;
}

31, which targets all the element using the

p, a {
  font-size: 20px;
}

31 tag in the page. A simple CSS rule to achieve what we want is

p {
  color: yellow;
}

Every HTML tag has a corresponding selector, for example.

p, a {
  font-size: 20px;
}

55,

p, a {
  font-size: 20px;
}

56,

p, a {
  font-size: 20px;
}

57

If a selector matches multiple elements, all the elements in the page will be affected by the change

HTML elements have 2 attributes which are very commonly used within CSS to associate styling to a specific element on the page.

p, a {
  font-size: 20px;
}

58 và

p, a {
  font-size: 20px;
}

35

Có một sự khác biệt lớn giữa hai. inside an HTML document you can repeat the same

p, a {
  font-size: 20px;
}

58 value across multiple elements, but you can only use an

p, a {
  font-size: 20px;
}

35 once. As a corollary, using classes you can select an element with 2 or more specific class names, something not possible using ids

Classes are identified using the

p, a {
  font-size: 20px;
}

62 symbol, while ids using the

p, a {
  font-size: 20px;
}

63 symbol

Example using a class


  Roger


.dog-name {
  color: yellow;
}

Example using an id

p {
  font-size: 20px;
}

a {
  color: blue;
}

0

Combining selectors

So far we’ve seen how to target an element, a class or an id. Let’s introduce more powerful selectors

Targeting an element with a class or id

You can target a specific element that has a class, or id, attached

Example using a class

p {
  font-size: 20px;
}

a {
  color: blue;
}

1

Example using an id

p {
  font-size: 20px;
}

a {
  color: blue;
}

2

Why would you want to do that, if the class or id already provides a way to target that element? You might have to do that to have more specificity. We’ll see what that means later

Targeting multiple classes

You can target an element with a specific class using

p, a {
  font-size: 20px;
}

64, as you saw previously. You can target an element with 2 (or more) classes by combining the class names separated with a dot, without spaces

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

3

Combining classes and ids

In the same way, you can combine a class and an id

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

4

Grouping selectors

You can combine selectors to apply the same declarations to multiple selectors. To do so, you separate them with a comma

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

5

You can add spaces in those declarations to make them more clear

p {
  font-size: 20px;
}

a {
  color: blue;
}

6

Follow the document tree with selectors

We’ve seen how to target an element in the page by using a tag name, a class or an id

You can create a more specific selector by combining multiple items to follow the document tree structure. For example, if you have a

p, a {
  font-size: 20px;
}

56 tag nested inside a

p, a {
  font-size: 20px;
}

31 tag, you can target that one without applying the style to a

p, a {
  font-size: 20px;
}

56 tag not included in a

p, a {
  font-size: 20px;
}

31 tag

p {
  font-size: 20px;
}

a {
  color: blue;
}

7

See how we used a space between the two tokens

p, a {
  font-size: 20px;
}

31 and

p, a {
  font-size: 20px;
}

56

This works even if the element on the right is multiple levels deep

To make the dependency strict on the first level, you can use the

p, a {
  font-size: 20px;
}

71 symbol between the two tokens

p {
  font-size: 20px;
}

a {
  color: blue;
}

8

In this case, if a

p, a {
  font-size: 20px;
}

56 is not a first children of the

p, a {
  font-size: 20px;
}

31 element, it's not going to have the new color applied

Direct children will have the style applied

p {
  font-size: 20px;
}

a {
  color: blue;
}

9

Adjacent sibling selectors let us style an element only if preceded by a specific element. We do so using the

p, a {
  font-size: 20px;
}

74 operator

Example

p, a {
  font-size: 20px;
}

0

This will assign the color yellow to all span elements preceded by a

p, a {
  font-size: 20px;
}

31 element

p, a {
  font-size: 20px;
}

1

We have a lot more selectors we can use

attribute selectors
pseudo class selectors
pseudo element selectors

Chúng ta sẽ tìm thấy tất cả về chúng trong các phần tiếp theo

CASCADE

Cascade is a fundamental concept of CSS. After all, it’s in the name itself, the first C of CSS — Cascading Style Sheets — it must be an important thing

Nó có nghĩa là gì?

Cascade is the process, or algorithm, that determines the properties applied to each element on the page. Trying to converge from a list of CSS rules that are defined in various places

It does so taking in consideration

specificity
importance
inheritance
order in the file

It also takes care of resolving conflicts

Two or more competing CSS rules for the same property applied to the same element need to be elaborated according to the CSS spec, to determine which one needs to be applied

Even if you just have one CSS file loaded by your page, there is other CSS that is going to be part of the process. We have the browser (user agent) CSS. Browsers come with a default set of rules, all different between browsers

Then your CSS comes into play

Then the browser applies any user stylesheet, which might also be applied by browser extensions

All those rules come into play while rendering the page

We’ll now see the concepts of specificity and inheritance

SPECIFICITY

What happens when an element is targeted by multiple rules, with different selectors, that affect the same property?

Ví dụ: hãy nói về yếu tố này

p, a {
  font-size: 20px;
}

2

We can have

p, a {
  font-size: 20px;
}

3

and another rule that targets

p, a {
  font-size: 20px;
}

31, which sets the color to another value

p, a {
  font-size: 20px;
}

4

And another rule that targets

p, a {
  font-size: 20px;
}

77. Which rule is going to take precedence over the others, and why?

Enter specificity. The more specific rule will win. If two or more rules have the same specificity, the one that appears last wins

Sometimes what is more specific in practice is a bit confusing to beginners. I would say it’s also confusing to experts that do not look at those rules that frequently, or simply overlook them

How to calculate specificity

Specificity is calculated using a convention

We have 4 slots, and each one of them starts at 0.

p, a {
  font-size: 20px;
}

78. The slot at the left is the most important, and the rightmost one is the least important

Like it works for numbers in the decimal system.

p, a {
  font-size: 20px;
}

79 is higher than

p, a {
  font-size: 20px;
}

80

Slot 1

The first slot, the rightmost one, is the least important

We increase this value when we have an element selector. An element is a tag name. If you have more than one element selector in the rule, you increment accordingly the value stored in this slot

Examples

p, a {
  font-size: 20px;
}

5

Slot 2

The second slot is incremented by 3 things

class selectors
pseudo-class selectors
attribute selectors

Every time a rule meets one of those, we increment the value of the second column from the right

Examples

p, a {
  font-size: 20px;
}

6

Of course slot 2 selectors can be combined with slot 1 selectors

p, a {
  font-size: 20px;
}

7

One nice trick with classes is that you can repeat the same class and increase the specificity. For example

p, a {
  font-size: 20px;
}

8

Slot 3

Slot 3 holds the most important thing that can affect your CSS specificity in a CSS file. the

p, a {
  font-size: 20px;
}

35

Every element can have an

p, a {
  font-size: 20px;
}

35 attribute assigned, and we can use that in our stylesheet to target the element

Examples

p, a {
  font-size: 20px;
}

9

Slot 4

Slot 4 is affected by inline styles. Any inline style will have precedence over any rule defined in an external CSS file, or inside the

p, a {
  font-size: 20px;
}

48 tag in the page header

Example

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

0

Even if any other rule in the CSS defines the color, this inline style rule is going to be applied. Except for one case — if

p, a {
  font-size: 20px;
}

84 is used, which fills the slot 5

Importance

Specificity does not matter if a rule ends with

p, a {
  font-size: 20px;
}

84

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

1

That rule will take precedence over any rule with more specificity

Adding

p, a {
  font-size: 20px;
}

84 in a CSS rule is going to make that rule more important than any other rule, according to the specificity rules. The only way another rule can take precedence is to have

p, a {
  font-size: 20px;
}

84 as well, and have higher specificity in the other less important slots

Tips

In general you should use the amount of specificity you need, but not more. In this way, you can craft other selectors to overwrite the rules set by preceding rules without going mad

p, a {
  font-size: 20px;
}

84 is a highly debated tool that CSS offers us. Many CSS experts advocate against using it. I find myself using it especially when trying out some style and a CSS rule has so much specificity that I need to use

p, a {
  font-size: 20px;
}

84 to make the browser apply my new CSS

But generally,

p, a {
  font-size: 20px;
}

84 should have no place in your CSS files

Using the

p, a {
  font-size: 20px;
}

35 attribute to style CSS is also debated a lot, since it has a very high specificity. A good alternative is to use classes instead, which have less specificity, and so they are easier to work with, and they are more powerful (you can have multiple classes for an element, and a class can be reused multiple times)

Tools to calculate the specificity

You can use the site https. //specificity. keegan. st/ to perform the specificity calculation for you automatically

It’s useful especially if you are trying to figure things out, as it can be a nice feedback tool

DI SẢN

When you set some properties on a selector in CSS, they are inherited by all the children of that selector

I said some, because not all properties show this behaviour

This happens because some properties make sense to be inherited. This helps us write CSS much more concisely, since we don’t have to explicitly set that property again on every single child

Some other properties make more sense to not be inherited

Think about fonts. you don’t need to apply the

p, a {
  font-size: 20px;
}

92 to every single tag of your page. You set the

p, a {
  font-size: 20px;
}

45 tag font, and every child inherits it, along with other properties

The

p, a {
  font-size: 20px;
}

94 property, on the other hand, makes little sense to be inherited

Properties that inherit

Here is a list of the properties that do inherit. The list is non-comprehensive, but those rules are just the most popular ones you’ll likely use

border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font-size-adjust
font-stretch
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
quotes
tab-size
text-align
text-align-last
text-decoration-color
text-indent
text-justify
text-shadow
text-transform
visibility
white-space
widows
word-break
word-spacing

I got it from this nice Sitepoint article on CSS inheritance

Forcing properties to inherit

What if you have a property that’s not inherited by default, and you want it to, in a child?

In the children, you set the property value to the special keyword

p, a {
  font-size: 20px;
}

95

Example

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

2

Forcing properties to NOT inherit

On the contrary, you might have a property inherited and you want to avoid so

Bạn có thể sử dụng từ khóa

p, a {
  font-size: 20px;
}

96 để hoàn nguyên. In this case, the value is reverted to the original value the browser gave it in its default stylesheet

In practice this is rarely used, and most of the times you’ll just set another value for the property to overwrite that inherited value

Other special values

In addition to the

p, a {
  font-size: 20px;
}

95 and

p, a {
  font-size: 20px;
}

96 special keywords we just saw, you can also set any property to

```
p, a {
  font-size: 20px;
}
```
99. use the default browser stylesheet if available. If not, and if the property inherits by default, inherit the value. Otherwise do nothing

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

00. if the property inherits by default, inherit. Otherwise do nothing

IMPORT

From any CSS file you can import another CSS file using the

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

01 directive

Here is how you use it

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

3

url() can manage absolute or relative URLs

One important thing you need to know is that

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

01 directives must be put before any other CSS in the file, or they will be ignored

Bạn có thể sử dụng bộ mô tả phương tiện để chỉ tải tệp CSS trên phương tiện cụ thể

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

4

ATTRIBUTE SELECTORS

We already introduced several of the basic CSS selectors. using element selectors, class, id, how to combine them, how to target multiple classes, how to style several selectors in the same rule, how to follow the page hierarchy with child and direct child selectors, and adjacent siblings

In this section we’ll analyze attribute selectors, and we’ll talk about pseudo class and pseudo element selectors in the next 2 sections

Attribute presence selectors

The first selector type is the attribute presence selector

We can check if an element has an attribute using the

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

03 syntax.

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

04 will select all

p, a {
  font-size: 20px;
}

31 tags in the page that have an

p, a {
  font-size: 20px;
}

35 attribute, regardless of its value

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

5

Exact attribute value selectors

Inside the brackets you can check the attribute value using

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

07, and the CSS will be applied only if the attribute matches the exact value specified

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

6

Match an attribute value portion

While

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

07 lets us check for exact value, we have other operators

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

09 checks if the attribute contains the partial

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

10 checks if the attribute starts with the partial

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

11 checks if the attribute ends with the partial

```
p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}
```
12 checks if the attribute starts with the partial and it's followed by a dash (common in classes, for example), or just contains the partial

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

13 checks if the partial is contained in the attribute, but separated by spaces from the rest

All the checks we mentioned are case sensitive

If you add an

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

14 just before the closing bracket, the check will be case insensitive. It's supported in many browsers but not in all, check

PSEUDO-CLASSES

Pseudo classes are predefined keywords that are used to select an element based on its state, or to target a specific child

They start with a single colon

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

15

They can be used as part of a selector, and they are very useful to style active or visited links, for example, change the style on hover, focus, or target the first child, or odd rows. Very handy in many cases

These are the most popular pseudo classes you will likely use

Let’s do an example. A common one, actually. You want to style a link, so you create a CSS rule to target the

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

16 element

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

7

Things seem to work fine, until you click one link. The link goes back to the predefined color (blue) when you click it. Then when you open the link and go back to the page, now the link is blue

Why does that happen?

Because the link when clicked changes state, and goes in the

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

17 state. And when it's been visited, it is in the

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

18 state. Forever, until the user clears the browsing history

So, to correctly make the link yellow across all states, you need to write

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

8

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

19 deserves a special mention. It can be used to target odd or even children with

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

20 and

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

21

It is commonly used in lists to color odd lines differently from even lines

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

9

You can also use it to target the first 3 children of an element with

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

22. Or you can style 1 in every 5 elements with

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

23

Some pseudo classes are just used for printing, like

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

24,

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

25,

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

26, so you can target the first page, all the left pages, and all the right pages, which are usually styled slightly differently

PSEUDO-ELEMENTS

Pseudo-elements are used to style a specific part of an element

They start with a double colon

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

27

Sometimes you will spot them in the wild with a single colon, but this is only a syntax supported for backwards compatibility reasons. You should use 2 colons to distinguish them from pseudo-classes

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

28 and

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

29 are probably the most used pseudo-elements. They are used to add content before or after an element, like icons for example

Here’s the list of the pseudo-elements

Let’s do an example. Say you want to make the first line of a paragraph slightly bigger in font size, a common thing in typography

0

Or maybe you want the first letter to be bolder

1

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

29 and

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

28 are a bit less intuitive. I remember using them when I had to add icons using CSS

You specify the

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

32 property to insert any kind of content after or before an element

2

COLORS

By default an HTML page is rendered by web browsers quite sadly in terms of the colors used

We have a white background, black color, and blue links. That’s it

Luckily CSS gives us the ability to add colors to our designs

We have these properties

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

33

```
p, a {
  font-size: 20px;
}
```
94

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

35

All of them accept a color value, which can be in different forms

Named colors

First, we have CSS keywords that define colors. CSS started with 16, but today there is a huge number of colors names

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

36

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

37

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

38

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

39

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

40

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

41

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

42

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

43

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

44

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

45

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

46

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

47

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

48

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

49

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

50

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

51

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

52

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

53

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

54

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

55

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

56

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

57

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

58

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

59

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

60

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

61

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

62

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

63

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

64

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

65

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

66

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

67

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

68

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

69

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

70

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

71

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

72

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

73

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

74

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

75

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

76

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

77

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

78

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

79

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

80

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

81

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

82

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

83

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

84

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

85

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

86

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

87

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

88

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

89

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

90

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

91

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

92

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

93

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

94

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

95

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

96

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

97

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

98

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

99

00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

plus

84, and

85 which points to the

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

33 property, for example it’s useful to make the

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

35 inherit it

They are defined in the CSS Color Module, Level 4. They are case insensitive

Wikipedia has a nice table which lets you pick the perfect color by its name

Named colors are not the only option

RGB and RGBa

You can use the

88 function to calculate a color from its RGB notation, which sets the color based on its red-green-blue parts. From 0 to 255

3

89 lets you add the alpha channel to enter a transparent part. That can be a number from 0 to 1

4

Hexadecimal notation

Another option is to express the RGB parts of the colors in the hexadecimal notation, which is composed by 3 blocks

Black, which is

90 is expressed as

91 or

92 (we can shortcut the 2 numbers to 1 if they are equal)

White,

93 can be expressed as

94 or

95

The hexadecimal notation lets us express a number from 0 to 255 in just 2 digits, since they can go from 0 to “15” (f)

We can add the alpha channel by adding 1 or 2 more digits at the end, for example

96. Not all browsers support the shortened notation, so use all 6 digits to express the RGB part

HSL and HSLa

This is a more recent addition to CSS

HSL = Hue Saturation Lightness

In this notation, black is

97 and white is

98

If you are more familiar with HSL than RGB because of your past knowledge, you can definitely use that

You also have

99 which adds the alpha channel to the mix, again a number from 0 to 1.

00

UNITS

One of the things you’ll use every day in CSS are units. They are used to set lengths, paddings, margins, align elements and so on

Things like

01,

02,

03, or percentages

They are everywhere. There are some obscure ones, too. We’ll go through each of them in this section

Pixels

The most widely used measurement unit. A pixel does not actually correlate to a physical pixel on your screen, as that varies, a lot, by device (think high-DPI devices vs non-retina devices)

There is a convention that make this unit work consistently across devices

Percentages

Another very useful measure, percentages let you specify values in percentages of that parent element’s corresponding property

Example

5

Real-world measurement units

We have those measurement units which are translated from the outside world. Mostly useless on screen, they can be useful for print stylesheets. They are

04 a centimeter (maps to 37. 8 pixels)
05 a millimeter (0. 1cm)
06 a quarter of a millimeter
07 an inch (maps to 96 pixels)
08 a point (1 inch = 72 points)
09 a pica (1 pica = 12 points)

Relative units

02 is the value assigned to that element's
```
p, a {
  font-size: 20px;
}
```
33, therefore its exact value changes between elements. It does not change depending on the font used, just on the font size. In typography this measures the width of the
12 letter
03 is similar to
02, but instead of varying on the current element font size, it uses the root element (
15) font size. You set that font size once, and
03 will be a consistent measure across all the page
17 is like
02, but inserted of measuring the width of
12, it measures the height of the
20 letter. It can change depending on the font used, and on the font size
21 is like
17 but instead of measuring the height of
20 it measures the width of
24 (zero)

Viewport units

25 the viewport width unit represents a percentage of the viewport width.
26 means 50% of the viewport width
27 đơn vị chiều cao khung nhìn biểu thị phần trăm chiều cao khung nhìn.
28 có nghĩa là 50% chiều cao khung nhìn
29 the viewport minimum unit represents the minimum between the height or width in terms of percentage.
30 là 30% của chiều rộng hoặc chiều cao hiện tại, tùy theo cái nào nhỏ hơn
31 the viewport maximum unit represents the maximum between the height or width in terms of percentage.
32 is the 30% of the current width or height, depending which one is bigger

Fraction units

33 are fraction units, and they are used in CSS Grid to divide space into fractions

We’ll talk about them in the context of CSS Grid later on

URL

When we talk about background images,

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

01, and more, we use the

35 function to load a resource

6

In this case I used a relative URL, which searches the file in the folder where the CSS file is defined

I could go one level back

7

or go into a folder

8

Or I could load a file starting from the root of the domain where the CSS is hosted

9

Hoặc tôi có thể sử dụng một URL tuyệt đối để tải một tài nguyên bên ngoài

0

CALC

Hàm

36 cho phép bạn thực hiện các phép toán cơ bản trên các giá trị và đặc biệt hữu ích khi bạn cần cộng hoặc trừ một giá trị độ dài khỏi tỷ lệ phần trăm

Đây là cách nó hoạt động

1

Nó trả về một giá trị độ dài, vì vậy nó có thể được sử dụng ở bất cứ đâu mà bạn mong đợi một giá trị pixel

bạn có thể thực hiện

bổ sung bằng cách sử dụng
```
p, a {
  font-size: 20px;
}
```
74
phép trừ sử dụng
38
phép nhân sử dụng
39
phép chia sử dụng
40

Một caveat. với phép cộng và phép trừ, khoảng trống xung quanh toán tử là bắt buộc, nếu không nó sẽ không hoạt động như mong đợi

Examples

2

TẦNG LỚP

Nền của một phần tử có thể được thay đổi bằng một số thuộc tính CSS

```
p, a {
  font-size: 20px;
}
```
94
42
43
44
45
46
47
48

và thuộc tính tốc ký

49, cho phép chúng ta rút ngắn các định nghĩa và nhóm chúng trên một dòng

p, a {
  font-size: 20px;
}

94 chấp nhận giá trị màu, giá trị này có thể là một trong các từ khóa màu hoặc giá trị

51 hoặc

52

3

Thay vì sử dụng màu, bạn có thể sử dụng hình ảnh làm nền cho một phần tử bằng cách chỉ định URL vị trí của hình ảnh

4

43 cho phép bạn xác định khu vực được sử dụng bởi hình nền hoặc màu sắc. Giá trị mặc định là

54, mở rộng đến mép ngoài của đường viền

Các giá trị khác là

55 để mở rộng nền đến cạnh đệm, không có đường viền
56 to extend the background up to the content edge, without the padding
```
p, a {
  font-size: 20px;
}
```
95 to apply the value of the parent

When using an image as background you will want to set the position of the image placement using the

44 property.

59,

60,

p, a {
  font-size: 20px;
}

37 are all valid values for the X axis, and

62,

63 for the Y axis

5

If the image is smaller than the background, you need to set the behavior using

46. Should it

65,

66 or

67 on all the axes? This last one is the default value. Another value is

68

45 lets you choose where the background should be applied. to the entire element including padding (default) using

55, to the entire element including the border using

54, to the element without the padding using

56

With

47 we can attach the background to the viewport, so that scrolling will not affect the background

6

By default the value is

74. There is another value,

75. The best way to visualize their behavior is this Codepen

The last background property is

48. We can use 3 keywords.

77,

78 and

79.

77 is the default

78 expands the image until the entire element is covered by the background

79 stops expanding the background image when one dimension (x or y) covers the whole smallest edge of the image, so it's fully contained into the element

You can also specify a length value, and if so it sets the width of the background image (and the height is automatically defined)

7

If you specify 2 values, one is the width and the second is the height

8

The shorthand property

49 allows to shorten definitions and group them on a single line

This is an example

9

If you use an image, and the image could not be loaded, you can set a fallback color

...

0

You can also set a gradient as background

...

1

COMMENTS

CSS gives you the ability to write comments in a CSS file, or in the

p, a {
  font-size: 20px;
}

48 tag in the page header

The format is the

85 C-style (or JavaScript-style, if you prefer) comments

This is a multiline comment. Until you add the closing

86 token, the all the lines found after the opening one are commented

Example

...

2

CSS does not have inline comments, like

87 in C or JavaScript

Pay attention though — if you add

87 before a rule, the rule will not be applied, looking like the comment worked. In reality, CSS detected a syntax error and due to how it works it ignored the line with the error, and went straight to the next line

Knowing this approach lets you purposefully write inline comments, although you have to be careful because you can’t add random text like you can in a block comment

For example

...

3

In this case, due to how CSS works, the

89 rule is actually commented out. You can find more details here if you find this interesting. To avoid shooting yourself in the foot, just avoid using inline comments and rely on block comments

CUSTOM PROPERTIES

In the last few years CSS preprocessors have had a lot of success. It was very common for greenfield projects to start with Less or Sass. And it’s still a very popular technology

The main benefits of those technologies are, in my opinion

They allow you to nest selectors
The provide an easy imports functionality
They give you variables

Modern CSS has a new powerful feature called CSS Custom Properties, also commonly known as CSS Variables

CSS is not a programming language like JavaScript, Python, PHP, Ruby or Go where variables are key to do something useful. CSS is very limited in what it can do, and it’s mainly a declarative syntax to tell browsers how they should display an HTML page

But a variable is a variable. a name that refers to a value, and variables in CSS help reduce repetition and inconsistencies in your CSS, by centralizing the values definition

And it introduces a unique feature that CSS preprocessors won’t ever have. you can access and change the value of a CSS Variable programmatically using JavaScript

The basics of using variables

A CSS Variable is defined with a special syntax, prepending two dashes to a name (

90), then a colon and a value. Like this

...

4

(thêm về

91 sau)

You can access the variable value using

92

...

5

The variable value can be any valid CSS value, for example

...

6

Create variables inside any element

CSS Variables can be defined inside any element. Some examples

...

7

What changes in those different examples is the scope

Variables scope

Adding variables to a selector makes them available to all the children of it

In the example above you saw the use of

91 when defining a CSS variable

...

4

91 is a CSS pseudo-class that identifies the root element of a tree

In the context of an HTML document, using the

91 selector points to the

15 element, except that

91 has higher specificity (takes priority)

Trong ngữ cảnh của một hình ảnh SVG,

91 trỏ đến thẻ

99

Adding a CSS custom property to

91 makes it available to all the elements in the page

Nếu bạn thêm một biến bên trong bộ chọn

...

01, thì biến đó sẽ chỉ khả dụng cho con của

...

01

...

9

và sử dụng nó bên ngoài phần tử này sẽ không hoạt động

Các biến có thể được gán lại

...

0

Bên ngoài

...

01,

...

04 sẽ có màu vàng nhưng bên trong sẽ có màu xanh lam

Bạn cũng có thể gán hoặc ghi đè lên một biến bên trong HTML bằng các kiểu nội tuyến

...

1

Các biến CSS tuân theo các quy tắc xếp tầng CSS thông thường, với mức độ ưu tiên được đặt theo tính đặc hiệu

Tương tác với giá trị Biến CSS bằng JavaScript

Điều thú vị nhất với Biến CSS là khả năng truy cập và chỉnh sửa chúng bằng JavaScript

Đây là cách bạn đặt giá trị biến bằng JavaScript đơn giản

...

2

Thay vào đó, mã dưới đây có thể được sử dụng để truy cập một giá trị biến, trong trường hợp biến được xác định vào ngày

91

...

3

Hoặc, để áp dụng kiểu cho một thành phần cụ thể, trong trường hợp các biến được đặt với phạm vi khác

...

4

Xử lý các giá trị không hợp lệ

Nếu một biến được gán cho một thuộc tính không chấp nhận giá trị của biến, nó được coi là không hợp lệ

Ví dụ: bạn có thể chuyển giá trị pixel cho thuộc tính

...

06 hoặc giá trị rem cho thuộc tính màu

Trong trường hợp này, dòng được coi là không hợp lệ và bị bỏ qua

hỗ trợ trình duyệt

Trình duyệt hỗ trợ các Biến CSS rất tốt,

Biến CSS vẫn ở đây và bạn có thể sử dụng chúng ngay hôm nay nếu bạn không cần hỗ trợ Internet Explorer và các phiên bản cũ của các trình duyệt khác

Nếu bạn cần hỗ trợ các trình duyệt cũ hơn, bạn có thể sử dụng các thư viện như PostCSS hoặc Myth, nhưng bạn sẽ mất khả năng tương tác với các biến thông qua JavaScript hoặc Công cụ dành cho nhà phát triển trình duyệt, vì chúng được dịch sang CSS cũ ít biến hơn (và như vậy

Biến CSS phân biệt chữ hoa chữ thường

biến này

...

5

khác với cái này

...

6

Toán học trong các biến CSS

Để làm toán trong Biến CSS, bạn cần sử dụng

36 chẳng hạn

...

7

Truy vấn phương tiện với Biến CSS

Không có gì đặc biệt ở đây. Biến CSS thường áp dụng cho các truy vấn phương tiện

...

8

Đặt giá trị dự phòng cho var()

92 chấp nhận tham số thứ hai, là giá trị dự phòng mặc định khi giá trị biến không được đặt

...

9

FONTS

Vào buổi bình minh của web, bạn chỉ có một số phông chữ mà bạn có thể chọn

Rất may hôm nay bạn có thể tải bất kỳ loại phông chữ nào trên các trang của mình

CSS đã đạt được nhiều khả năng tuyệt vời trong những năm qua liên quan đến phông chữ

Thuộc tính

p, a {
  font-size: 20px;
}

38 là cách viết tắt của một số thuộc tính

```
p, a {
  font-size: 20px;
}
```
92
```
...
```
11
```
...
```
12
```
...
```
13
```
p, a {
  font-size: 20px;
}
```
33

Hãy xem từng người trong số họ và sau đó chúng tôi sẽ đề cập đến

p, a {
  font-size: 20px;
}

38

Sau đó, chúng ta sẽ nói về cách tải phông chữ tùy chỉnh, sử dụng

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

01 hoặc

...

17 hoặc bằng cách tải biểu định kiểu phông chữ

p, a {
  font-size: 20px;
}

92

Đặt họ phông chữ mà phần tử sẽ sử dụng

Tại sao lại là “gia đình”? . ) chúng tôi cần

Đây là một ví dụ từ ứng dụng Sách phông chữ trên máy Mac của tôi - họ phông chữ Mã Fira lưu trữ một số phông chữ chuyên dụng bên dưới

Thuộc tính này cho phép bạn chọn một phông chữ cụ thể, ví dụ

p {
  color: yellow;
}

0

Bạn có thể đặt nhiều giá trị, vì vậy tùy chọn thứ hai sẽ được sử dụng nếu không thể sử dụng tùy chọn thứ nhất vì lý do nào đó (ví dụ: nếu không tìm thấy tùy chọn này trên máy hoặc kết nối mạng để tải xuống phông chữ không thành công)

p {
  color: yellow;
}

1

Tôi đã sử dụng một số phông chữ cụ thể cho đến bây giờ, những phông chữ mà chúng tôi gọi là Phông chữ An toàn cho Web, vì chúng được cài đặt sẵn trên các hệ điều hành khác nhau

Chúng tôi chia chúng thành các phông chữ Serif, Sans-Serif và Monospace. Dưới đây là danh sách một số trong những cái phổ biến nhất

có chân

Gruzia
Palatino
Times New Roman
lần

Sans-Serif

Arial
Helvetica
rau xanh
Genève
Tahoma
Lucida Grande
Sự va chạm
Trebuchet MS
Arial đen

Đơn cách

chuyển phát nhanh mới
chuyển phát nhanh
Bảng điều khiển Lucida
Monaco

Bạn có thể sử dụng tất cả những thứ đó dưới dạng thuộc tính

p, a {
  font-size: 20px;
}

92, nhưng chúng không được đảm bảo sẽ ở đó cho mọi hệ thống. Những người khác cũng tồn tại với mức độ hỗ trợ khác nhau

Bạn cũng có thể sử dụng tên chung

```
...
```
20 phông chữ không có chữ ghép
```
...
```
21 phông chữ có chữ ghép
```
...
```
22 một phông chữ đặc biệt tốt cho mã
```
...
```
23 được sử dụng để mô phỏng các bản viết tay
```
...
```
24 cái tên nói lên tất cả

Chúng thường được sử dụng ở cuối định nghĩa

p, a {
  font-size: 20px;
}

92, để cung cấp giá trị dự phòng trong trường hợp không thể áp dụng gì khác

p {
  color: yellow;
}

2

...

11

Thuộc tính này đặt chiều rộng của phông chữ. Bạn có thể sử dụng các giá trị được xác định trước đó

thông thường
Dũng cảm
táo bạo hơn (so với phần tử gốc)
nhẹ hơn (so với phần tử gốc)

Hoặc sử dụng các từ khóa số

100
200
300
400, được ánh xạ tới
```
...
```
27
500
600
700 được ánh xạ tới
```
p, a {
  font-size: 20px;
}
```
39
800
900

trong đó 100 là phông chữ nhẹ nhất và 900 là phông chữ đậm nhất

Một số giá trị số đó có thể không ánh xạ tới phông chữ vì phông chữ đó phải được cung cấp trong họ phông chữ. Khi thiếu một số, CSS làm cho số đó ít nhất được in đậm như số trước đó, vì vậy bạn có thể có các số trỏ đến cùng một phông chữ

...

12

Cho phép bạn chọn bề mặt hẹp hoặc rộng của phông chữ, nếu có

Cái này quan trọng. phông chữ phải được trang bị các khuôn mặt khác nhau

Giá trị được phép là, từ hẹp hơn đến rộng hơn

```
...
```
30
```
...
```
31
```
...
```
32
```
...
```
33
```
...
```
27
```
...
```
35
```
...
```
36
```
...
```
37
```
...
```
38

...

13

Cho phép bạn áp dụng kiểu chữ nghiêng cho phông chữ

p {
  color: yellow;
}

3

Thuộc tính này cũng cho phép các giá trị

...

40 và

...

27. Có rất ít, nếu có, sự khác biệt giữa việc sử dụng

...

42 và

...

40. Cách đầu tiên đối với tôi dễ dàng hơn, vì HTML đã cung cấp phần tử

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

14 có nghĩa là chữ nghiêng

p, a {
  font-size: 20px;
}

33

Thuộc tính này được sử dụng để xác định kích thước của phông chữ

Bạn có thể vượt qua 2 loại giá trị

giá trị độ dài, chẳng hạn như
01,
02,
03, v.v. hoặc tỷ lệ phần trăm
một từ khóa giá trị được xác định trước

Trong trường hợp thứ hai, các giá trị bạn có thể sử dụng là

xx-nhỏ
x nhỏ
bé nhỏ
trung bình
lớn
x-large
xx-large
nhỏ hơn (so với phần tử gốc)
lớn hơn (so với phần tử gốc)

Cách sử dụng

p {
  color: yellow;
}

4

...

49

Thuộc tính này ban đầu được sử dụng để thay đổi văn bản thành chữ hoa nhỏ và nó chỉ có 3 giá trị hợp lệ

```
...
```
27
```
p, a {
  font-size: 20px;
}
```
95
```
...
```
52

Chữ hoa nhỏ có nghĩa là văn bản được hiển thị bằng "chữ hoa nhỏ hơn" bên cạnh các chữ cái viết hoa của nó

p, a {
  font-size: 20px;
}

38

Thuộc tính

p, a {
  font-size: 20px;
}

38 cho phép bạn áp dụng các thuộc tính phông chữ khác nhau trong một thuộc tính duy nhất, giảm sự lộn xộn

Ít nhất chúng ta phải đặt 2 thuộc tính,

p, a {
  font-size: 20px;
}

33 và

p, a {
  font-size: 20px;
}

92, những thuộc tính khác là tùy chọn

p {
  color: yellow;
}

5

Nếu chúng ta thêm các thuộc tính khác, chúng cần được sắp xếp theo đúng thứ tự

đây là thứ tự

p {
  color: yellow;
}

6

Example

p {
  color: yellow;
}

7

Đang tải phông chữ tùy chỉnh bằng cách sử dụng

...

17

...

17 cho phép bạn thêm một họ phông chữ mới và ánh xạ nó tới một tệp chứa phông chữ

Phông chữ này sẽ được trình duyệt tải xuống và sử dụng trong trang và đó là một thay đổi cơ bản đối với kiểu chữ trên web — giờ đây chúng tôi có thể sử dụng bất kỳ phông chữ nào chúng tôi muốn

Chúng tôi có thể thêm trực tiếp các khai báo

...

17 vào CSS của mình hoặc liên kết với một CSS dành riêng để nhập phông chữ

Trong tệp CSS của chúng tôi, chúng tôi cũng có thể sử dụng

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

01 để tải tệp CSS đó

Khai báo

...

17 chứa một số thuộc tính chúng tôi sử dụng để xác định phông chữ, bao gồm

...

62, URI (một hoặc nhiều URI) cho phông chữ. Điều này tuân theo chính sách cùng nguồn gốc, có nghĩa là phông chữ chỉ có thể được tải xuống từ nguồn gốc hiện tại (tên miền + cổng + giao thức)

Phông chữ thường ở định dạng

```
...
```
63 (Định dạng phông chữ mở trên web)
```
...
```
64 (Web Open Font Format 2. 0)
```
...
```
65 (Loại mở được nhúng)
```
...
```
66 (Phông chữ OpenType)
```
...
```
67 (Phông chữ TrueType)

Các thuộc tính sau cho phép chúng tôi xác định các thuộc tính cho phông chữ mà chúng tôi sẽ tải, như chúng tôi đã thấy ở trên

```
p, a {
  font-size: 20px;
}
```
92
```
...
```
11
```
...
```
13
```
...
```
12

Một lưu ý về hiệu suất

Tất nhiên, việc tải một phông chữ có ý nghĩa về hiệu suất mà bạn phải xem xét khi tạo thiết kế trang của mình

HÌNH ẢNH

Chúng ta đã nói về phông chữ, nhưng còn nhiều điều khác để tạo kiểu cho văn bản

Trong phần này, chúng ta sẽ nói về các thuộc tính sau

```
...
```
72
```
...
```
73
```
...
```
74
```
...
```
75
```
...
```
76
```
...
```
77
```
...
```
78
```
...
```
79
```
...
```
80
```
...
```
81
```
...
```
82
```
...
```
83
```
...
```
84
```
...
```
85
```
...
```
86
```
...
```
87
```
...
```
88
```
...
```
89
```
...
```
90

...

72

Thuộc tính này có thể biến đổi trường hợp của một phần tử

Có 4 giá trị hợp lệ

```
...
```
92 để viết hoa chữ cái đầu tiên của mỗi từ
```
...
```
93 để viết hoa tất cả văn bản
```
...
```
94 thành chữ thường tất cả văn bản
```
...
```
95 để tắt chuyển đổi văn bản, được sử dụng để tránh kế thừa tài sản

Example

p {
  color: yellow;
}

8

...

73

Thuộc tính này được sử dụng để thêm trang trí vào văn bản, bao gồm

```
...
```
97
```
...
```
98
```
...
```
99
```
...
```
00
```
...
```
95

Example

p {
  color: yellow;
}

9

Bạn cũng có thể đặt kiểu trang trí và màu sắc

Example


  Roger


.dog-name {
  color: yellow;
}

0

Các giá trị kiểu hợp lệ là

...

02,

...

03,

...

04,

...

05,

...

06

Bạn có thể làm tất cả trong một dòng hoặc sử dụng các thuộc tính cụ thể

```
...
```
07
```
...
```
08
```
...
```
09

Example


  Roger


.dog-name {
  color: yellow;
}

1

...

74

Theo mặc định, căn chỉnh văn bản có giá trị

...

11, nghĩa là văn bản bắt đầu tại "bắt đầu", gốc 0, 0 của hộp chứa nó. Điều này có nghĩa là trên cùng bên trái trong các ngôn ngữ đọc từ trái sang phải và trên cùng bên phải trong các ngôn ngữ viết từ phải sang trái

Các giá trị có thể là

...

11,

...

13,

59,

60,

p, a {
  font-size: 20px;
}

37,

...

17 (rất tốt nếu có khoảng cách nhất quán ở cuối dòng)


  Roger


.dog-name {
  color: yellow;
}

2

...

75

Xác định cách các phần tử nội tuyến được căn chỉnh theo chiều dọc

Chúng tôi có một số giá trị cho tài sản này. Đầu tiên chúng ta có thể gán giá trị độ dài hoặc tỷ lệ phần trăm. Chúng được sử dụng để căn chỉnh văn bản ở vị trí cao hơn hoặc thấp hơn (sử dụng giá trị âm) so với đường cơ sở của phần tử gốc

Sau đó, chúng tôi có các từ khóa

```
...
```
19 (mặc định), căn chỉnh đường cơ sở với đường cơ sở của phần tử cha
```
...
```
20 tạo một phần tử được đăng ký, mô phỏng kết quả của phần tử HTML
```
...
```
20
```
...
```
22 tạo một phần tử được viết chồng lên trên, mô phỏng kết quả của phần tử HTML
```
...
```
23
62 căn chỉnh phần trên cùng của phần tử với phần trên cùng của dòng
```
...
```
25 căn chỉnh phần trên cùng của phần tử với phần trên cùng của phông chữ phần tử gốc
```
...
```
26 căn giữa phần tử vào giữa dòng của phần tử gốc
63 căn chỉnh phần dưới cùng của phần tử với phần dưới cùng của dòng
```
...
```
28 căn chỉnh phần dưới cùng của phần tử với phần dưới cùng của phông chữ phần tử gốc

...

76

Điều này cho phép bạn thay đổi chiều cao của một dòng. Mỗi dòng văn bản có một chiều cao phông chữ nhất định, nhưng sau đó có khoảng cách bổ sung theo chiều dọc giữa các dòng. Đó là chiều cao dòng


  Roger


.dog-name {
  color: yellow;
}

3

...

77

Thụt lề dòng đầu tiên của đoạn văn theo độ dài đã đặt hoặc tỷ lệ phần trăm của chiều rộng đoạn văn


  Roger


.dog-name {
  color: yellow;
}

4

...

78

Theo mặc định, dòng cuối cùng của đoạn văn được căn chỉnh theo giá trị

...

74. Sử dụng thuộc tính này để thay đổi hành vi đó


  Roger


.dog-name {
  color: yellow;
}

5

...

79

Sửa đổi khoảng cách giữa mỗi từ

Bạn có thể sử dụng từ khóa

...

27 để đặt lại các giá trị kế thừa hoặc sử dụng giá trị độ dài


  Roger


.dog-name {
  color: yellow;
}

6

...

80

Sửa đổi khoảng cách giữa mỗi chữ cái

Bạn có thể sử dụng từ khóa

...

27 để đặt lại các giá trị kế thừa hoặc sử dụng giá trị độ dài


  Roger


.dog-name {
  color: yellow;
}

7

...

81

Áp dụng bóng đổ cho văn bản. Theo mặc định, văn bản hiện có bóng

Thuộc tính này chấp nhận một màu tùy chọn và một tập hợp các giá trị được đặt

độ lệch X của bóng từ văn bản
phần bù Y của bóng từ văn bản
bán kính mờ

Nếu màu không được chỉ định, bóng sẽ sử dụng màu văn bản

Examples


  Roger


.dog-name {
  color: yellow;
}

8

...

82

Đặt cách CSS xử lý khoảng trắng, dòng mới và tab bên trong một phần tử

Các giá trị hợp lệ thu gọn khoảng trắng là

```
...
```
27 thu gọn khoảng trắng. Thêm dòng mới khi cần thiết khi văn bản đến cuối vùng chứa
```
...
```
40 thu gọn khoảng trắng. Does not add a new line when the text reaches the end of the container, and suppresses any line break added to the text
```
...
```
41 collapses white space. Thêm dòng mới khi cần thiết khi văn bản đến cuối vùng chứa

Valid values that preserve white space are

```
...
```
42 giữ nguyên khoảng trắng. Không thêm một dòng mới khi văn bản đến cuối vùng chứa, nhưng vẫn duy trì ngắt dòng được thêm vào văn bản
```
...
```
43 preserves white space. Thêm dòng mới khi cần thiết khi văn bản đến cuối vùng chứa

...

83

Đặt chiều rộng của ký tự tab. Theo mặc định, đó là 8 và bạn có thể đặt một giá trị số nguyên để đặt khoảng trắng ký tự hoặc giá trị độ dài


  Roger


.dog-name {
  color: yellow;
}

9

...

84

Defines whether lines of text are laid out horizontally or vertically, and the direction in which blocks progress

Các giá trị bạn có thể sử dụng là

```
...
```
46 (mặc định)
```
...
```
47 content is laid out vertically. New lines are put on the left of the previous
```
...
```
48 content is laid out vertically. New lines are put on the right of the previous

...

85

Determines if hyphens should be automatically added when going to a new line

Valid values are

```
...
```
95 (default)
```
...
```
51 only add an hyphen when there is already a visible hyphen or a hidden hyphen (a special character)
77 add hyphens when determined the text can have a hyphen

...

86

When

...

84 is in a vertical mode, determines the orientation of the text

Valid values are

```
...
```
55 is the default, and if a language is vertical (like Japanese) it preserves that orientation, while rotating text written in western languages
```
...
```
56 makes all text be vertically oriented
```
...
```
57 makes all text horizontally oriented

...

87

Sets the direction of the text. Valid values are

...

59 and

...

60

p {
  font-size: 20px;
}

a {
  color: blue;
}

00

...

89

This property specifies how to break lines within words

```
...
```
27 (default) means the text is only broken between words, not inside a word
```
...
```
63 the browser can break a word (but no hyphens are added)
```
...
```
64 suppress soft wrapping. Mostly used for CJK (Chinese/Japanese/Korean) text

Speaking of CJK text, the property

...

88 is used to determine how text lines break. I'm not an expert with those languages, so I will avoid covering it

...

90

If a word is too long to fit a line, it can overflow outside of the container

This property is also known as
...
67, although that is non-standard (but still works as an alias)

This is the default behavior (

...

68)

We can use

p {
  font-size: 20px;
}

a {
  color: blue;
}

01

to break it at the exact length of the line, or

p {
  font-size: 20px;
}

a {
  color: blue;
}

02

if the browser sees there’s a soft wrap opportunity somewhere earlier. No hyphens are added, in any case

This property is very similar to

...

89. We might want to choose this one on western languages, while

...

89 has special treatment for non-western languages

BOX MODEL

Every CSS element is essentially a box. Every element is a generic box

The box model explains the sizing of the elements based on a few CSS properties

From the inside to the outside, we have

the content area
padding
border
margin

The best way to visualize the box model is to open the browser DevTools and check how it is displayed

Here you can see how Firefox tells me the properties of a

p, a {
  font-size: 20px;
}

56 element I highlighted. I right-clicked on it, pressed Inspect Element, and went to the Layout panel of the DevTools

See, the light blue space is the content area. Surrounding it there is the padding, then the border and finally the margin

By default, if you set a width (or height) on the element, that is going to be applied to the content area. All the padding, border, and margin calculations are done outside of the value, so you have to keep this in mind when you do your calculation

Later you’ll see how you can change this behavior using Box Sizing

BORDER

The border is a thin layer between padding and margin. By editing the border, you can make elements draw their perimeter on screen

You can work on borders by using those properties

```
...
```
72

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

35

```
...
```
74

The property

...

75 can be used as a shorthand for all those properties

...

76 is used to create rounded corners

You also have the ability to use images as borders, an ability given to you by

...

77 and its specific separate properties

```
...
```
78
```
...
```
79
```
...
```
80
```
...
```
81
```
...
```
82

Let’s start with

...

72

The border style

The

...

72 property lets you choose the style of the border. The options you can use are

```
...
```
04
```
...
```
05
```
...
```
02
```
...
```
03
```
...
```
89
```
...
```
90
```
...
```
91
```
...
```
92
```
...
```
95
```
...
```
94

Check out this Codepen for a live example

The default for the style is

...

95, so to make the border appear at all you need to change it to something else.

...

02 is a good choice most of the time

You can set a different style for each edge using the properties

```
...
```
97
```
...
```
98
```
...
```
99
```
p {
  color: yellow;
}
```
00

or you can use

...

72 with multiple values to define them, using the usual Top-Right-Bottom-Left order

p {
  font-size: 20px;
}

a {
  color: blue;
}

03

The border width

...

74 is used to set the width of the border

You can use one of the pre-defined values

```
p {
  color: yellow;
}
```
03
```
p {
  color: yellow;
}
```
04 (the default value)
```
p {
  color: yellow;
}
```
05

or express a value in pixels, em or rem or any other valid length value

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

04

You can set the width of each edge (Top-Right-Bottom-Left) separately by using 4 values

p {
  font-size: 20px;
}

a {
  color: blue;
}

05

or you can use the specific edge properties

p {
  color: yellow;
}

06,

p {
  color: yellow;
}

07,

p {
  color: yellow;
}

08,

p {
  color: yellow;
}

09

The border color

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

35 is used to set the color of the border

If you don’t set a color, the border by default is colored using the color of the text in the element

You can pass any valid color value to

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

35

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

06

You can set the color of each edge (Top-Right-Bottom-Left) separately by using 4 values

p {
  font-size: 20px;
}

a {
  color: blue;
}

07

or you can use the specific edge properties

p {
  color: yellow;
}

12,

p {
  color: yellow;
}

13,

p {
  color: yellow;
}

14,

p {
  color: yellow;
}

15

The border shorthand property

Those 3 properties mentioned,

...

74,

...

72 and

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

35 can be set using the shorthand property

...

75

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

08

You can also use the edge-specific properties

p {
  color: yellow;
}

20,

p {
  color: yellow;
}

21,

p {
  color: yellow;
}

22,

p {
  color: yellow;
}

23

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

09

The border radius

...

76 is used to set rounded corners to the border. You need to pass a value that will be used as the radius of the circle that will be used to round the border

Cách sử dụng

p {
  font-size: 20px;
}

a {
  color: blue;
}

10

You can also use the edge-specific properties

p {
  color: yellow;
}

25,

p {
  color: yellow;
}

26,

p {
  color: yellow;
}

27,

p {
  color: yellow;
}

28

Using images as borders

One very cool thing with borders is the ability to use images to style them. This lets you go very creative with borders

We have 5 properties

```
...
```
78
```
...
```
79
```
...
```
80
```
...
```
81
```
...
```
82

and the shorthand

...

77. I won't go in much details here as images as borders would need a more in-depth coverage as what I can do in this little chapter. I recommend reading the CSS Tricks almanac entry on border-image for more information

PADDING

The

p {
  color: yellow;
}

35 CSS property is commonly used in CSS to add space in the inner side of an element

Remember

```
p {
  color: yellow;
}
```
36 thêm khoảng trống bên ngoài đường viền phần tử
```
p {
  color: yellow;
}
```
35 adds space inside an element border

Specific padding properties

p {
  color: yellow;
}

35 có 4 thuộc tính liên quan thay đổi phần đệm của một cạnh cùng một lúc

```
p {
  color: yellow;
}
```
39
```
p {
  color: yellow;
}
```
40
```
p {
  color: yellow;
}
```
41
```
p {
  color: yellow;
}
```
42

Cách sử dụng của chúng rất đơn giản và không thể nhầm lẫn, ví dụ

p {
  font-size: 20px;
}

a {
  color: blue;
}

11

Sử dụng tốc ký

p {
  color: yellow;
}

35

p {
  color: yellow;
}

35 là cách viết tắt để chỉ định nhiều giá trị đệm cùng một lúc và tùy thuộc vào số lượng giá trị được nhập, nó sẽ hoạt động khác nhau

1 value

Using a single value applies that to all the paddings. top, right, bottom, left

p {
  font-size: 20px;
}

a {
  color: blue;
}

12

2 values

Using 2 values applies the first to bottom & top, and the second to left & right

p {
  font-size: 20px;
}

a {
  color: blue;
}

13

3 values

Using 3 values applies the first to top, the second to left & right, the third to bottom

p {
  font-size: 20px;
}

a {
  color: blue;
}

14

4 values

Using 4 values applies the first to top, the second to right, the third to bottom, the fourth to left

p {
  font-size: 20px;
}

a {
  color: blue;
}

15

So, the order is top-right-bottom-left

Values accepted

p {
  color: yellow;
}

35 accepts values expressed in any kind of length unit, the most common ones are px, em, rem, but many others exist

MARGIN

The

p {
  color: yellow;
}

36 CSS property is commonly used in CSS to add space around an element

Remember

```
p {
  color: yellow;
}
```
36 thêm khoảng trống bên ngoài đường viền phần tử
```
p {
  color: yellow;
}
```
35 adds space inside an element border

Specific margin properties

p {
  color: yellow;
}

36 has 4 related properties that alter the margin of a single edge at once

```
p {
  color: yellow;
}
```
50
```
p {
  color: yellow;
}
```
51
```
p {
  color: yellow;
}
```
52
```
p {
  color: yellow;
}
```
53

Cách sử dụng của chúng rất đơn giản và không thể nhầm lẫn, ví dụ

p {
  font-size: 20px;
}

a {
  color: blue;
}

16

Using the

p {
  color: yellow;
}

36 shorthand

p {
  color: yellow;
}

36 is a shorthand to specify multiple margins at the same time, and depending on the number of values entered, it behaves differently

1 value

Using a single value applies that to all the margins. top, right, bottom, left

p {
  font-size: 20px;
}

a {
  color: blue;
}

17

2 values

Using 2 values applies the first to bottom & top, and the second to left & right

p {
  font-size: 20px;
}

a {
  color: blue;
}

18

3 values

Using 3 values applies the first to top, the second to left & right, the third to bottom

p {
  font-size: 20px;
}

a {
  color: blue;
}

19

4 values

Using 4 values applies the first to top, the second to right, the third to bottom, the fourth to left

p {
  font-size: 20px;
}

a {
  color: blue;
}

20

So, the order is top-right-bottom-left

Values accepted

p {
  color: yellow;
}

36 accepts values expressed in any kind of length unit, the most common ones are px, em, rem, but many others exist

It also accepts percentage values, and the special value

77

Using

77 to center elements

77 can be used to tell the browser to select automatically a margin, and it's most commonly used to center an element in this way

p {
  font-size: 20px;
}

a {
  color: blue;
}

21

As said above, using 2 values applies the first to bottom & top, and the second to left & right

The modern way to center elements is to use Flexbox, and its

p {
  color: yellow;
}

60 directive

Older browsers of course do not implement Flexbox, and if you need to support them

p {
  color: yellow;
}

61 is still a good choice

Using a negative margin

p {
  color: yellow;
}

36 is the only property related to sizing that can have a negative value. It's extremely useful, too. Setting a negative top margin makes an element move over elements before it, and given enough negative value it will move out of the page

A negative bottom margin moves up the elements after it

A negative right margin makes the content of the element expand beyond its allowed content size

A negative left margin moves the element left over the elements that precede it, and given enough negative value it will move out of the page

BOX SIZING

The default behavior of browsers when calculating the width of an element is to apply the calculated width and height to the content area, without taking any of the padding, border and margin in consideration

This approach has proven to be quite complicated to work with

You can change this behavior by setting the

p {
  color: yellow;
}

63 property

The

p {
  color: yellow;
}

63 property is a great help. It has 2 values

54
56

56 is the default, the one we had for ages before

p {
  color: yellow;
}

63 became a thing

54 is the new and great thing we are looking for. If you set that on an element

p {
  font-size: 20px;
}

a {
  color: blue;
}

22

width and height calculation include the padding and the border. Only the margin is left out, which is reasonable since in our mind we also typically see that as a separate thing. margin is outside of the box

This property is a small change but has a big impact. CSS Tricks even declared an international box-sizing awareness day, just saying, and it’s recommended to apply it to every element on the page, out of the box, with this

p {
  font-size: 20px;
}

a {
  color: blue;
}

23

TRƯNG BÀY

The

p {
  color: yellow;
}

70 property of an object determines how it is rendered by the browser

It’s a very important property, and probably the one with the highest number of values you can use

Those values include

```
p {
  color: yellow;
}
```
71
```
p {
  color: yellow;
}
```
72
```
...
```
95
```
p {
  color: yellow;
}
```
74
```
p {
  color: yellow;
}
```
75
```
p {
  color: yellow;
}
```
76

p {
  color: yellow;
}

77 (and all the

p {
  color: yellow;
}

78 ones)

```
p {
  color: yellow;
}
```
79
```
p {
  color: yellow;
}
```
80
```
p {
  color: yellow;
}
```
81
```
p {
  color: yellow;
}
```
82
```
p {
  color: yellow;
}
```
83
```
p {
  color: yellow;
}
```
84
```
p {
  color: yellow;
}
```
85
```
p {
  color: yellow;
}
```
86

plus others you will not likely use, like

p {
  color: yellow;
}

87

Choosing any of those will considerably alter the behavior of the browser with the element and its children

In this section we’ll analyze the most important ones not covered elsewhere

```
p {
  color: yellow;
}
```
71
```
p {
  color: yellow;
}
```
72
```
p {
  color: yellow;
}
```
82
```
...
```
95

We’ll see some of the others in later chapters, including coverage of

p {
  color: yellow;
}

77,

p {
  color: yellow;
}

79 and

p {
  color: yellow;
}

80

p {
  color: yellow;
}

72

Inline is the default display value for every element in CSS

All the HTML tags are displayed inline out of the box except some elements like

p, a {
  font-size: 20px;
}

55,

p, a {
  font-size: 20px;
}

31 and

p {
  color: yellow;
}

98, which are set as

p {
  color: yellow;
}

71 by the user agent (the browser)

Inline elements don’t have any margin or padding applied

Same for height and width

You can add them, but the appearance in the page won’t change — they are calculated and applied automatically by the browser

p {
  color: yellow;
}

82

Similar to

p {
  color: yellow;
}

72, but with

p {
  color: yellow;
}

82


  Roger


.dog-name {
  color: yellow;
}

03 and


  Roger


.dog-name {
  color: yellow;
}

04 applied as you specify

p {
  color: yellow;
}

71

As mentioned, normally elements are displayed inline, with the exception of some elements, including

```
p, a {
  font-size: 20px;
}
```
55
```
p, a {
  font-size: 20px;
}
```
31
```
p {
  color: yellow;
}
```
98


  Roger


.dog-name {
  color: yellow;
}

09

which are set as

p {
  color: yellow;
}

71 by the browser

With


  Roger


.dog-name {
  color: yellow;
}

11, elements are stacked one after each other, vertically, and every element takes up 100% of the page

The values assigned to the


  Roger


.dog-name {
  color: yellow;
}

03 and


  Roger


.dog-name {
  color: yellow;
}

04 properties are respected, if you set them, along with

p {
  color: yellow;
}

36 and

p {
  color: yellow;
}

35

...

95

Using


  Roger


.dog-name {
  color: yellow;
}

17 makes an element disappear. It's still there in the HTML, but just not visible in the browser

POSITIONING

Positioning is what makes us determine where elements appear on the screen, and how they appear

You can move elements around, and position them exactly where you want

In this section we’ll also see how things change on a page based on how elements with different

...

06 interact with each other

We have one main CSS property.

...

06

It can have those 5 values


  Roger


.dog-name {
  color: yellow;
}

20


  Roger


.dog-name {
  color: yellow;
}

21


  Roger


.dog-name {
  color: yellow;
}

22


  Roger


.dog-name {
  color: yellow;
}

23


  Roger


.dog-name {
  color: yellow;
}

24

Static positioning

This is the default value for an element. Static positioned elements are displayed in the normal page flow

Relative positioning

Nếu bạn đặt


  Roger


.dog-name {
  color: yellow;
}

25 trên một phần tử, thì bây giờ bạn có thể định vị phần tử đó bằng phần bù, sử dụng các thuộc tính

top
right
đáy
left

được gọi là thuộc tính bù đắp. They accept a length value or a percentage

Take this example I made on Codepen. I create a parent container, a child container, and an inner box with some text

p {
  font-size: 20px;
}

a {
  color: blue;
}

24

with some CSS to give some colors and padding, but does not affect positioning

p {
  font-size: 20px;
}

a {
  color: blue;
}

25

here’s the result

You can try and add any of the properties I mentioned before (

62,

60,

63,

59) to


  Roger


.dog-name {
  color: yellow;
}

30, and nothing will happen. The position is


  Roger


.dog-name {
  color: yellow;
}

20

Now if we set


  Roger


.dog-name {
  color: yellow;
}

25 to the box, at first apparently nothing changes. But the element is now able to move using the

62,

60,

63,

59 properties, and now you can alter the position of it relatively to the element containing it

For example

p {
  font-size: 20px;
}

a {
  color: blue;
}

26

A negative value for

62 will make the box move up relatively to its container.

Or

p {
  font-size: 20px;
}

a {
  color: blue;
}

27

Notice how the space that is occupied by the box remains preserved in the container, like it was still in its place.

Another property that will now work is


  Roger


.dog-name {
  color: yellow;
}

38 to alter the z-axis placement. We'll talk about it later on

Absolute positioning

Setting


  Roger


.dog-name {
  color: yellow;
}

39 on an element will remove it from the document's flow

Remember in relative positioning that we noticed the space originally occupied by an element was preserved even if it was moved around?

With absolute positioning, as soon as we set


  Roger


.dog-name {
  color: yellow;
}

39 on


  Roger


.dog-name {
  color: yellow;
}

30, its original space is now collapsed, and only the origin (x, y coordinates) remain the same

p {
  font-size: 20px;
}

a {
  color: blue;
}

28

We can now move the box around as we please, using the

62,

60,

63,

59 properties.

p {
  font-size: 20px;
}

a {
  color: blue;
}

29

or

p {
  font-size: 20px;
}

a {
  color: blue;
}

30

The coordinates are relative to the closest container that is not


  Roger


.dog-name {
  color: yellow;
}

20.

This means that if we add


  Roger


.dog-name {
  color: yellow;
}

25 to the


  Roger


.dog-name {
  color: yellow;
}

48 element, and we set

62 and

59 to 0, the box will not be positioned at the top left margin of the window, but rather it will be positioned at the 0, 0 coordinates of


  Roger


.dog-name {
  color: yellow;
}

48

p {
  font-size: 20px;
}

a {
  color: blue;
}

31

Here’s how we already saw that


  Roger


.dog-name {
  color: yellow;
}

48 is static (the default).

p {
  font-size: 20px;
}

a {
  color: blue;
}

32

Like for relative positioning, you can use


  Roger


.dog-name {
  color: yellow;
}

38 to alter the z-axis placement.

Fixed positioning

Like with absolute positioning, when an element is assigned


  Roger


.dog-name {
  color: yellow;
}

54 it's removed from the flow of the page

The difference with absolute positioning is this. elements are now always positioned relative to the window, instead of the first non-static container

p {
  font-size: 20px;
}

a {
  color: blue;
}

33

p {
  font-size: 20px;
}

a {
  color: blue;
}

34

Another big difference is that elements are not affected by scrolling. Once you put a sticky element somewhere, scrolling the page does not remove it from the visible part of the page.

Sticky positioning

While the above values have been around for a very long time, this one was introduced recently and it’s still relatively unsupported ()

The UITableView iOS component is the thing that comes to mind when I think about


  Roger


.dog-name {
  color: yellow;
}

55. You know when you scroll in the contacts list and the first letter is stuck to the top, to let you know you are viewing that particular letter's contacts?

We used JavaScript to emulate that, but this is the approach taken by CSS to allow it natively

FLOATING AND CLEARING

Floating has been a very important topic in the past

It was used in lots of hacks and creative usages because it was one of the few ways, along with tables, we could really implement some layouts. In the past we used to float the sidebar to the left, for example, to show it on the left side of the screen and added some margin to the main content

Luckily times have changed and today we have Flexbox and Grid to help us with layout, and float has gone back to its original scope. placing content on one side of the container element, and making its siblings show up around it

The


  Roger


.dog-name {
  color: yellow;
}

56 property supports 3 values

59
60
```
...
```
95 (the default)

Say we have a box which contains a paragraph with some text, and the paragraph also contains an image

Here’s some code

p {
  font-size: 20px;
}

a {
  color: blue;
}

35

and the visual appearance

As you can see, the normal flow by default considers the image inline, and makes space for it in the line itself

If we add


  Roger


.dog-name {
  color: yellow;
}

60 to the image, and some padding

p {
  font-size: 20px;
}

a {
  color: blue;
}

36

this is the result

và đây là những gì chúng tôi nhận được bằng cách áp dụng một float. right, adjusting the padding accordingly

p {
  font-size: 20px;
}

a {
  color: blue;
}

37

A floated element is removed from the normal flow of the page, and the other content flows around it.

See the example on Codepen

You are not limited to floating images, too. Here we switch the image with a

p, a {
  font-size: 20px;
}

56 element

p {
  font-size: 20px;
}

a {
  color: blue;
}

38

and this is the result

Clearing

What happens when you float more than one element?

If when floated they find another floated image, by default they are stacked up one next to the other, horizontally. Until there is no room, and they will start being stacked on a new line

Say we had 3 inline images inside a

p, a {
  font-size: 20px;
}

31 tag

If we add


  Roger


.dog-name {
  color: yellow;
}

60 to those images

p {
  font-size: 20px;
}

a {
  color: blue;
}

36

this is what we’ll have

if you add


  Roger


.dog-name {
  color: yellow;
}

64 to images, those are going to be stacked vertically rather than horizontally

I used the

59 value for


  Roger


.dog-name {
  color: yellow;
}

66. It allows

59 to clear left floats
60 to clear right floats


  Roger


.dog-name {
  color: yellow;
}

69 to clear both left and right floats

```
...
```
95 (default) disables clearing

Z-INDEX

When we talked about positioning, I mentioned that you can use the


  Roger


.dog-name {
  color: yellow;
}

38 property to control the Z axis positioning of elements

It’s very useful when you have multiple elements that overlap each other, and you need to decide which one is visible, as nearer to the user, and which one(s) should be hidden behind it

This property takes a number (without decimals) and uses that number to calculate which elements appear nearer to the user, in the Z axis

The higher the z-index value, the more an element is positioned nearer to the user

When deciding which element should be visible and which one should be positioned behind it, the browser does a calculation on the z-index value

The default value is

77, a special keyword. Using

77, the Z axis order is determined by the position of the HTML element in the page - the last sibling appears first, as it's defined last

By default elements have the


  Roger


.dog-name {
  color: yellow;
}

20 value for the

...

06 property. In this case, the


  Roger


.dog-name {
  color: yellow;
}

38 property does not make any difference - it must be set to


  Roger


.dog-name {
  color: yellow;
}

22,


  Roger


.dog-name {
  color: yellow;
}

21 or


  Roger


.dog-name {
  color: yellow;
}

23 to work

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

40

The element with class


  Roger


.dog-name {
  color: yellow;
}

80 will be displayed, and behind it


  Roger


.dog-name {
  color: yellow;
}

81

Here we used 10 and 20, but you can use any number. Negative numbers too. It’s common to pick non-consecutive numbers, so you can position elements in the middle. If you use consecutive numbers instead, you would need to re-calculate the z-index of each element involved in the positioning

CSS GRID

CSS Grid is the new kid in the CSS town, and while not yet fully supported by all browsers, it’s going to be the future system for layouts

CSS Grid is a fundamentally new approach to building layouts using CSS

Keep an eye on the CSS Grid Layout page on caniuse. com () to find out which browsers currently support it. At the time of writing, April 2019, all major browsers (except IE, which will never have support for it) are already supporting this technology, covering 92% of all users

CSS Grid is not a competitor to Flexbox. They interoperate and collaborate on complex layouts, because CSS Grid works on 2 dimensions (rows AND columns) while Flexbox works on a single dimension (rows OR columns)

Building layouts for the web has traditionally been a complicated topic

I won’t dig into the reasons for this complexity, which is a complex topic on its own. But you can think yourself as a very lucky human because nowadays you have 2 very powerful and well supported tools at your disposal

CSS Flexbox
CSS Grid

These 2 are the tools to build the Web layouts of the future

Unless you need to support old browsers like IE8 and IE9, there is no reason to be messing with things like

Table layouts
Floats
clearfix hacks


  Roger


.dog-name {
  color: yellow;
}

82 hacks

In this guide there’s all you need to know about going from zero knowledge of CSS Grid to being a proficient user

The basics

The CSS Grid layout is activated on a container element (which can be a

p, a {
  font-size: 20px;
}

55 or any other tag) by setting


  Roger


.dog-name {
  color: yellow;
}

84

As with flexbox, you can define some properties on the container, and some properties on each individual item in the grid

These properties combined will determine the final look of the grid

The most basic container properties are


  Roger


.dog-name {
  color: yellow;
}

85 and


  Roger


.dog-name {
  color: yellow;
}

86

grid-template-columns and grid-template-rows

Those properties define the number of columns and rows in the grid, and they also set the width of each column/row

The following snippet defines a grid with 4 columns each 200px wide, and 2 rows with a 300px height each

p {
  font-size: 20px;
}

a {
  color: blue;
}

41

Here’s another example of a grid with 2 columns and 2 rows.

p {
  font-size: 20px;
}

a {
  color: blue;
}

42

Automatic dimensions

Many times you might have a fixed header size, a fixed footer size, and the main content that is flexible in height, depending on its length. In this case you can use the auto keyword

p {
  font-size: 20px;
}

a {
  color: blue;
}

43

Different columns and rows dimensions

In the above examples we made regular grids by using the same values for rows and the same values for columns

You can specify any value for each row/column, to create a lot of different designs

p {
  font-size: 20px;
}

a {
  color: blue;
}

44

Another example.

p {
  font-size: 20px;
}

a {
  color: blue;
}

45

Adding space between the cells

Trừ khi được chỉ định, không có khoảng cách giữa các ô

You can add spacing by using those properties


  Roger


.dog-name {
  color: yellow;
}

87


  Roger


.dog-name {
  color: yellow;
}

88

or the shorthand syntax


  Roger


.dog-name {
  color: yellow;
}

89

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

46

The same layout using the shorthand.

p {
  font-size: 20px;
}

a {
  color: blue;
}

47

Spawning items on multiple columns and/or rows

Every cell item has the option to occupy more than just one box in the row, and expand horizontally or vertically to get more space, while respecting the grid proportions set in the container

These are the properties we’ll use for that


  Roger


.dog-name {
  color: yellow;
}

90


  Roger


.dog-name {
  color: yellow;
}

91


  Roger


.dog-name {
  color: yellow;
}

92


  Roger


.dog-name {
  color: yellow;
}

93

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

48

The numbers correspond to the vertical line that separates each column, starting from 1.

The same principle applies to


  Roger


.dog-name {
  color: yellow;
}

92 and


  Roger


.dog-name {
  color: yellow;
}

93, except this time instead of taking more columns, a cell takes more rows

Shorthand syntax

Those properties have a shorthand syntax provided by


  Roger


.dog-name {
  color: yellow;
}

96


  Roger


.dog-name {
  color: yellow;
}

97

The usage is simple, here’s how to replicate the above layout

p {
  font-size: 20px;
}

a {
  color: blue;
}

49

Another approach is to set the starting column/row, and set how many it should occupy using

p, a {
  font-size: 20px;
}

56

p {
  font-size: 20px;
}

a {
  color: blue;
}

50

More grid configuration

Using fractions

Specifying the exact width of each column or row is not ideal in every case

A fraction is a unit of space

The following example divides a grid into 3 columns with the same width, 1/3 of the available space each

p {
  font-size: 20px;
}

a {
  color: blue;
}

51

Using percentages and rem

You can also use percentages, and mix and match fractions, pixels, rem and percentages

p {
  font-size: 20px;
}

a {
  color: blue;
}

52

Using


  Roger


.dog-name {
  color: yellow;
}

99


  Roger


.dog-name {
  color: yellow;
}

99 is a special function that takes a number that indicates the number of times a row/column will be repeated, and the length of each one

If every column has the same width, you can specify the layout using this syntax

p {
  font-size: 20px;
}

a {
  color: blue;
}

53

This creates 4 columns with the same width

Or using fractions

p {
  font-size: 20px;
}

a {
  color: blue;
}

54

Specify a minimum width for a row

Common use case. Have a sidebar that never collapses more than a certain amount of pixels when you resize the window

Here’s an example where the sidebar takes 1/4 of the screen and never takes less than 200px

p {
  font-size: 20px;
}

a {
  color: blue;
}

55

You can also set just a maximum value using the

77 keyword

p {
  font-size: 20px;
}

a {
  color: blue;
}

56

or just a minimum value

p {
  font-size: 20px;
}

a {
  color: blue;
}

57

Positioning elements using

p {
  font-size: 20px;
}

a {
  color: blue;
}

002

By default elements are positioned in the grid using their order in the HTML structure

Using

p {
  font-size: 20px;
}

a {
  color: blue;
}

002 you can define template areas to move them around in the grid, and also to spawn an item on multiple rows / columns instead of using


  Roger


.dog-name {
  color: yellow;
}

96

Here’s an example

p {
  font-size: 20px;
}

a {
  color: blue;
}

58

Despite their original order, items are placed where

p {
  font-size: 20px;
}

a {
  color: blue;
}

002 define, depending on the

p {
  font-size: 20px;
}

a {
  color: blue;
}

006 property associated to them

Adding empty cells in template areas

You can set an empty cell using the dot

p, a {
  font-size: 20px;
}

62 instead of an area name in

p {
  font-size: 20px;
}

a {
  color: blue;
}

002

p {
  font-size: 20px;
}

a {
  color: blue;
}

59

Fill a page with a grid

You can make a grid extend to fill the page using

33

p {
  font-size: 20px;
}

a {
  color: blue;
}

60

An example. header, sidebar, content and footer

Here is a simple example of using CSS Grid to create a site layout that provides a header op top, a main part with sidebar on the left and content on the right, and a footer afterwards

Here’s the markup

p {
  font-size: 20px;
}

a {
  color: blue;
}

61

and here’s the CSS

p {
  font-size: 20px;
}

a {
  color: blue;
}

62

I added some colors to make it prettier, but basically it assigns to every different tag a

p {
  font-size: 20px;
}

a {
  color: blue;
}

006 name, which is used in the

p {
  font-size: 20px;
}

a {
  color: blue;
}

002 property in

p {
  font-size: 20px;
}

a {
  color: blue;
}

012

Khi bố cục nhỏ hơn, chúng ta có thể đặt thanh bên bên dưới nội dung bằng truy vấn phương tiện

p {
  font-size: 20px;
}

a {
  color: blue;
}

63

See on CodePen

These are the basics of CSS Grid. There are many things I didn’t include in this introduction but I wanted to make it very simple, so you can start using this new layout system without making it feel overwhelming

FLEXBOX

Flexbox, also called Flexible Box Module, is one of the two modern layouts systems, along with CSS Grid

Compared to CSS Grid (which is bi-dimensional), flexbox is a one-dimensional layout model. It will control the layout based on a row or on a column, but not together at the same time

The main goal of flexbox is to allow items to fill the whole space offered by their container, depending on some rules you set

Unless you need to support old browsers like IE8 and IE9, Flexbox is the tool that lets you forget about using

Table layouts
Floats
clearfix hacks


  Roger


.dog-name {
  color: yellow;
}

82 hacks

Let’s dive into flexbox and become a master of it in a very short time

hỗ trợ trình duyệt

At the time of writing (Feb 2018), it’s supported by 97. 66% of the users. All the most important browsers have implemented it for years, so even older browsers (including IE10+) are covered

While we must wait a few years for users to catch up on CSS Grid, Flexbox is an older technology and can be used right now

Enable Flexbox

A flexbox layout is applied to a container, by setting

p {
  font-size: 20px;
}

a {
  color: blue;
}

64

or

p {
  font-size: 20px;
}

a {
  color: blue;
}

65

The content inside the container will be aligned using flexbox

Container properties

Some flexbox properties apply to the container, which sets the general rules for its items. They are

p {
  font-size: 20px;
}

a {
  color: blue;
}

014

p {
  font-size: 20px;
}

a {
  color: blue;
}

015

p {
  font-size: 20px;
}

a {
  color: blue;
}

016

p {
  font-size: 20px;
}

a {
  color: blue;
}

017

p {
  font-size: 20px;
}

a {
  color: blue;
}

018

Align rows or columns

The first property we see,

p {
  font-size: 20px;
}

a {
  color: blue;
}

019, determines if the container should align its items as rows, or as columns

```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
020 places items as a row, in the text direction (left-to-right for western countries)

p {
  font-size: 20px;
}

a {
  color: blue;
}

021 places items just like

p {
  font-size: 20px;
}

a {
  color: blue;
}

022 but in the opposite direction

```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
023 places items in a column, ordering top to bottom

p {
  font-size: 20px;
}

a {
  color: blue;
}

024 places items in a column, just like

p {
  font-size: 20px;
}

a {
  color: blue;
}

025 but in the opposite direction

Vertical and horizontal alignment

By default, items start from the left if

p {
  font-size: 20px;
}

a {
  color: blue;
}

014 is row, and from the top if

p {
  font-size: 20px;
}

a {
  color: blue;
}

014 is column

You can change this behavior using

p {
  font-size: 20px;
}

a {
  color: blue;
}

015 to change the horizontal alignment, and

p {
  font-size: 20px;
}

a {
  color: blue;
}

016 to change the vertical alignment

Change the horizontal alignment

p {
  font-size: 20px;
}

a {
  color: blue;
}

030 has 5 possible values

p {
  font-size: 20px;
}

a {
  color: blue;
}

031. align to the left side of the container

p {
  font-size: 20px;
}

a {
  color: blue;
}

032. align to the right side of the container

```
p, a {
  font-size: 20px;
}
```
37. align at the center of the container

p {
  font-size: 20px;
}

a {
  color: blue;
}

034. display with equal spacing between them

p {
  font-size: 20px;
}

a {
  color: blue;
}

035. display with equal spacing around them

Change the vertical alignment

p {
  font-size: 20px;
}

a {
  color: blue;
}

036 has 5 possible values

p {
  font-size: 20px;
}

a {
  color: blue;
}

031. align to the top of the container

p {
  font-size: 20px;
}

a {
  color: blue;
}

032. align to the bottom of the container

```
p, a {
  font-size: 20px;
}
```
37. align at the vertical center of the container
```
...
```
19. display at the baseline of the container

p {
  font-size: 20px;
}

a {
  color: blue;
}

041. items are stretched to fit the container

A note on

...

19

...

19 looks similar to

p {
  font-size: 20px;
}

a {
  color: blue;
}

031 in this example, due to my boxes being too simple. Check out this Codepen to have a more useful example, which I forked from a Pen originally created by Martin Michálek. As you can see there, item dimensions are aligned

Wrap

By default, items in a flexbox container are kept on a single line, shrinking them to fit in the container

To force the items to spread across multiple lines, use

p {
  font-size: 20px;
}

a {
  color: blue;
}

045. This will distribute the items according to the order set in

p {
  font-size: 20px;
}

a {
  color: blue;
}

014. Use

p {
  font-size: 20px;
}

a {
  color: blue;
}

047 to reverse this order

A shorthand property called

p {
  font-size: 20px;
}

a {
  color: blue;
}

018 allows you to specify

p {
  font-size: 20px;
}

a {
  color: blue;
}

014 and

p {
  font-size: 20px;
}

a {
  color: blue;
}

017 in a single line, by adding the

p {
  font-size: 20px;
}

a {
  color: blue;
}

014 value first, followed by

p {
  font-size: 20px;
}

a {
  color: blue;
}

017 value, for example.

p {
  font-size: 20px;
}

a {
  color: blue;
}

053

Properties that apply to each single item

Cho đến thời điểm này, chúng tôi đã thấy các thuộc tính mà bạn có thể áp dụng cho vùng chứa

Single items can have a certain amount of independence and flexibility, and you can alter their appearance using those properties

p {
  font-size: 20px;
}

a {
  color: blue;
}

054

p {
  font-size: 20px;
}

a {
  color: blue;
}

055

p {
  font-size: 20px;
}

a {
  color: blue;
}

056

p {
  font-size: 20px;
}

a {
  color: blue;
}

057

p {
  font-size: 20px;
}

a {
  color: blue;
}

058

```
p {
  color: yellow;
}
```
79

Let’s see them in detail

Moving items before / after another one using order

Items are ordered based on the order they are assigned. Theo mặc định, mọi mục có thứ tự

24 và giao diện trong HTML xác định thứ tự cuối cùng

You can override this property using

p {
  font-size: 20px;
}

a {
  color: blue;
}

054 on each separate item. This is a property you set on the item, not the container. You can make an item appear before all the others by setting a negative value

Vertical alignment using align-self

An item can choose to override the container

p {
  font-size: 20px;
}

a {
  color: blue;
}

016 setting, using

p {
  font-size: 20px;
}

a {
  color: blue;
}

063, which has the same 5 possible values of

p {
  font-size: 20px;
}

a {
  color: blue;
}

016

p {
  font-size: 20px;
}

a {
  color: blue;
}

031. align to the top of the container

p {
  font-size: 20px;
}

a {
  color: blue;
}

032. align to the bottom of the container

```
p, a {
  font-size: 20px;
}
```
37. align at the vertical center of the container
```
...
```
19. display at the baseline of the container

p {
  font-size: 20px;
}

a {
  color: blue;
}

041. items are stretched to fit the container

Phát triển hoặc thu nhỏ một mục nếu cần thiết

flex-grow

The defaut for any item is 0

If all items are defined as 1 and one is defined as 2, the bigger element will take the space of two “1” items

flex-shrink

The defaut for any item is 1

If all items are defined as 1 and one is defined as 3, the bigger element will shrink 3x the other ones. When less space is available, it will take 3x less space

cơ sở linh hoạt

Nếu được đặt thành

77, nó sẽ định cỡ một mục theo chiều rộng hoặc chiều cao của nó và thêm không gian bổ sung dựa trên thuộc tính

p {
  font-size: 20px;
}

a {
  color: blue;
}

056

If set to 0, it does not add any extra space for the item when calculating the layout

If you specify a pixel number value, it will use that as the length value (width or height depends on if it’s a row or a column item)

flex

This property combines the above 3 properties

p {
  font-size: 20px;
}

a {
  color: blue;
}

056

p {
  font-size: 20px;
}

a {
  color: blue;
}

057

p {
  font-size: 20px;
}

a {
  color: blue;
}

058

and provides a shorthand syntax.

p {
  font-size: 20px;
}

a {
  color: blue;
}

075

TABLES

Tables in the past were greatly overused in CSS, as they were one of the only ways we could create a fancy page layout

Today with Grid and Flexbox we can move tables back to the job they were intended to do. styling tables

Let’s start from the HTML. This is a basic table

p {
  font-size: 20px;
}

a {
  color: blue;
}

66

By default it’s not very attractive. The browser provides some standard styles, and that’s it

We can use CSS to style all the elements of the table, of course

Let’s start with the border. A nice border can go a long way

We can apply it on the

p {
  color: yellow;
}

77 element, and on the inner elements too, like

p {
  font-size: 20px;
}

a {
  color: blue;
}

077 and

p {
  font-size: 20px;
}

a {
  color: blue;
}

078

p {
  font-size: 20px;
}

a {
  color: blue;
}

67

If we pair it with some margin, we get a nice result

One common thing with tables is the ability to add a color to one row, and a different color to another row. This is possible using the

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

20 or

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

21 selector

p {
  font-size: 20px;
}

a {
  color: blue;
}

68

This gives us

If you add

p {
  font-size: 20px;
}

a {
  color: blue;
}

081 to the table element, all borders are collapsed into one

CENTERING

Centering things in CSS is a task that is very different if you need to center horizontally or vertically

In this post I explain the most common scenarios and how to solve them. If a new solution is provided by Flexbox I ignore the old techniques because we need to move forward, and Flexbox has been supported by browsers for years, IE10 included

Center horizontally

Text

Text is very simple to center horizontally using the

...

74 property set to

p, a {
  font-size: 20px;
}

37

p {
  font-size: 20px;
}

a {
  color: blue;
}

69

Blocks

The modern way to center anything that is not text is to use Flexbox

p {
  font-size: 20px;
}

a {
  color: blue;
}

70

any element inside

p {
  font-size: 20px;
}

a {
  color: blue;
}

084 will be horizontally centered

Here is the alternative approach if you don’t want to use Flexbox

Anything that is not text can be centered by applying an automatic margin to left and right, and setting the width of the element

p {
  font-size: 20px;
}

a {
  color: blue;
}

71

the above

p {
  color: yellow;
}

61 is a shorthand for

p {
  font-size: 20px;
}

a {
  color: blue;
}

72

Remember to set the item to


  Roger


.dog-name {
  color: yellow;
}

11 if it's an inline element

Center vertically

Traditionally this has always been a difficult task. Flexbox hiện cung cấp cho chúng tôi một cách tuyệt vời để thực hiện việc này theo cách đơn giản nhất có thể

p {
  font-size: 20px;
}

a {
  color: blue;
}

73

any element inside

p {
  font-size: 20px;
}

a {
  color: blue;
}

084 will be vertically centered

Center both vertically and horizontally

Flexbox techniques to center vertically and horizontally can be combined to completely center an element in the page

p {
  font-size: 20px;
}

a {
  color: blue;
}

74

The same can be done using CSS Grid.

p {
  font-size: 20px;
}

a {
  color: blue;
}

75

LISTS

Lists are a very important part of many web pages

CSS can style them using several properties

p {
  font-size: 20px;
}

a {
  color: blue;
}

088 is used to set a predefined marker to be used by the list

p {
  font-size: 20px;
}

a {
  color: blue;
}

76

We have lots of possible values, which you can see here https. //developer. mozilla. org/en-US/docs/Web/CSS/list-style-type with examples of their appearance. Some of the most popular ones are

p {
  font-size: 20px;
}

a {
  color: blue;
}

089,

p {
  font-size: 20px;
}

a {
  color: blue;
}

090,

p {
  font-size: 20px;
}

a {
  color: blue;
}

091 and

...

95

p {
  font-size: 20px;
}

a {
  color: blue;
}

093 is used to use a custom marker when a predefined marker is not appropriate

p {
  font-size: 20px;
}

a {
  color: blue;
}

77

p {
  font-size: 20px;
}

a {
  color: blue;
}

094 lets you add the marker

p {
  font-size: 20px;
}

a {
  color: blue;
}

095 (the default) or

p {
  font-size: 20px;
}

a {
  color: blue;
}

096 of the list content, in the flow of the page rather than outside of it

p {
  font-size: 20px;
}

a {
  color: blue;
}

78

The

p {
  font-size: 20px;
}

a {
  color: blue;
}

097 shorthand property lets us specify all those properties in the same line

p {
  font-size: 20px;
}

a {
  color: blue;
}

79

MEDIA QUERIES AND RESPONSIVE DESIGN

In this section we’re going to first introduce media types and media feature descriptors, then we’ll explain media queries

Media types

Used in media queries and @import declarations, media types allow us to determine on which media a CSS file, or a piece of CSS, is loaded

We have the following media types

p {
  font-size: 20px;
}

a {
  color: blue;
}

098 means all the media

p {
  font-size: 20px;
}

a {
  color: blue;
}

099 used when printing

```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
100 used when the page is presented on a screen

p {
  font-size: 20px;
}

a {
  color: blue;
}

101 used for screen readers

p {
  font-size: 20px;
}

a {
  color: blue;
}

100 is the default

In the past we had more of them, but most are deprecated as they proved to be ineffective ways of determining device needs

We can use them in @import statements like this

p {
  font-size: 20px;
}

a {
  color: blue;
}

80

We can load a CSS file on multiple media types separating each with a comma

p {
  font-size: 20px;
}

a {
  color: blue;
}

81

The same works for the

p, a {
  font-size: 20px;
}

40 tag in HTML

p {
  font-size: 20px;
}

a {
  color: blue;
}

82

We’re not limited to just using media types in the

p {
  font-size: 20px;
}

a {
  color: blue;
}

104 attribute and in the

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

01 declaration. There's more

Media feature descriptors

First, let’s introduce media feature descriptors. They are additional keywords that we can add to the

p {
  font-size: 20px;
}

a {
  color: blue;
}

104 attribute of

p, a {
  font-size: 20px;
}

40 or the the

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

01 declaration, to express more conditionals over the loading of the CSS

Here’s the list of them


  Roger


.dog-name {
  color: yellow;
}

03


  Roger


.dog-name {
  color: yellow;
}

04

p {
  font-size: 20px;
}

a {
  color: blue;
}

111

p {
  font-size: 20px;
}

a {
  color: blue;
}

112

p {
  font-size: 20px;
}

a {
  color: blue;
}

113

p {
  font-size: 20px;
}

a {
  color: blue;
}

114

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

33

p {
  font-size: 20px;
}

a {
  color: blue;
}

116

p {
  font-size: 20px;
}

a {
  color: blue;
}

117

p {
  font-size: 20px;
}

a {
  color: blue;
}

118

p {
  font-size: 20px;
}

a {
  color: blue;
}

119

p {
  font-size: 20px;
}

a {
  color: blue;
}

120

```
p {
  color: yellow;
}
```
80

Each of them has a corresponding min- and max-, for example

p {
  font-size: 20px;
}

a {
  color: blue;
}

122,

p {
  font-size: 20px;
}

a {
  color: blue;
}

123

p {
  font-size: 20px;
}

a {
  color: blue;
}

124,

p {
  font-size: 20px;
}

a {
  color: blue;
}

125

and so on

Some of those accept a length value which can be expressed in

01 or

03 or any length value. It's the case of


  Roger


.dog-name {
  color: yellow;
}

03,


  Roger


.dog-name {
  color: yellow;
}

04,

p {
  font-size: 20px;
}

a {
  color: blue;
}

111,

p {
  font-size: 20px;
}

a {
  color: blue;
}

112

For example

p {
  font-size: 20px;
}

a {
  color: blue;
}

83

Notice that we wrap each block using media feature descriptors in parentheses

Some accept a fixed value.

p {
  font-size: 20px;
}

a {
  color: blue;
}

119, used to detect the device orientation, accepts

p {
  font-size: 20px;
}

a {
  color: blue;
}

133 or

p {
  font-size: 20px;
}

a {
  color: blue;
}

134

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

84

p {
  font-size: 20px;
}

a {
  color: blue;
}

120, used to determine the type of screen, accepts

p {
  font-size: 20px;
}

a {
  color: blue;
}

136 (for modern displays) or

p {
  font-size: 20px;
}

a {
  color: blue;
}

137 (for older CRT devices)

Some others want an integer

Like

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

33 which inspects the number of bits per color component used by the device. Very low-level, but you just need to know it's there for your usage (like

p {
  color: yellow;
}

80,

p {
  font-size: 20px;
}

a {
  color: blue;
}

116,

p {
  font-size: 20px;
}

a {
  color: blue;
}

117)

p {
  font-size: 20px;
}

a {
  color: blue;
}

113 and

p {
  font-size: 20px;
}

a {
  color: blue;
}

114 accept a ratio value representing the width to height viewport ratio, which is expressed as a fraction

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

85

p {
  font-size: 20px;
}

a {
  color: blue;
}

118 represents the pixel density of the device, expressed in a resolution data type like

p {
  font-size: 20px;
}

a {
  color: blue;
}

145

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

86

Logic operators

Chúng ta có thể kết hợp các quy tắc bằng cách sử dụng

p {
  font-size: 20px;
}

a {
  color: blue;
}

146

p {
  font-size: 20px;
}

a {
  color: blue;
}

87

We can perform an “or” type of logic operation using commas, which combines multiple media queries

p {
  font-size: 20px;
}

a {
  color: blue;
}

81

We can use

p {
  font-size: 20px;
}

a {
  color: blue;
}

147 to negate a media query

p {
  font-size: 20px;
}

a {
  color: blue;
}

89

Important.
p {
  font-size: 20px;
}

a {
  color: blue;
}
147 can only be used to negate an entire media query, so it must be placed at the beginning of it (or after a comma)

Media queries

All those above rules we saw applied to @import or the the

p, a {
  font-size: 20px;
}

40 HTML tag can be applied inside the CSS, too

You need to wrap them in a

p {
  font-size: 20px;
}

a {
  color: blue;
}

150 structure

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

90

and this is the foundation for responsive design

Media queries can be quite complex. This example applies the CSS only if it’s a screen device, the width is between 600 and 800 pixels, and the orientation is landscape

p {
  font-size: 20px;
}

a {
  color: blue;
}

91

FEATURE QUERIES

Feature queries are a recent and relatively unknown ability of CSS, but a one

Chúng ta có thể sử dụng nó để kiểm tra xem một tính năng có được trình duyệt hỗ trợ hay không bằng cách sử dụng từ khóa

p {
  font-size: 20px;
}

a {
  color: blue;
}

151

I think this is especially useful, at the time of writing, for checking if a browser supports CSS grid, for example, which can be done using

p {
  font-size: 20px;
}

a {
  color: blue;
}

92

We check if the browser supports the

p {
  color: yellow;
}

80 value for the

p {
  color: yellow;
}

70 property

We can use

p {
  font-size: 20px;
}

a {
  color: blue;
}

151 for any CSS property, to check any value

We can also use the logical operators

p {
  font-size: 20px;
}

a {
  color: blue;
}

146,

p {
  font-size: 20px;
}

a {
  color: blue;
}

156 and

p {
  font-size: 20px;
}

a {
  color: blue;
}

147 to build complex feature queries

p {
  font-size: 20px;
}

a {
  color: blue;
}

93

BỘ LỌC

Filters allow us to perform operations on elements

Things you normally do with Photoshop or other photo editing software, like changing the opacity or the brightness, and more

You use the

p {
  font-size: 20px;
}

a {
  color: blue;
}

158 property. Đây là một ví dụ về nó được áp dụng trên một hình ảnh, nhưng thuộc tính này có thể được sử dụng trên bất kỳ phần tử nào

p {
  font-size: 20px;
}

a {
  color: blue;
}

94

You can use various values here

p {
  font-size: 20px;
}

a {
  color: blue;
}

159

p {
  font-size: 20px;
}

a {
  color: blue;
}

160

p {
  font-size: 20px;
}

a {
  color: blue;
}

161

p {
  font-size: 20px;
}

a {
  color: blue;
}

162

p {
  font-size: 20px;
}

a {
  color: blue;
}

163

p {
  font-size: 20px;
}

a {
  color: blue;
}

164

p {
  font-size: 20px;
}

a {
  color: blue;
}

165

p {
  font-size: 20px;
}

a {
  color: blue;
}

166

p {
  font-size: 20px;
}

a {
  color: blue;
}

167

p {
  font-size: 20px;
}

a {
  color: blue;
}

168

35

Notice the parentheses after each option, because they all require a parameter

For example

p {
  font-size: 20px;
}

a {
  color: blue;
}

95

means the image will be 50% transparent, because

p {
  font-size: 20px;
}

a {
  color: blue;
}

166 takes one value from 0 to 1, or a percentage

You can also apply multiple filters at once

p {
  font-size: 20px;
}

a {
  color: blue;
}

96

Let’s now talk about each filter in detail

p {
  font-size: 20px;
}

a {
  color: blue;
}

159

Blurs an element content. You pass it a value, expressed in

01 or

02 or

03 that will be used to determine the blur radius

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

97

p {
  font-size: 20px;
}

a {
  color: blue;
}

166

p {
  font-size: 20px;
}

a {
  color: blue;
}

166 takes one value from 0 to 1, or a percentage, and determines the image transparency based on it

24, or

p {
  font-size: 20px;
}

a {
  color: blue;
}

178, means totally transparent.

p {
  font-size: 20px;
}

a {
  color: blue;
}

179, or

p {
  font-size: 20px;
}

a {
  color: blue;
}

180, or higher, means totally visible

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

95

CSS also has an

p {
  font-size: 20px;
}

a {
  color: blue;
}

181 property.

p {
  font-size: 20px;
}

a {
  color: blue;
}

158 however can be hardware accelerated, depending on the implementation, so this should be the preferred method

p {
  font-size: 20px;
}

a {
  color: blue;
}

162

p {
  font-size: 20px;
}

a {
  color: blue;
}

162 shows a shadow behind the element, which follows the alpha channel. This means that if you have a transparent image, you get a shadow applied to the image shape, not the image box. If the image does not have an alpha channel, the shadow will be applied to the entire image box

It accepts a minimum of 2 parameters, up to 5

offset-x sets the horizontal offset. Can be negative
offset-y sets the vertical offset. Can be negative
blur-radius, optional, sets the blur radius for the shadow. It defaults to 0, no blur
spread-radius, optional, sets the spread radius. Expressed in
01,
03 or
02
color, optional, sets the color of the shadow

You can set the color without setting the spread radius or blur radius. CSS understands the value is a color and not a length value

Example

p {
  font-size: 20px;
}

a {
  color: blue;
}

99

p {
  font-size: 20px;
}

a {
  color: blue;
}

163

Makes the element have a gray color

Bạn chuyển một giá trị từ 0 đến 1 hoặc từ 0% đến 100%, trong đó 1 và 100% có nghĩa là hoàn toàn xám và 0 hoặc 0% có nghĩa là hình ảnh không bị chạm và màu gốc vẫn còn

Example

p, a {
  font-size: 20px;
}

00

p {
  font-size: 20px;
}

a {
  color: blue;
}

167

Makes the element have a sepia color

You pass one value from 0 to 1, or from 0% to 100%, where 1 and 100% mean completely sepia, and 0 or 0% mean the image is not touched, and the original colors remain

Example

p, a {
  font-size: 20px;
}

01

p {
  font-size: 20px;
}

a {
  color: blue;
}

165

Invert the colors of an element. Inverting a color means looking up the opposite of a color in the HSL color wheel. Just search “color wheel” in Google if you have no idea what that means. For example, the opposite of yellow is blue, the opposite of red is cyan. Every single color has an opposite

You pass a number, from 0 to 1 or from 0% to 100%, that determines the amount of inversion. 1 or 100% means full inversion, 0 or 0% means no inversion

0. 5 hoặc 50% sẽ luôn hiển thị màu xám 50% vì bạn luôn kết thúc ở giữa bánh xe

Example

p, a {
  font-size: 20px;
}

02

p {
  font-size: 20px;
}

a {
  color: blue;
}

164

Bánh xe màu HSL được thể hiện bằng độ. Sử dụng

p {
  font-size: 20px;
}

a {
  color: blue;
}

164, bạn có thể xoay màu bằng cách xoay dương hoặc âm

Hàm chấp nhận giá trị

p {
  font-size: 20px;
}

a {
  color: blue;
}

193

Example

p, a {
  font-size: 20px;
}

03

p {
  font-size: 20px;
}

a {
  color: blue;
}

160

Thay đổi độ sáng của một phần tử

0 hoặc 0% cho toàn bộ phần tử màu đen. 1 hoặc 100% cho hình ảnh không thay đổi

Các giá trị cao hơn 1 hoặc 100% làm cho hình ảnh sáng hơn để đạt được toàn bộ thành phần màu trắng

Example

p, a {
  font-size: 20px;
}

04

p { font-size: 20px; } a { color: blue; }161

Thay đổi độ tương phản của một phần tử

0 hoặc 0% cho tổng phần tử màu xám. 1 hoặc 100% cho hình ảnh không thay đổi

Các giá trị cao hơn 1 hoặc 100% cho độ tương phản cao hơn

Example

p, a {
  font-size: 20px;
}

05

p {
  font-size: 20px;
}

a {
  color: blue;
}

168

Thay đổi độ bão hòa của một phần tử

0 or 0% gives a total grayscale element (with less saturation). 1 hoặc 100% cho hình ảnh không thay đổi

Các giá trị cao hơn 1 hoặc 100% cho độ bão hòa cao hơn

Example

p, a {
  font-size: 20px;
}

06

35

Bộ lọc này cho phép áp dụng bộ lọc được xác định trong tệp SVG. Bạn trỏ đến vị trí tệp SVG

Example

p, a {
  font-size: 20px;
}

07

Các bộ lọc SVG nằm ngoài phạm vi của phần này, nhưng bạn có thể đọc thêm về bài đăng trên Tạp chí Smashing này. https. //www. đập phá tạp chí. com/2015/05/why-the-svg-filter-is-awesome/

CHUYỂN ĐỔI

Biến đổi cho phép bạn dịch, xoay, chia tỷ lệ và nghiêng các phần tử trong không gian 2D hoặc 3D. Chúng là một tính năng CSS rất thú vị, đặc biệt là khi kết hợp với hoạt ảnh

biến đổi 2D

The

p {
  font-size: 20px;
}

a {
  color: blue;
}

198 property accepts those functions

```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
199 để di chuyển các phần tử xung quanh

p {
  font-size: 20px;
}

a {
  color: blue;
}

200 để xoay các phần tử

```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
201 để chia tỷ lệ phần tử theo kích thước
```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
202 để xoắn hoặc làm nghiêng một phần tử
```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
203 một cách để thực hiện bất kỳ thao tác nào ở trên bằng cách sử dụng ma trận gồm 6 phần tử, cú pháp ít thân thiện với người dùng hơn nhưng ít dài dòng hơn

Chúng tôi cũng có các chức năng dành riêng cho trục

```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
204 để di chuyển các phần tử xung quanh trục X
```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
205 để di chuyển các phần tử xung quanh trục Y
```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
206 để chia tỷ lệ các phần tử có kích thước trên trục X
```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
207 để chia tỷ lệ các phần tử có kích thước trên trục Y
```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
208 để xoắn hoặc nghiêng một phần tử trên trục X
```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
209 để xoắn hoặc nghiêng một phần tử trên trục Y

Dưới đây là một ví dụ về một phép biến đổi thay đổi chiều rộng phần tử


  Roger


.dog-name {
  color: yellow;
}

30 bằng 2 (nhân đôi nó) và chiều cao bằng 0. 5 (giảm xuống còn một nửa)

p, a {
  font-size: 20px;
}

08

p {
  font-size: 20px;
}

a {
  color: blue;
}

211 lets us set the origin (the

p {
  font-size: 20px;
}

a {
  color: blue;
}

212 coordinates) for the transformation, letting us change the rotation center

Kết hợp nhiều biến đổi

Bạn có thể kết hợp nhiều biến đổi bằng cách tách từng hàm bằng dấu cách

For example

p, a {
  font-size: 20px;
}

09

biến đổi 3D

Chúng ta có thể tiến thêm một bước và di chuyển các phần tử của mình trong không gian 3D thay vì trong không gian 2D. Với 3D, chúng tôi đang thêm một trục khác, Z, giúp tăng thêm chiều sâu cho hình ảnh của chúng tôi

Sử dụng thuộc tính

p {
  font-size: 20px;
}

a {
  color: blue;
}

213, bạn có thể chỉ định đối tượng 3D cách người xem bao xa

Example

p, a {
  font-size: 20px;
}

10

p {
  font-size: 20px;
}

a {
  color: blue;
}

214 xác định sự xuất hiện của vị trí của người xem, chúng ta đang nhìn nó như thế nào theo trục X và Y

Giờ đây, chúng ta có thể sử dụng các chức năng bổ sung để điều khiển trục Z và thêm vào các phép biến đổi trục X và Y khác

p {
  font-size: 20px;
}

a {
  color: blue;
}

215

p {
  font-size: 20px;
}

a {
  color: blue;
}

216

p {
  font-size: 20px;
}

a {
  color: blue;
}

217

và các cách viết tắt tương ứng

p {
  font-size: 20px;
}

a {
  color: blue;
}

218,

p {
  font-size: 20px;
}

a {
  color: blue;
}

219 và

p {
  font-size: 20px;
}

a {
  color: blue;
}

220 làm cách viết tắt để sử dụng các hàm

p {
  font-size: 20px;
}

a {
  color: blue;
}

204,

p {
  font-size: 20px;
}

a {
  color: blue;
}

205 và

p {
  font-size: 20px;
}

a {
  color: blue;
}

215, v.v.

Biến đổi 3D hơi quá nâng cao đối với cuốn sổ tay này, nhưng là một chủ đề tuyệt vời để bạn tự khám phá

TRANSITIONS

CSS Transitions là cách đơn giản nhất để tạo hoạt ảnh trong CSS

Trong quá trình chuyển đổi, bạn thay đổi giá trị của thuộc tính và yêu cầu CSS từ từ thay đổi giá trị đó theo một số tham số, hướng tới trạng thái cuối cùng

Chuyển tiếp CSS được xác định bởi các thuộc tính này

Thuộc tính

p {
  font-size: 20px;
}

a {
  color: blue;
}

224 là một tốc ký tiện dụng

p, a {
  font-size: 20px;
}

11

Ví dụ về Chuyển tiếp CSS

Mã này triển khai Chuyển đổi CSS

p, a {
  font-size: 20px;
}

12

Xem ví dụ trên Glitch https. //flavio-css-transitions-ví dụ. trục trặc. Tôi

Khi di chuột qua các phần tử

p {
  font-size: 20px;
}

a {
  color: blue;
}

225 và

p {
  font-size: 20px;
}

a {
  color: blue;
}

226, các vòng tròn màu tím, sẽ có hoạt ảnh chuyển tiếp giúp dễ dàng thay đổi nền, trong khi các vòng tròn màu vàng thì không, vì chúng không có thuộc tính

p {
  font-size: 20px;
}

a {
  color: blue;
}

224 được xác định

Giá trị chức năng thời gian chuyển tiếp

p {
  font-size: 20px;
}

a {
  color: blue;
}

228 cho phép bạn chỉ định đường cong gia tốc của quá trình chuyển đổi

Có một số giá trị đơn giản bạn có thể sử dụng

p {
  font-size: 20px;
}

a {
  color: blue;
}

229

p {
  font-size: 20px;
}

a {
  color: blue;
}

230

p {
  font-size: 20px;
}

a {
  color: blue;
}

231

p {
  font-size: 20px;
}

a {
  color: blue;
}

232

p {
  font-size: 20px;
}

a {
  color: blue;
}

233

Trục trặc này cho thấy cách chúng hoạt động trong thực tế

Bạn có thể tạo một chức năng thời gian hoàn toàn tùy chỉnh bằng cách sử dụng các đường cong bezier khối. Điều này khá nâng cao, nhưng về cơ bản, bất kỳ chức năng nào ở trên đều được xây dựng bằng các đường cong bezier. Chúng tôi có những cái tên tiện dụng vì chúng là những cái tên phổ biến

Chuyển tiếp CSS trong DevTools của trình duyệt

DevTools của trình duyệt cung cấp một cách tuyệt vời để trực quan hóa quá trình chuyển đổi

Đây là Chrome

Đây là firefox

Từ các bảng đó, bạn có thể trực tiếp chỉnh sửa quá trình chuyển đổi và thử nghiệm trên trang mà không cần tải lại mã của mình

Thuộc tính nào bạn có thể Animate bằng cách sử dụng CSS Animations

Nhiều. Chúng cũng giống như bạn có thể tạo hiệu ứng bằng CSS Transitions

Đây là danh sách đầy đủ

49
```
p, a {
  font-size: 20px;
}
```
94
44
48
```
...
```
75

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

35

```
...
```
74
```
p {
  color: yellow;
}
```
22
```
p {
  color: yellow;
}
```
14
```
p {
  color: yellow;
}
```
27
```
p {
  color: yellow;
}
```
28
```
p {
  color: yellow;
}
```
08
```
p {
  color: yellow;
}
```
23
```
p {
  color: yellow;
}
```
15
```
p {
  color: yellow;
}
```
09
```
...
```
76
```
p {
  color: yellow;
}
```
21
```
p {
  color: yellow;
}
```
13
```
p {
  color: yellow;
}
```
07

p {
  font-size: 20px;
}

a {
  color: blue;
}

253

```
p {
  color: yellow;
}
```
20
```
p {
  color: yellow;
}
```
12
```
p {
  color: yellow;
}
```
25
```
p {
  color: yellow;
}
```
26
```
p {
  color: yellow;
}
```
06
63

p {
  font-size: 20px;
}

a {
  color: blue;
}

260

p {
  font-size: 20px;
}

a {
  color: blue;
}

261

p {
  font-size: 20px;
}

a {
  color: blue;
}

262

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

33

p {
  font-size: 20px;
}

a {
  color: blue;
}

264

p {
  font-size: 20px;
}

a {
  color: blue;
}

265

p {
  font-size: 20px;
}

a {
  color: blue;
}

266

p {
  font-size: 20px;
}

a {
  color: blue;
}

267

p {
  font-size: 20px;
}

a {
  color: blue;
}

268

p {
  font-size: 20px;
}

a {
  color: blue;
}

269

p {
  font-size: 20px;
}

a {
  color: blue;
}

270

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

32

p {
  font-size: 20px;
}

a {
  color: blue;
}

158

```
p {
  color: yellow;
}
```
79

p {
  font-size: 20px;
}

a {
  color: blue;
}

058

p {
  font-size: 20px;
}

a {
  color: blue;
}

056

p {
  font-size: 20px;
}

a {
  color: blue;
}

057

```
p, a {
  font-size: 20px;
}
```
38
```
p, a {
  font-size: 20px;
}
```
33

p {
  font-size: 20px;
}

a {
  color: blue;
}

279

```
...
```
12
```
...
```
11

p {
  font-size: 20px;
}

a {
  color: blue;
}

006

p {
  font-size: 20px;
}

a {
  color: blue;
}

283

p {
  font-size: 20px;
}

a {
  color: blue;
}

284

p {
  font-size: 20px;
}

a {
  color: blue;
}

285


  Roger


.dog-name {
  color: yellow;
}

91


  Roger


.dog-name {
  color: yellow;
}

87


  Roger


.dog-name {
  color: yellow;
}

90


  Roger


.dog-name {
  color: yellow;
}

96


  Roger


.dog-name {
  color: yellow;
}

89


  Roger


.dog-name {
  color: yellow;
}

93


  Roger


.dog-name {
  color: yellow;
}

88


  Roger


.dog-name {
  color: yellow;
}

92


  Roger


.dog-name {
  color: yellow;
}

97

p {
  font-size: 20px;
}

a {
  color: blue;
}

002


  Roger


.dog-name {
  color: yellow;
}

85


  Roger


.dog-name {
  color: yellow;
}

86

p {
  font-size: 20px;
}

a {
  color: blue;
}

298

```
p {
  color: yellow;
}
```
80


  Roger


.dog-name {
  color: yellow;
}

04

59
```
...
```
80
```
...
```
76
```
p {
  color: yellow;
}
```
36
```
p {
  color: yellow;
}
```
52
```
p {
  color: yellow;
}
```
53
```
p {
  color: yellow;
}
```
51
```
p {
  color: yellow;
}
```
50

p {
  font-size: 20px;
}

a {
  color: blue;
}

309

p {
  font-size: 20px;
}

a {
  color: blue;
}

123

p {
  font-size: 20px;
}

a {
  color: blue;
}

311

p {
  font-size: 20px;
}

a {
  color: blue;
}

122

p {
  font-size: 20px;
}

a {
  color: blue;
}

181

p {
  font-size: 20px;
}

a {
  color: blue;
}

054

p {
  font-size: 20px;
}

a {
  color: blue;
}

315

p {
  font-size: 20px;
}

a {
  color: blue;
}

316

p {
  font-size: 20px;
}

a {
  color: blue;
}

317

p {
  font-size: 20px;
}

a {
  color: blue;
}

318

```
p {
  color: yellow;
}
```
35
```
p {
  color: yellow;
}
```
41
```
p {
  color: yellow;
}
```
42
```
p {
  color: yellow;
}
```
40
```
p {
  color: yellow;
}
```
39

p {
  font-size: 20px;
}

a {
  color: blue;
}

213

p {
  font-size: 20px;
}

a {
  color: blue;
}

214

p {
  font-size: 20px;
}

a {
  color: blue;
}

326

60
```
...
```
83
```
...
```
73
```
...
```
08
```
...
```
77
```
...
```
81
62

p {
  font-size: 20px;
}

a {
  color: blue;
}

334

```
...
```
75

p {
  font-size: 20px;
}

a {
  color: blue;
}

336


  Roger


.dog-name {
  color: yellow;
}

03

```
...
```
79


  Roger


.dog-name {
  color: yellow;
}

38

HÌNH ẢNH ĐỘNG

Hoạt ảnh CSS là một cách tuyệt vời để tạo hoạt ảnh trực quan, không giới hạn ở một chuyển động đơn lẻ như Chuyển tiếp CSS, nhưng rõ ràng hơn nhiều

Hoạt ảnh được áp dụng cho một phần tử bằng cách sử dụng thuộc tính

p {
  font-size: 20px;
}

a {
  color: blue;
}

340

p, a {
  font-size: 20px;
}

13

p {
  font-size: 20px;
}

a {
  color: blue;
}

341 là tên của hoạt ảnh mà chúng ta cần xác định riêng. Chúng tôi cũng yêu cầu CSS tạo hoạt ảnh kéo dài 10 giây, thực hiện nó theo cách tuyến tính (không tăng tốc hoặc bất kỳ sự khác biệt nào về tốc độ của nó) và lặp lại nó vô tận

Bạn phải xác định cách hoạt ảnh của mình hoạt động bằng cách sử dụng khung hình chính. Ví dụ về hoạt ảnh xoay một mục

p, a {
  font-size: 20px;
}

14

Bên trong định nghĩa

p {
  font-size: 20px;
}

a {
  color: blue;
}

342, bạn có thể có bao nhiêu điểm tham chiếu trung gian tùy thích

Trong trường hợp này, chúng tôi hướng dẫn CSS tạo thuộc tính biến đổi để xoay trục Z từ 0 đến 360 điểm, hoàn thành toàn bộ vòng lặp

Bạn có thể sử dụng bất kỳ biến đổi CSS nào tại đây

Lưu ý cách điều này không quy định bất cứ điều gì về khoảng thời gian mà hoạt ảnh sẽ diễn ra. Điều này được xác định khi bạn sử dụng nó thông qua

p {
  font-size: 20px;
}

a {
  color: blue;
}

340

Ví dụ về hoạt ảnh CSS

I want to draw four circles, all with a starting point in common, all 90 degrees distant from each other

p, a {
  font-size: 20px;
}

15

Bạn có thể nhìn thấy chúng trong Glitch này. https. //flavio-css-vòng tròn. trục trặc. Tôi

Hãy làm cho cấu trúc này (tất cả các vòng tròn cùng nhau) xoay. Để làm điều này, chúng tôi áp dụng hoạt ảnh trên vùng chứa và chúng tôi xác định hoạt ảnh đó là xoay 360 độ

p, a {
  font-size: 20px;
}

16

Xem nó trên https. //flavio-css-animations-tutorial. trục trặc. tôi

Bạn có thể thêm nhiều khung hình chính để có hoạt ảnh vui nhộn hơn

p, a {
  font-size: 20px;
}

17

Xem ví dụ trên https. //flavio-css-animations-bốn-bước. trục trặc. me

Thuộc tính hoạt hình CSS

Hoạt ảnh CSS cung cấp rất nhiều thông số khác nhau mà bạn có thể điều chỉnh

Thuộc tính

p {
  font-size: 20px;
}

a {
  color: blue;
}

340 là cách viết tắt của tất cả các thuộc tính này, theo thứ tự này

p, a {
  font-size: 20px;
}

18

Đây là ví dụ chúng tôi đã sử dụng ở trên

p, a {
  font-size: 20px;
}

13

Sự kiện JavaScript dành cho Ảnh động CSS

Sử dụng JavaScript, bạn có thể lắng nghe các sự kiện sau

p {
  font-size: 20px;
}

a {
  color: blue;
}

345

p {
  font-size: 20px;
}

a {
  color: blue;
}

346

p {
  font-size: 20px;
}

a {
  color: blue;
}

347

Hãy cẩn thận với

p {
  font-size: 20px;
}

a {
  color: blue;
}

345, vì nếu hoạt ảnh bắt đầu khi tải trang, mã JavaScript của bạn luôn được thực thi sau khi CSS được xử lý, do đó hoạt ảnh đã bắt đầu và bạn không thể chặn sự kiện

p, a {
  font-size: 20px;
}

20

Thuộc tính nào bạn có thể tạo hoạt ảnh bằng CSS Animations

Nhiều. Chúng cũng giống như bạn có thể tạo hiệu ứng bằng CSS Transitions

Đây là danh sách đầy đủ

49
```
p, a {
  font-size: 20px;
}
```
94
44
48
```
...
```
75

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

35

```
...
```
74
```
p {
  color: yellow;
}
```
22
```
p {
  color: yellow;
}
```
14
```
p {
  color: yellow;
}
```
27
```
p {
  color: yellow;
}
```
28
```
p {
  color: yellow;
}
```
08
```
p {
  color: yellow;
}
```
23
```
p {
  color: yellow;
}
```
15
```
p {
  color: yellow;
}
```
09
```
...
```
76
```
p {
  color: yellow;
}
```
21
```
p {
  color: yellow;
}
```
13
```
p {
  color: yellow;
}
```
07

p {
  font-size: 20px;
}

a {
  color: blue;
}

253

```
p {
  color: yellow;
}
```
20
```
p {
  color: yellow;
}
```
12
```
p {
  color: yellow;
}
```
25
```
p {
  color: yellow;
}
```
26
```
p {
  color: yellow;
}
```
06
63

p {
  font-size: 20px;
}

a {
  color: blue;
}

260

p {
  font-size: 20px;
}

a {
  color: blue;
}

261

p {
  font-size: 20px;
}

a {
  color: blue;
}

262

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

33

p {
  font-size: 20px;
}

a {
  color: blue;
}

264

p {
  font-size: 20px;
}

a {
  color: blue;
}

265

p {
  font-size: 20px;
}

a {
  color: blue;
}

266

p {
  font-size: 20px;
}

a {
  color: blue;
}

267

p {
  font-size: 20px;
}

a {
  color: blue;
}

268

p {
  font-size: 20px;
}

a {
  color: blue;
}

269

p {
  font-size: 20px;
}

a {
  color: blue;
}

270

p
      {
  font-size:           20px   ;
                      }
                      
a{color:blue;}

32

p {
  font-size: 20px;
}

a {
  color: blue;
}

158

```
p {
  color: yellow;
}
```
79

p {
  font-size: 20px;
}

a {
  color: blue;
}

058

p {
  font-size: 20px;
}

a {
  color: blue;
}

056

p {
  font-size: 20px;
}

a {
  color: blue;
}

057

```
p, a {
  font-size: 20px;
}
```
38
```
p, a {
  font-size: 20px;
}
```
33

p {
  font-size: 20px;
}

a {
  color: blue;
}

279

```
...
```
12
```
...
```
11

p {
  font-size: 20px;
}

a {
  color: blue;
}

006

p {
  font-size: 20px;
}

a {
  color: blue;
}

283

p {
  font-size: 20px;
}

a {
  color: blue;
}

284

p {
  font-size: 20px;
}

a {
  color: blue;
}

285


  Roger


.dog-name {
  color: yellow;
}

91


  Roger


.dog-name {
  color: yellow;
}

87


  Roger


.dog-name {
  color: yellow;
}

90


  Roger


.dog-name {
  color: yellow;
}

96


  Roger


.dog-name {
  color: yellow;
}

89


  Roger


.dog-name {
  color: yellow;
}

93


  Roger


.dog-name {
  color: yellow;
}

88


  Roger


.dog-name {
  color: yellow;
}

92


  Roger


.dog-name {
  color: yellow;
}

97

p {
  font-size: 20px;
}

a {
  color: blue;
}

002


  Roger


.dog-name {
  color: yellow;
}

85


  Roger


.dog-name {
  color: yellow;
}

86

p {
  font-size: 20px;
}

a {
  color: blue;
}

298

```
p {
  color: yellow;
}
```
80


  Roger


.dog-name {
  color: yellow;
}

04

59
```
...
```
80
```
...
```
76
```
p {
  color: yellow;
}
```
36
```
p {
  color: yellow;
}
```
52
```
p {
  color: yellow;
}
```
53
```
p {
  color: yellow;
}
```
51
```
p {
  color: yellow;
}
```
50

p {
  font-size: 20px;
}

a {
  color: blue;
}

309

p {
  font-size: 20px;
}

a {
  color: blue;
}

123

p {
  font-size: 20px;
}

a {
  color: blue;
}

311

p {
  font-size: 20px;
}

a {
  color: blue;
}

122

p {
  font-size: 20px;
}

a {
  color: blue;
}

181

p {
  font-size: 20px;
}

a {
  color: blue;
}

054

p {
  font-size: 20px;
}

a {
  color: blue;
}

315

p {
  font-size: 20px;
}

a {
  color: blue;
}

316

p {
  font-size: 20px;
}

a {
  color: blue;
}

317

p {
  font-size: 20px;
}

a {
  color: blue;
}

318

```
p {
  color: yellow;
}
```
35
```
p {
  color: yellow;
}
```
41
```
p {
  color: yellow;
}
```
42
```
p {
  color: yellow;
}
```
40
```
p {
  color: yellow;
}
```
39

p {
  font-size: 20px;
}

a {
  color: blue;
}

213

p {
  font-size: 20px;
}

a {
  color: blue;
}

214

p {
  font-size: 20px;
}

a {
  color: blue;
}

326

60
```
...
```
83
```
...
```
73
```
...
```
08
```
...
```
77
```
...
```
81
62

p {
  font-size: 20px;
}

a {
  color: blue;
}

334

```
...
```
75

p {
  font-size: 20px;
}

a {
  color: blue;
}

336


  Roger


.dog-name {
  color: yellow;
}

03

```
...
```
79


  Roger


.dog-name {
  color: yellow;
}

38

BÌNH THƯỜNG HÓA CSS

Biểu định kiểu trình duyệt mặc định là tập hợp các quy tắc mà trình duyệt phải áp dụng để cung cấp một số kiểu tối thiểu cho các phần tử

Hầu hết thời gian những phong cách đó rất hữu ích

Vì mọi trình duyệt đều có bộ riêng nên việc tìm điểm chung là điều bình thường

Thay vì loại bỏ tất cả các giá trị mặc định, giống như một trong các phương pháp đặt lại CSS, quy trình chuẩn hóa sẽ loại bỏ các điểm không nhất quán của trình duyệt, trong khi vẫn giữ một bộ quy tắc cơ bản mà bạn có thể dựa vào

bình thường hóa. css http. //necolas. github. io/bình thường hóa. css là giải pháp được sử dụng phổ biến nhất cho vấn đề này

Bạn phải tải tệp CSS chuẩn hóa trước bất kỳ CSS nào khác

ERROR HANDLING

CSS is resilient. When it finds an error, it does not act like JavaScript which packs up all its things and goes away altogether, terminating all the script executions after the error is found

CSS tries very hard to do what you want

Nếu một dòng có lỗi, nó sẽ bỏ qua nó và chuyển sang dòng tiếp theo mà không có bất kỳ lỗi nào

If you forget the semicolon on one line

p, a {
  font-size: 20px;
}

21

the line with the error AND the next one will not be applied, but the third rule will be successfully applied on the page. Basically, it scans all until it finds a semicolon, but when it reaches it, the rule is now

p {
  font-size: 20px;
}

a {
  color: blue;
}

455, which is invalid, so it skips it

Đôi khi thật khó để nhận ra có lỗi ở đâu đó và lỗi đó ở đâu vì trình duyệt sẽ không cho chúng tôi biết

This is why tools like CSS Lint exist

TIỀN TỆ NGƯỜI BÁN HÀNG

Tiền tố nhà cung cấp là một cách trình duyệt sử dụng để cấp cho nhà phát triển CSS quyền truy cập vào các tính năng mới hơn chưa được coi là ổn định

Trước khi tiếp tục, hãy nhớ rằng phương pháp này đang giảm phổ biến. People now favour using experimental flags, which must be enabled explicitly in the user’s browser

Why? Because developers, instead of considering vendor prefixes as a way to preview features, sometimes ship them in production — something considered harmful by the CSS Working Group

Mostly because once you add a flag and developers start using it in production, browsers are in a bad position if they realise something must change. Với các cờ, bạn không thể gửi một tính năng trừ khi bạn có thể thúc đẩy tất cả khách truy cập của mình bật cờ đó trong trình duyệt của họ (đùa thôi, đừng thử)

That said, let’s see what vendor prefixes are

Tôi đặc biệt nhớ họ đã từng làm việc với CSS Transitions trong quá khứ. Thay vì chỉ sử dụng tài sản

p {
  font-size: 20px;
}

a {
  color: blue;
}

224, bạn phải làm điều này

p, a {
  font-size: 20px;
}

22

Bây giờ bạn chỉ cần sử dụng

p, a {
  font-size: 20px;
}

23

vì thuộc tính hiện được hỗ trợ tốt bởi tất cả các trình duyệt hiện đại

Các tiền tố được sử dụng là

```
p {
  font-size: 20px;
}

a {
  color: blue;
}
```
457 (Chrome, Safari, iOS Safari / iOS WebView, Android)

p {
  font-size: 20px;
}

a {
  color: blue;
}

458 (Safari)

p {
  font-size: 20px;
}

a {
  color: blue;
}

459 (Edge, Internet Explorer)

p {
  font-size: 20px;
}

a {
  color: blue;
}

460 (Opera, Opera Mini)

Vì Opera dựa trên Chromium và Edge cũng sẽ sớm như vậy, nên

p {
  font-size: 20px;
}

a {
  color: blue;
}

460 và

p {
  font-size: 20px;
}

a {
  color: blue;
}

459 có thể sẽ sớm lỗi thời. But as we said, vendor prefixes as a whole are going out of fashion, too

Viết tiền tố rất khó, chủ yếu là do không chắc chắn. Bạn có thực sự cần tiền tố cho một thuộc tính không? . Các dự án như Autoprefixer có thể tự động hóa toàn bộ quy trình mà chúng tôi không cần tìm hiểu xem có cần tiền tố nữa hay tính năng hiện đã ổn định và tiền tố sẽ bị loại bỏ. Nó sử dụng dữ liệu từ caniuse. com, một trang web tham khảo rất tốt cho tất cả những thứ liên quan đến hỗ trợ trình duyệt

Nếu bạn sử dụng React hoặc Vue, các dự án như

p {
  font-size: 20px;
}

a {
  color: blue;
}

463 và Vue CLI, hai cách phổ biến để bắt đầu xây dựng một ứng dụng, hãy sử dụng

p {
  font-size: 20px;
}

a {
  color: blue;
}

464 ngay lập tức, vì vậy bạn thậm chí không phải lo lắng về điều đó

CSS CHO IN

Mặc dù chúng ta ngày càng nhìn chằm chằm vào màn hình của mình, nhưng việc in ấn vẫn là một vấn đề

Ngay cả với các bài đăng trên blog. Tôi nhớ một lần vào năm 2009, tôi đã gặp một người nói với tôi rằng anh ấy đã yêu cầu trợ lý riêng của anh ấy in mọi bài đăng trên blog mà tôi đã xuất bản (vâng, tôi đã nhìn ngây người một chút). chắc chắn là bất ngờ

My main use case for looking into printing usually is printing to a PDF. I might create something inside the browser, and I want to make it available as PDF

Browsers make this very easy, with Chrome defaulting to “Save” when trying to print a document and a printer is not available, and Safari has a dedicated button in the menu bar

In CSS

Một số điều phổ biến bạn có thể muốn làm khi in là ẩn một số phần của tài liệu, có thể là chân trang, phần nào đó trong tiêu đề, thanh bên

Có thể bạn muốn sử dụng một phông chữ khác để in, điều này hoàn toàn hợp pháp

Nếu bạn có CSS lớn để in, tốt hơn bạn nên sử dụng một tệp riêng cho nó. Browsers will only download it when printing

p, a {
  font-size: 20px;
}

24

CSS @media in

Một thay thế cho cách tiếp cận trước đó là truy vấn phương tiện. Bất cứ thứ gì bạn thêm vào bên trong khối này

p, a {
  font-size: 20px;
}

25

sẽ chỉ được áp dụng cho các tài liệu in

liên kết

HTML là tuyệt vời vì các liên kết. Nó được gọi là Siêu văn bản vì một lý do chính đáng. Khi in chúng ta có thể bị mất nhiều thông tin, tùy thuộc vào nội dung

CSS cung cấp một cách tuyệt vời để giải quyết vấn đề này bằng cách chỉnh sửa nội dung, nối thêm liên kết sau văn bản thẻ

p {
  font-size: 20px;
}

a {
  color: blue;
}

465;a>, sử dụng

p, a {
  font-size: 20px;
}

26

Tôi nhắm mục tiêu

p {
  font-size: 20px;
}

a {
  color: blue;
}

466 chỉ làm điều này cho các liên kết bên ngoài. I might have internal links for navigation and internal indexing purposes, which would be useless in most of my use cases. Nếu bạn cũng muốn in các liên kết nội bộ, chỉ cần làm

p, a {
  font-size: 20px;
}

27

Lề trang

Bạn có thể thêm lề cho mỗi trang.

04 or

07 is a good unit for paper printing

p, a {
  font-size: 20px;
}

28

p {
  font-size: 20px;
}

a {
  color: blue;
}

469 cũng có thể được sử dụng để chỉ nhắm mục tiêu trang đầu tiên, sử dụng

p {
  font-size: 20px;
}

a {
  color: blue;
}

470 hoặc chỉ các trang bên trái và bên phải bằng cách sử dụng

p {
  font-size: 20px;
}

a {
  color: blue;
}

471 và

p {
  font-size: 20px;
}

a {
  color: blue;
}

472

ngắt trang

Bạn có thể muốn thêm dấu ngắt trang sau một số thành phần hoặc trước chúng. Sử dụng

p {
  font-size: 20px;
}

a {
  color: blue;
}

473 và

p {
  font-size: 20px;
}

a {
  color: blue;
}

474

p, a {
  font-size: 20px;
}

29

Những thuộc tính đó chấp nhận nhiều giá trị khác nhau

Tránh làm vỡ ảnh ở giữa

Tôi đã trải nghiệm điều này với Firefox. hình ảnh theo mặc định được cắt ở giữa và tiếp tục trên trang tiếp theo. Nó cũng có thể xảy ra với văn bản

Sử dụng

p, a {
  font-size: 20px;
}

30

và bọc hình ảnh của bạn trong thẻ

p, a {
  font-size: 20px;
}

31. Targeting

p, a {
  font-size: 20px;
}

57 directly didn't work in my tests

Điều này cũng áp dụng cho các nội dung khác, không chỉ hình ảnh. Nếu bạn nhận thấy thứ gì đó bị cắt khi bạn không muốn, hãy sử dụng thuộc tính này

Gỡ lỗi bản trình bày in

Chrome DevTools cung cấp các cách để mô phỏng bố cục in

Khi bảng điều khiển mở ra, hãy thay đổi mô phỏng hiển thị thành

p {
  font-size: 20px;
}

a {
  color: blue;
}

099

TÓM TẮT

Tôi hy vọng bài viết này đã giúp bạn bắt kịp tốc độ với CSS và có cái nhìn tổng quan về các tính năng chính mà bạn có thể sử dụng để tạo kiểu cho các trang và ứng dụng của mình. Tôi đã viết nó để giúp bạn cảm thấy thoải mái với CSS và giúp bạn nhanh chóng bắt kịp tốc độ sử dụng công cụ tuyệt vời này cho phép bạn tạo các thiết kế tuyệt đẹp trên Web và tôi hy vọng mình đã đạt được mục tiêu này

Click here to get a PDF / ePub / Mobi version of this post to read offline

Flavio

QUẢNG CÁO

Flavio đối phó

CSS viết tắt của PDF là gì?

CSS stands for Cascading Style Sheets Styles define how to display HTML elements. Trang 1.

Làm cách nào để sử dụng CSS trong HTML PDF?

CSS can be added to HTML documents in 3 ways. .

Nội tuyến - bằng cách sử dụng thuộc tính kiểu bên trong các phần tử HTML

Internal - by using a

Sổ tay CSS pdf

Mẹo để nâng cao kỹ năng CSS của bạn

Table of Contents

INTRODUCTION TO CSS

CSS trông như thế nào

dấu chấm phẩy

Formatting and indentation

LỊCH SỬ SƠ LƯỢC VỀ CSS

ADDING CSS TO AN HTML PAGE

1. Using the p, a { font-size: 20px; }40 tag

2. using the p, a { font-size: 20px; }48 tag

3. inline styles

SELECTORS

Basic selectors

Combining selectors

Targeting an element with a class or id

Targeting multiple classes

Combining classes and ids

Grouping selectors

Follow the document tree with selectors

CASCADE

SPECIFICITY

How to calculate specificity

Slot 1

Slot 2

Slot 3

Slot 4

Importance

Tips

Tools to calculate the specificity

DI SẢN

Properties that inherit

Forcing properties to inherit

Forcing properties to NOT inherit

Other special values

IMPORT

ATTRIBUTE SELECTORS

Attribute presence selectors

Exact attribute value selectors

Match an attribute value portion

PSEUDO-CLASSES

PSEUDO-ELEMENTS

Pseudo-elements are used to style a specific part of an element

COLORS

Named colors

RGB and RGBa

Hexadecimal notation

HSL and HSLa

UNITS

Pixels

Percentages

Real-world measurement units

Relative units

Viewport units

Fraction units

URL

CALC

TẦNG LỚP

COMMENTS

CUSTOM PROPERTIES

The basics of using variables

Create variables inside any element

Variables scope

Tương tác với giá trị Biến CSS bằng JavaScript

Xử lý các giá trị không hợp lệ

hỗ trợ trình duyệt

Biến CSS phân biệt chữ hoa chữ thường

Toán học trong các biến CSS

Truy vấn phương tiện với Biến CSS

Đặt giá trị dự phòng cho var()

FONTS

p, a { font-size: 20px; }92

...11

...12

...13

p, a { font-size: 20px; }33

...49

p, a { font-size: 20px; }38

Đang tải phông chữ tùy chỉnh bằng cách sử dụng ...17

Một lưu ý về hiệu suất

1. Using the
`p, a { font-size: 20px; }`
40 tag

2. using the
`p, a { font-size: 20px; }`
48 tag

`p, a { font-size: 20px; }`
92

`...`
11

`...`
12

`...`
13

`p, a { font-size: 20px; }`
33

`...`
49

`p, a { font-size: 20px; }`
38

Đang tải phông chữ tùy chỉnh bằng cách sử dụng
`...`
17

`...`
72

`...`
73

`...`
74

`...`
75

`...`
76

`...`
77

`...`
78

`...`
79

`...`
80

`...`
81

`...`
82

`...`
83

`...`
84

`...`
85

`...`
86

`...`
87

`...`
89

`...`
90

Sử dụng tốc ký
`p { color: yellow; }`
35

Using the
`p { color: yellow; }`
36 shorthand

Using
77 to center elements

`p { color: yellow; }`
72

`p { color: yellow; }`
82

`p { color: yellow; }`
71

`...`
95