New big css book
Hi, Habrozhiteli! We have a new updated book by David McFarland:
CSS3 technology allows you to create professionally designed sites, but the subtleties of this language can be quite complex, even for experienced web developers. Completely revised the fourth edition of this book will help you take your skills in working with HTML and CSS to a new level; it contains many valuable tips, descriptions of techniques, as well as instructions written in the style of a reference manual. Web designers, both beginners and experienced, with the help of this book will quickly learn how to create beautiful web pages that are lightning fast and loaded on both PCs and mobile devices.
This book assumes that you are already familiar with the HTML language. It is understood that you have created a couple of sites (or at least a few web pages) and are familiar with the basic elements, such as html, p, h1, table, which form the basis of the hypertext markup language of documents. CSS is useless without HTML, so you need to know how to create a simple web page using basic HTML elements.
')
If you have previously created web pages in HTML, but you feel that knowledge needs to be refreshed, the next section of the book will help you.
In the HTML hypertext markup language, simple commands, called tags, are used to define different parts - fragments. Below is the HTML code of a simple web page:
Of course, the example is very simple, but it demonstrates all the basic elements that a regular web page needs. In it, you will notice what is called a document type declaration - doctype, followed by an opening tag (with brackets), then the head element (head, heading section), followed by body (body, body section), and the contents of the web itself pages. All this ends with a closing tag. The opening and closing tags form an HTML element.
All web pages start with a document type declaration - a line of code defining the HTML type that you used when writing the page. For many years, two types of documents have been used - HTML 4.01 and XHTML 1.0, and each of them has two styles: strict and transitional. For example, a declaration of a transitional HTML 4.01 document type is as follows (other document type declarations for HTML 4.01 and XHTML 1.0 look about the same):
If you look at the sample code for the HTML page shown in this section, you will see that it uses the short form of the document type declaration:
Document type declaration appeared in HTML5 language. Compared to its predecessors, HTML5 has simplicity and rationality of use. This book uses the HTML5 document type declaration, supported by any popular browser (even the old Internet Explorer 6). There is no point in using ads other than the simple HTML5 doctype.
Regardless of the preferred type of document declared by the doctype, it is important that at least one of them is advertised. Without this, your pages will look different depending on your visitor’s browser, since browsers that do not have document type declarations as a guide display information formatted using CSS differently.
Each document type declaration requires you to write HTML code in a specific way. For example, the element for splitting lines in HTML 4.01 is as follows:
But in XHTML this element has the following form:
And here is another advantage of HTML5: it allows the use of any of these options.
HTML elements consist of tags. In the example above, as in the HTML code of any web page, most of the elements use pairs of tags, starting and ending with some fragment - a block of text or other commands. Being enclosed in brackets, these tags are commands that tell the browser how to display a web page. Tags are the markup part of the Hypertext Markup Language.
The opening tag of each element shows the browser where the command begins, and the ending - where it ends. The closing tag is always preceded by a forward slash (/) after the first character of the bracket (<).
On any web page, there are usually at least the following four HTML elements.
- The very first line of the example contains the document type declaration - the doctype element, discussed in the previous section.
- The tag is required at the beginning of the web page and (with a slash added) at the end:. The html element tells the browser that the document is an HTML code. The entire content of the page, including the remaining elements, is between the opening and closing tags of the html element.
If we represent a web page as a tree, then the html element will be its trunk. The two main parts of any web page — the title section and the body — are branches.
- The header section of a web page (head) contains its title. It may also contain other information that is not displayed when browsing a web page, such as a description of a page that is intended for browsers and search engines. The heading section is the opening and closing tags of the head element.
In addition, the header section may contain information used by the browser to design the HTML that is available on the page and to make the page more interactive. You will see that the header section may contain CSS code (such as the one you will learn to create) or a link to another file containing the style sheet.
- The body of the web page, immediately following the title section and enclosed in the tags of the body element, contains everything that should appear in the browser window: titles, text, images, etc.
Inside the body of the page, as a rule, you can find the following elements:
the p element is the opening tag
element strong - selects the text as important; for example, code
element a, or an element of the binding, creates a hyperlink, when clicked, you can move to another position of the web page or to another page (you need to point the browser to this link by placing it inside the opening tag
The browser knows that when you click on the link with the words Click here! The visitor of your page should go to the site with the address www.piter.com . The part of the a tag - the word href - is called an attribute, and the URL (uniform resource locator, or URL) is its value. In this example
HTML5, the current version of HTML, has been around for several years. Sometimes you will hear names that are not related to HTML elements, such as local storage (a way to store data from a website on a visitor’s computer), geolocation (a way to determine the coordinates of a visitor’s computer), and drawing on a web page using WebGL. Strictly speaking, these technologies are not part of HTML, but they relate to the new features of the browser that appeared along with HTML5.
In this book, the term HTML5 always refers to the HTML5 document type, as well as to new elements that are part of the new HTML5 standard. HTML5 does not bear any fundamental differences from its predecessors - its goal is to ensure that the World Wide Web continues to work as before, supporting the new needs of designers. HTML5 has added new elements. For example, a header element may include content that is commonly found at the top of a page — a logo and navigation links that are common to the entire site. The new nav element contains a set of links used to navigate the site, and the footer element contains everything that is usually placed at the bottom of the page, such as legal information, email contacts, etc.
In addition, HTML5 has added new elements to embed video and audio content on the page, as well as new form elements that add such complex components as sliders, pop-up date selection panels, and built-in browser support for validating the data entered into the form ( which guarantees the correct filling of your forms by visitors). Throughout the book, especially in the next chapter, you will find examples of using the HTML5 language.
This book is written to help readers of any level. To get the most out of the material, you should definitely learn from the HTML and CSS examples provided. If you have never created a web page before, then refer to the workshop at the end of chapter 2. The material contained in these chapters is written for those who have already mastered a little in this area and have an average level of knowledge. If you do not know well the principles of creating web pages, then in order to better understand the topic covered, you should familiarize yourself with the text of the “In the course of business!” Frame. On the other hand, if you have a lot of experience creating web pages, pay attention to the "For advanced users" sidebar. They contain hints, tricks and techniques for experienced programmers.
The main sections of the book. The book is divided into five parts. The first four parts contain several chapters, and the last part consists of applications.
Part I. The Basics of CSS . It describes how to create cascading style sheets in general and gives a brief overview of key concepts such as inheritance, selectors, and cascading style sheets. Along the way, learning CSS will give you basic HTML writing skills. The workshops will consolidate the basic concepts introduced in the chapters and allow you to feel the effectiveness of using CSS.
Part II. Apply CSS . Take you to the real world of web design. You will learn the most important CSS properties and their use for text formatting, practice creating useful navigation tools and be able to enhance the look and feel of your experimental web pages by adding graphics. You will also learn how to create simple animations using CSS. This part also contains recommendations on how to create beautiful tables and forms.
Part III. Layout pages using CSS . It will help you deal with the most confusing, but very useful CSS function: with managing the placement of elements on your page. You will get acquainted with the design schemes (placing the content in two and three columns) and learn how to add side panels. It will be told about two main methods of positioning elements on the page:
absolute and relative. You will also learn how to create websites that are adaptable for better perception in browsers of desktop systems, tablet computers and mobile devices, and to use flexbox, a new powerful tool for creating web page layouts.
Part IV. Professional CSS layouts. Includes tips from professionals on how to improve your cascading style sheets, as well as talk about Sass, a powerful and efficient way of creating style sheets.
Part V. Appendices, including two reference books . The CSS Property Reference describes each property individually in a simple and accessible form so that you can quickly learn about the useful CSS properties that you might not have come across before, or quickly refresh the familiar properties in memory. The second appendix describes the tools and tools for creating and applying cascading style sheets.
David McFarland is a web developer, teacher, and author. He has been creating websites since 1995: it was then that he developed his first project - an online magazine for communication professionals.
David taught web design at the Berkeley Graduate School of Journalism, Electronic Art Center, and Portland State University. He is currently the head teacher on the Treehouse online education site.
Nan Barber (Nan Barber) is the editor of the series of books The Missing Manuals ("A Comprehensive Guide"). He lives in Massachusetts with her husband. Her email address is nanbarber@oreilly.com.
Melanie Yarbrough is a literary editor and composer. Lives and works in Cambridge, Massachusetts. He enjoys baking and loves to go cycling around the city. Her email address is myarbrough@oreilly.com.
Molly Ives Brower is a freelance editor and proofreader. He loves the Internet since in 1990 she received the address BITNET. Nowadays it can be found on the website mjibrower.com or on the social network Twitter, where it is known by the nickname @vintagereader. Her email address is molly@mjibrower.com.
Ron Strauss - compiler of the alphabetical index. Specializes in compiling indexes for various information technology books. Ron is also a talented violinist. He lives in Northern California with his wife and part-time colleague Annie and the Minke Pinscher Kenga. Email address: rstrauss@mchsi.com.
Rich Koster - beta reader. I bought my first Mac (17-inch MacBook Pro) in 2009 and never switched to the side of Windows users. In the third edition of the book “iPhone. A comprehensive guide. ”Rich acted as technical editor. He is married, brings up children and in his free time supports the personally created Disney Echo site.
More information about the book can be found on the publisher's website.
Table of contents
Excerpt
For Habrozhiteley 25% coupon discount - CSS
CSS3 technology allows you to create professionally designed sites, but the subtleties of this language can be quite complex, even for experienced web developers. Completely revised the fourth edition of this book will help you take your skills in working with HTML and CSS to a new level; it contains many valuable tips, descriptions of techniques, as well as instructions written in the style of a reference manual. Web designers, both beginners and experienced, with the help of this book will quickly learn how to create beautiful web pages that are lightning fast and loaded on both PCs and mobile devices.What you need to know
This book assumes that you are already familiar with the HTML language. It is understood that you have created a couple of sites (or at least a few web pages) and are familiar with the basic elements, such as html, p, h1, table, which form the basis of the hypertext markup language of documents. CSS is useless without HTML, so you need to know how to create a simple web page using basic HTML elements.
')
If you have previously created web pages in HTML, but you feel that knowledge needs to be refreshed, the next section of the book will help you.
HTML: language structure
In the HTML hypertext markup language, simple commands, called tags, are used to define different parts - fragments. Below is the HTML code of a simple web page:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> -</title> </head> <body> <p> -</p> </body> </html> Of course, the example is very simple, but it demonstrates all the basic elements that a regular web page needs. In it, you will notice what is called a document type declaration - doctype, followed by an opening tag (with brackets), then the head element (head, heading section), followed by body (body, body section), and the contents of the web itself pages. All this ends with a closing tag. The opening and closing tags form an HTML element.
Types of documents
All web pages start with a document type declaration - a line of code defining the HTML type that you used when writing the page. For many years, two types of documents have been used - HTML 4.01 and XHTML 1.0, and each of them has two styles: strict and transitional. For example, a declaration of a transitional HTML 4.01 document type is as follows (other document type declarations for HTML 4.01 and XHTML 1.0 look about the same):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!doctype html> If you look at the sample code for the HTML page shown in this section, you will see that it uses the short form of the document type declaration:
<!doctype html> Document type declaration appeared in HTML5 language. Compared to its predecessors, HTML5 has simplicity and rationality of use. This book uses the HTML5 document type declaration, supported by any popular browser (even the old Internet Explorer 6). There is no point in using ads other than the simple HTML5 doctype.
Regardless of the preferred type of document declared by the doctype, it is important that at least one of them is advertised. Without this, your pages will look different depending on your visitor’s browser, since browsers that do not have document type declarations as a guide display information formatted using CSS differently.
Each document type declaration requires you to write HTML code in a specific way. For example, the element for splitting lines in HTML 4.01 is as follows:
<br> But in XHTML this element has the following form:
<br /> And here is another advantage of HTML5: it allows the use of any of these options.
How HTML elements work
HTML elements consist of tags. In the example above, as in the HTML code of any web page, most of the elements use pairs of tags, starting and ending with some fragment - a block of text or other commands. Being enclosed in brackets, these tags are commands that tell the browser how to display a web page. Tags are the markup part of the Hypertext Markup Language.
The opening tag of each element shows the browser where the command begins, and the ending - where it ends. The closing tag is always preceded by a forward slash (/) after the first character of the bracket (<).
On any web page, there are usually at least the following four HTML elements.
- The very first line of the example contains the document type declaration - the doctype element, discussed in the previous section.
- The tag is required at the beginning of the web page and (with a slash added) at the end:. The html element tells the browser that the document is an HTML code. The entire content of the page, including the remaining elements, is between the opening and closing tags of the html element.
If we represent a web page as a tree, then the html element will be its trunk. The two main parts of any web page — the title section and the body — are branches.
- The header section of a web page (head) contains its title. It may also contain other information that is not displayed when browsing a web page, such as a description of a page that is intended for browsers and search engines. The heading section is the opening and closing tags of the head element.
In addition, the header section may contain information used by the browser to design the HTML that is available on the page and to make the page more interactive. You will see that the header section may contain CSS code (such as the one you will learn to create) or a link to another file containing the style sheet.
- The body of the web page, immediately following the title section and enclosed in the tags of the body element, contains everything that should appear in the browser window: titles, text, images, etc.
Inside the body of the page, as a rule, you can find the following elements:
the p element is the opening tag
starts the paragraph, and the closing
completes;element strong - selects the text as important; for example, code
<strong>!</strong> will tell the browser that the word "Attention!" should be highlighted;element a, or an element of the binding, creates a hyperlink, when clicked, you can move to another position of the web page or to another page (you need to point the browser to this link by placing it inside the opening tag
<a>, <a href="http://www.piter.com/"> !</a>) The browser knows that when you click on the link with the words Click here! The visitor of your page should go to the site with the address www.piter.com . The part of the a tag - the word href - is called an attribute, and the URL (uniform resource locator, or URL) is its value. In this example
http://www.piter.com — href. HTML5: more elements
HTML5, the current version of HTML, has been around for several years. Sometimes you will hear names that are not related to HTML elements, such as local storage (a way to store data from a website on a visitor’s computer), geolocation (a way to determine the coordinates of a visitor’s computer), and drawing on a web page using WebGL. Strictly speaking, these technologies are not part of HTML, but they relate to the new features of the browser that appeared along with HTML5.
In this book, the term HTML5 always refers to the HTML5 document type, as well as to new elements that are part of the new HTML5 standard. HTML5 does not bear any fundamental differences from its predecessors - its goal is to ensure that the World Wide Web continues to work as before, supporting the new needs of designers. HTML5 has added new elements. For example, a header element may include content that is commonly found at the top of a page — a logo and navigation links that are common to the entire site. The new nav element contains a set of links used to navigate the site, and the footer element contains everything that is usually placed at the bottom of the page, such as legal information, email contacts, etc.
In addition, HTML5 has added new elements to embed video and audio content on the page, as well as new form elements that add such complex components as sliders, pop-up date selection panels, and built-in browser support for validating the data entered into the form ( which guarantees the correct filling of your forms by visitors). Throughout the book, especially in the next chapter, you will find examples of using the HTML5 language.
About this book
This book is written to help readers of any level. To get the most out of the material, you should definitely learn from the HTML and CSS examples provided. If you have never created a web page before, then refer to the workshop at the end of chapter 2. The material contained in these chapters is written for those who have already mastered a little in this area and have an average level of knowledge. If you do not know well the principles of creating web pages, then in order to better understand the topic covered, you should familiarize yourself with the text of the “In the course of business!” Frame. On the other hand, if you have a lot of experience creating web pages, pay attention to the "For advanced users" sidebar. They contain hints, tricks and techniques for experienced programmers.
The main sections of the book. The book is divided into five parts. The first four parts contain several chapters, and the last part consists of applications.
Part I. The Basics of CSS . It describes how to create cascading style sheets in general and gives a brief overview of key concepts such as inheritance, selectors, and cascading style sheets. Along the way, learning CSS will give you basic HTML writing skills. The workshops will consolidate the basic concepts introduced in the chapters and allow you to feel the effectiveness of using CSS.
Part II. Apply CSS . Take you to the real world of web design. You will learn the most important CSS properties and their use for text formatting, practice creating useful navigation tools and be able to enhance the look and feel of your experimental web pages by adding graphics. You will also learn how to create simple animations using CSS. This part also contains recommendations on how to create beautiful tables and forms.
Part III. Layout pages using CSS . It will help you deal with the most confusing, but very useful CSS function: with managing the placement of elements on your page. You will get acquainted with the design schemes (placing the content in two and three columns) and learn how to add side panels. It will be told about two main methods of positioning elements on the page:
absolute and relative. You will also learn how to create websites that are adaptable for better perception in browsers of desktop systems, tablet computers and mobile devices, and to use flexbox, a new powerful tool for creating web page layouts.
Part IV. Professional CSS layouts. Includes tips from professionals on how to improve your cascading style sheets, as well as talk about Sass, a powerful and efficient way of creating style sheets.
Part V. Appendices, including two reference books . The CSS Property Reference describes each property individually in a simple and accessible form so that you can quickly learn about the useful CSS properties that you might not have come across before, or quickly refresh the familiar properties in memory. The second appendix describes the tools and tools for creating and applying cascading style sheets.
about the author
David McFarland is a web developer, teacher, and author. He has been creating websites since 1995: it was then that he developed his first project - an online magazine for communication professionals.
David taught web design at the Berkeley Graduate School of Journalism, Electronic Art Center, and Portland State University. He is currently the head teacher on the Treehouse online education site.
About the creative team
Nan Barber (Nan Barber) is the editor of the series of books The Missing Manuals ("A Comprehensive Guide"). He lives in Massachusetts with her husband. Her email address is nanbarber@oreilly.com.
Melanie Yarbrough is a literary editor and composer. Lives and works in Cambridge, Massachusetts. He enjoys baking and loves to go cycling around the city. Her email address is myarbrough@oreilly.com.
Molly Ives Brower is a freelance editor and proofreader. He loves the Internet since in 1990 she received the address BITNET. Nowadays it can be found on the website mjibrower.com or on the social network Twitter, where it is known by the nickname @vintagereader. Her email address is molly@mjibrower.com.
Ron Strauss - compiler of the alphabetical index. Specializes in compiling indexes for various information technology books. Ron is also a talented violinist. He lives in Northern California with his wife and part-time colleague Annie and the Minke Pinscher Kenga. Email address: rstrauss@mchsi.com.
Rich Koster - beta reader. I bought my first Mac (17-inch MacBook Pro) in 2009 and never switched to the side of Windows users. In the third edition of the book “iPhone. A comprehensive guide. ”Rich acted as technical editor. He is married, brings up children and in his free time supports the personally created Disney Echo site.
More information about the book can be found on the publisher's website.
Table of contents
Excerpt
For Habrozhiteley 25% coupon discount - CSS
Source: https://habr.com/ru/post/280828/
All Articles