April 5, 2016 at 12:20New Big CSS Book
Hi, habrozhiteli! We have a new updated book by David MacFarland:
CSS3 technology allows you to create professionally designed sites, but the subtleties of this language can be quite difficult even for experienced web developers. The completely revised fourth edition of this book will help you take your HTML and CSS skills to the next level; it contains many valuable tips, descriptions of tricks, and instructions written in the style of a reference guide. Using this book, web designers, both beginners and experienced, will quickly learn how to create beautiful web pages that load instantly on both PC 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 several web pages) and are familiar with the basic elements, such as html, p, h1, table, which form the basis of the hypertext markup language for documents. CSS is useless without HTML, so you should know how to create a simple web page using basic HTML elements.
If you previously created HTML web pages, but feel that you need to refresh your knowledge, the next section of the book will help you.
The HTML hypertext markup language uses simple commands, called tags, to identify different parts — fragments. The following is the HTML for a simple web page:
Of course, the example is very simple, but it demonstrates all the basic elements necessary for a regular web page. 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, section of the heading), followed by body (body, section of the body), and directly the contents of the web pages. All this ends with a closing tag. The opening and closing tags form an HTML element.
All web pages begin with a declaration of the type of document - a line of code defining the kind of HTML that you used when writing the page. Over the 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, the transition document type declaration HTML 4.01 looks like this (other document type declarations for HTML 4.01 and XHTML 1.0 look something like this):
If you look at the sample code for the HTML page shown in this section, you will see that it uses a short form declaration of the document type:
The document type declaration appeared in HTML5. Compared to its predecessors, HTML5 has simplicity and rationality in use. This book uses an HTML5 document type declaration supported by any popular browser (even the old Internet Explorer 6). There’s no point in using ads other than plain HTML5 doctype.
Regardless of the preferred type of document declared with doctype, it is important that at least one of them is used. Without this, your pages will look different depending on your visitor’s browser, as browsers that do not have document type ads as their guide display CSS formatted information in different ways.
Each document type declaration requires you to write HTML in a specific way. For example, an element for breaking lines has the following form in HTML 4.01:
But in XHTML, this element looks like this:
And here’s another advantage of HTML5: it allows any of these options.
HTML elements are made up of tags. In the above example, as in the HTML code of any web page, most elements use pairs of tags, starting and ending some fragment - a block of text or other commands. When bracketed, these tags are commands that tell the browser how to display a web page. Tags are a “markup” part of the hypertext markup language - 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 a declaration of the document type - the doctype element, discussed in the previous section.
- A tag is required at the beginning of a web page and (with a slash added) at the end:. The html element tells the browser that the document is HTML code. The entire content of the page, including the rest of the elements, is between the opening and closing tags of the html element.
If you represent a web page in the form of a tree, then the html element will be its trunk. The two main parts of any web page — the heading section and the body — are branches.
- The heading section of the web page (head) contains its name. It may also contain other information that is not displayed when viewing a web page, such as a description of the page, which is intended for browsers and search engines. The header section is the opening and closing tags of the head element.
In addition, the header section may contain information used by the browser to style the HTML on the page and to make the page interactive. You will see that the header section may contain CSS code (like the one you will learn to create) or a link to another file containing a stylesheet.
- The body of the web page immediately following the heading section and enclosed in the tags of the body element contains everything that should appear in the browser window: headers, text, images, etc.
Inside the body of the page, as a rule, you can find the following elements:
p element - opening tag
???? element strong - highlights the text as important; e.g. code
???? element a, or anchor element, - creates a hyperlink, when clicked, you can move to another position of the web page or to another page (you need to tell the browser this link by placing it inside the opening tag
The browser knows that when you click on a link with the words Click here! the visitor of your page should go to the site with the address www.piter.com . 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 the HTML language, has been around for several years. Sometimes you will hear names that are not related to HTML elements, such as local repositories (a way to store data from a site on a visitor’s computer), geolocation (a way to determine the coordinates of a visitor’s computer) and drawing on a web page using the WebGL library. Strictly speaking, these technologies are not part of HTML, but they are part of the new browser features introduced with HTML5.
In this book, the term HTML5 always refers to the type of HTML5 document, as well as new elements that are part of the new HTML5 standard. HTML5 does not bear any cardinal 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, the header element may include content that is usually found at the top of the page — the logo and navigation links 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, for example, legal information, email contacts, etc.
In addition, HTML5 added new elements that allow you to embed video and audio content on the page, and new form elements that add complex components such as sliders, pop-up date picker panels, as well as built-in browser support for validating data entered into the form ( which guarantees the correct filling of your forms by visitors). Throughout the book, especially in the next chapter, you'll see examples of using the HTML5 language.
This book is written to help readers of any level. To get the most out of your material, you should definitely learn from the HTML and CSS examples provided. If you have never created web pages before, then turn 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 the principles of creating web pages poorly, then for a better understanding of the topic covered, you should familiarize yourself with the text of the inset “Keep up to date!”. On the other hand, if you have a lot of experience creating web pages, pay attention to the “For advanced users” sidebars. They contain tips, 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. CSS Basics . It describes the creation of cascading style sheets in general and gives a brief overview of key concepts such as inheritance, selectors, and cascading style sheets. Along with learning CSS, you will gain basic HTML writing skills. Workshops will reinforce the basic concepts introduced in the chapters and allow you to feel the effectiveness of using CSS.
Part II CSS application. It takes you to the real world of web design. You will learn about the most important CSS properties and their use for formatting text, practice creating useful navigation tools, and improve the appearance of your experimental web pages by adding graphics. You will also learn how to use CSS to create simple animations. This part also contains recommendations on how to create beautiful tables and forms.
Part III. Page layout using CSS . It will help you deal with the most confusing but very useful CSS feature: controlling the placement of elements on your page. You will become familiar with design patterns (placing content in two and three columns) and learn how to add sidebars. We will talk about two main methods for positioning elements on a page:
absolute and relative. You will also learn how to create sites that are adaptable for better viewing in browsers of desktop systems, tablets and mobile devices, and use flexbox, a new powerful tool for creating a layout of web pages.
Part IV Professional CSS layout techniques. Provides tips from professionals to improve your cascading style sheets, as well as talk about Sass - a powerful and efficient way to make stylesheets.
Part V. Annexes, including two directories. The CSS Property Reference describes each property individually in a simple and accessible way so that you can quickly learn about useful CSS properties that you might not have come across before, or quickly refresh already familiar properties. The second appendix describes 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 communications professionals.
David taught web design at the Berkeley Graduate School of Journalism, the Electronic Art Center, and Portland State University. He is currently the head teacher at Treehouse's online education site .
Nan Barber is the editor of the Missing Manuals book series. Lives in Massachusetts with her husband. Her email address is nanbarber@oreilly.com.
Melanie Yarbrough is a literary editor and composer. He lives and works in Cambridge, Massachusetts. He is fond of pastries and enjoys cycling around the city. Her email address is myarbrough@oreilly.com.
Molly Ives Brower is a freelance editor and corrector. He loves the Internet since he got a BITNET address in 1990. Nowadays, it can be found on mjibrower.com or on the social network Twitter, where it is known as @vintagereader. Her email address is molly@mjibrower.com.
Ron Strauss- compiler of the index. Specializes in compiling indexes for various books on information technology. Ron is also a talented violinist. He lives in Northern California with his wife and part-time colleague Annie and the dwarf pinscher Kenga. Email address: rstrauss@mchsi.com.
Rich Koster is a beta reader. I bought my first Mac (17-inch MacBook Pro) in 2009 and never again switched to Windows users. In the third edition of the book “iPhone. An exhaustive guide. ”Rich acted as technical editor. He is married, has children, and in his free time supports the Disney Echo website he has created himself .
More details on the book can be found on the publisher’s website.
Content
Excerpt
For Savory Agents 25% off Coupon - CSS
CSS3 technology allows you to create professionally designed sites, but the subtleties of this language can be quite difficult even for experienced web developers. The completely revised fourth edition of this book will help you take your HTML and CSS skills to the next level; it contains many valuable tips, descriptions of tricks, and instructions written in the style of a reference guide. Using this book, web designers, both beginners and experienced, will quickly learn how to create beautiful web pages that load instantly on both PC 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 several web pages) and are familiar with the basic elements, such as html, p, h1, table, which form the basis of the hypertext markup language for documents. CSS is useless without HTML, so you should know how to create a simple web page using basic HTML elements.
If you previously created HTML web pages, but feel that you need to refresh your knowledge, the next section of the book will help you.
HTML: language structure
The HTML hypertext markup language uses simple commands, called tags, to identify different parts — fragments. The following is the HTML for a simple web page:
Это заголовок веб-страницы А это абзац этой веб-страницы
Of course, the example is very simple, but it demonstrates all the basic elements necessary for a regular web page. 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, section of the heading), followed by body (body, section of the body), and directly the contents of the web pages. All this ends with a closing tag. The opening and closing tags form an HTML element.
Document types
All web pages begin with a declaration of the type of document - a line of code defining the kind of HTML that you used when writing the page. Over the 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, the transition document type declaration HTML 4.01 looks like this (other document type declarations for HTML 4.01 and XHTML 1.0 look something like this):
If you look at the sample code for the HTML page shown in this section, you will see that it uses a short form declaration of the document type:
The document type declaration appeared in HTML5. Compared to its predecessors, HTML5 has simplicity and rationality in use. This book uses an HTML5 document type declaration supported by any popular browser (even the old Internet Explorer 6). There’s no point in using ads other than plain HTML5 doctype.
Regardless of the preferred type of document declared with doctype, it is important that at least one of them is used. Without this, your pages will look different depending on your visitor’s browser, as browsers that do not have document type ads as their guide display CSS formatted information in different ways.
Each document type declaration requires you to write HTML in a specific way. For example, an element for breaking lines has the following form in HTML 4.01:
But in XHTML, this element looks like this:
And here’s another advantage of HTML5: it allows any of these options.
How HTML elements work
HTML elements are made up of tags. In the above example, as in the HTML code of any web page, most elements use pairs of tags, starting and ending some fragment - a block of text or other commands. When bracketed, these tags are commands that tell the browser how to display a web page. Tags are a “markup” part of the hypertext markup language - 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 a declaration of the document type - the doctype element, discussed in the previous section.
- A tag is required at the beginning of a web page and (with a slash added) at the end:. The html element tells the browser that the document is HTML code. The entire content of the page, including the rest of the elements, is between the opening and closing tags of the html element.
If you represent a web page in the form of a tree, then the html element will be its trunk. The two main parts of any web page — the heading section and the body — are branches.
- The heading section of the web page (head) contains its name. It may also contain other information that is not displayed when viewing a web page, such as a description of the page, which is intended for browsers and search engines. The header section is the opening and closing tags of the head element.
In addition, the header section may contain information used by the browser to style the HTML on the page and to make the page interactive. You will see that the header section may contain CSS code (like the one you will learn to create) or a link to another file containing a stylesheet.
- The body of the web page immediately following the heading section and enclosed in the tags of the body element contains everything that should appear in the browser window: headers, text, images, etc.
Inside the body of the page, as a rule, you can find the following elements:
p element - opening tag
begins the paragraph while closing
completes;???? element strong - highlights the text as important; e.g. code
Внимание!???? element a, or anchor element, - creates a hyperlink, when clicked, you can move to another position of the web page or to another page (you need to tell the browser this link by placing it inside the opening tag
, например Щелкните здесь!)
The browser knows that when you click on a link with the words Click here! the visitor of your page should go to the site with the address www.piter.com . 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 the HTML language, has been around for several years. Sometimes you will hear names that are not related to HTML elements, such as local repositories (a way to store data from a site on a visitor’s computer), geolocation (a way to determine the coordinates of a visitor’s computer) and drawing on a web page using the WebGL library. Strictly speaking, these technologies are not part of HTML, but they are part of the new browser features introduced with HTML5.
In this book, the term HTML5 always refers to the type of HTML5 document, as well as new elements that are part of the new HTML5 standard. HTML5 does not bear any cardinal 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, the header element may include content that is usually found at the top of the page — the logo and navigation links 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, for example, legal information, email contacts, etc.
In addition, HTML5 added new elements that allow you to embed video and audio content on the page, and new form elements that add complex components such as sliders, pop-up date picker panels, as well as built-in browser support for validating data entered into the form ( which guarantees the correct filling of your forms by visitors). Throughout the book, especially in the next chapter, you'll see 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 your material, you should definitely learn from the HTML and CSS examples provided. If you have never created web pages before, then turn 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 the principles of creating web pages poorly, then for a better understanding of the topic covered, you should familiarize yourself with the text of the inset “Keep up to date!”. On the other hand, if you have a lot of experience creating web pages, pay attention to the “For advanced users” sidebars. They contain tips, 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. CSS Basics . It describes the creation of cascading style sheets in general and gives a brief overview of key concepts such as inheritance, selectors, and cascading style sheets. Along with learning CSS, you will gain basic HTML writing skills. Workshops will reinforce the basic concepts introduced in the chapters and allow you to feel the effectiveness of using CSS.
Part II CSS application. It takes you to the real world of web design. You will learn about the most important CSS properties and their use for formatting text, practice creating useful navigation tools, and improve the appearance of your experimental web pages by adding graphics. You will also learn how to use CSS to create simple animations. This part also contains recommendations on how to create beautiful tables and forms.
Part III. Page layout using CSS . It will help you deal with the most confusing but very useful CSS feature: controlling the placement of elements on your page. You will become familiar with design patterns (placing content in two and three columns) and learn how to add sidebars. We will talk about two main methods for positioning elements on a page:
absolute and relative. You will also learn how to create sites that are adaptable for better viewing in browsers of desktop systems, tablets and mobile devices, and use flexbox, a new powerful tool for creating a layout of web pages.
Part IV Professional CSS layout techniques. Provides tips from professionals to improve your cascading style sheets, as well as talk about Sass - a powerful and efficient way to make stylesheets.
Part V. Annexes, including two directories. The CSS Property Reference describes each property individually in a simple and accessible way so that you can quickly learn about useful CSS properties that you might not have come across before, or quickly refresh already familiar properties. The second appendix describes 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 communications professionals.
David taught web design at the Berkeley Graduate School of Journalism, the Electronic Art Center, and Portland State University. He is currently the head teacher at Treehouse's online education site .
About the creative team
Nan Barber is the editor of the Missing Manuals book series. Lives in Massachusetts with her husband. Her email address is nanbarber@oreilly.com.
Melanie Yarbrough is a literary editor and composer. He lives and works in Cambridge, Massachusetts. He is fond of pastries and enjoys cycling around the city. Her email address is myarbrough@oreilly.com.
Molly Ives Brower is a freelance editor and corrector. He loves the Internet since he got a BITNET address in 1990. Nowadays, it can be found on mjibrower.com or on the social network Twitter, where it is known as @vintagereader. Her email address is molly@mjibrower.com.
Ron Strauss- compiler of the index. Specializes in compiling indexes for various books on information technology. Ron is also a talented violinist. He lives in Northern California with his wife and part-time colleague Annie and the dwarf pinscher Kenga. Email address: rstrauss@mchsi.com.
Rich Koster is a beta reader. I bought my first Mac (17-inch MacBook Pro) in 2009 and never again switched to Windows users. In the third edition of the book “iPhone. An exhaustive guide. ”Rich acted as technical editor. He is married, has children, and in his free time supports the Disney Echo website he has created himself .
More details on the book can be found on the publisher’s website.
Content
Excerpt
For Savory Agents 25% off Coupon - CSS