Hands on HTML & CSS
This is my practices on HTML&CSS in order to develop the front-end of websites.
References
HTML Basics
HTML element
A HTML document describes the content of a web page, which contains many HTML elements:
Basic HTML
A basic index.html is:
The page based on it:
CSS Basics
CSS is all about style (how it looks) of web content. It concerns the following questions:
How do I make text red?
How do I make content display at a certain location in the (webpage) layout?
How do I decorate my webpage with background images and colors?
File Layout
We store the CSS content in a .css file under the styles folder. The content of style.css is like:
and imports it in index.html:
which makes all the <p> elements red, as following:
CSS Rulesets
The basic element of CSS is called ruleset, which is explained as following:
SelectorIt defines the element(s) to be styled (in this example,
<p>elements). To style a different element, change the selector.Declaration. It specifies which of the element's properties you want to style, like
color: red;.
You can change the style:
You can select multiple elements using ,:
which generates:
Different Types of Selectors
There are 5 basic types of selectors.
Fonts and Text
First, find the output from Google Fonts that you previously saved from What will your website look like?. Add the link element somewhere inside your index.html's head (anywhere between the <head> tags). It looks something like this:
Next, delete the existing rule you have in your style.css file. It was a good test, but let's not continue with lots of red text.
Add the following lines (shown below), replacing the font-family assignment with your font-family selection. The property font-family refers to the font(s) you want to use for text. This rule defines a global base font and font size for the whole page. Since <html> is the parent element of the whole page, all elements inside it inherit the same font-size and font-family.
The page is like this now:
Now let's set font sizes for elements that will have text inside the HTML body (<h1>, <li> and <p>). We'll also center the heading. Finally, let's expand the second ruleset (below) with settings for line height and letter spacing to make body content more readable.
which changes the font-size and other styles:
The Box Model
Most HTML elements can be thought of as boxes sitting on the top of other boxes. CSS is about setting the size, color and position of boxes.
Each box taking up space on your page has properties like:
padding, the space around the content. In the example below, it is the space around the paragraph text.border, the solid line that is just outside the padding.margin, the space around the outside of the border.
In this section we also use:
width(of an element).background-color, the color behind an element's content and padding.color, the color of an element's content (usually text).text-shadowsets a drop shadow on the text inside an element.displaysets the display mode of an element. (keep reading to learn more)
Changing the Page Color
Styling the Body
width: 600px;This forces the body to always be 600 pixels wide.margin: 0 auto;When you set two values on a property likemarginorpadding, the first value affects the element's top and bottom side (setting it to0in this case); the second value affects the left and right side. (Here,autois a special value that divides the available horizontal space evenly between left and right). You can also use one, two, three, or four values, as documented in Margin Syntax.background-color: #FF9500;This sets the element's background color. This project uses a reddish orange for the body background color, as opposed to dark blue for the `` element. (Feel free to experiment.)padding: 0 20px 20px 20px;This sets four values for padding. The goal is to put some space around the content. In this example, there is no padding on the top of the body, and 20 pixels on the right, bottom and left. The values set top, right, bottom, left, in that order. As withmargin, you can use one, two, three, or four values, as documented in Padding Syntax.border: 5px solid black;This sets values for the width, style and color of the border. In this case, it's a five-pixel–wide, solid black border, on all sides of the body.
Positioning and Styling the Main Page Title
text-shadow applies a shadow to the text content of the element. Its four values are:
The first pixel value sets the horizontal offset of the shadow from the text: how far it moves across.
The second pixel value sets the vertical offset of the shadow from the text: how far it moves down.
The third pixel value sets the blur radius of the shadow. A larger value produces a more fuzzy-looking shadow.
The fourth value sets the base color of the shadow.
Centering the Image
Next, we center the image to make it look better. We could use the margin: 0 auto trick again as we did for the body. But there are differences that require an additional setting to make the CSS work.
The body is a block element, meaning it takes up space on the page. The margin applied to a block element will be respected by other elements on the page. In contrast, images are inline elements, for the auto margin trick to work on this image, we must give it block-level behavior using display: block;
Now, the page looks like this:
版权声明: 本文为 InfoQ 作者【无人之路】的原创文章。
原文链接:【http://xie.infoq.cn/article/faadd848a560b047cf94aef85】。文章转载请联系作者。
无人之路，自己领航。 2018-04-25 加入
喜欢写点东西的数据人，自动驾驶从业者。公众号同名，欢迎加微信yangls06交流。
评论