进击 of python
Front-end typesetting learning --CSS
This section focuses on the main page layout attribute formatting elements
Css technologies to help developers and web publishing closely together to achieve better results Web Design
Font properties
Fonts
In their daily work, we will use the word to write content, for example you can set the font, size, color and other settings to what we need to set
Then we use in the page css styles, also do related settings
Then we can try to set the page text as Microsoft elegant black font
body{font-family:'微软雅黑'}Here we must be careful not to set the font is not commonly used, for example, you give me a 'body of the Philippines'
Because if the user's local computer if you set the font is not installed, the browser will display the default font
In other words, the user can not see the font style you set is entirely dependent on the user's local computer if you install the font set
So basically set up web pages like Microsoft elegant black, because this font is beautiful and can be fully displayed in the client
Alternate font
If that really is not Microsoft elegant black stuff? It would need an alternative font!
body{font-family:'Microsoft Yahei','宋体','黑体'}Fonts can have numerous alternative, then the browser to resolve this code, is parsed from left to right
If there is no Microsoft elegant black, then go to Times New Roman, and then look for the black body
font size
You can set the font size for the text in a web page, then the general browser's default font size is 16px
The most common pixel unit is: px, em, rem
<p style="font-size: 20px"></p> Set the font 20px
PX : pixel refers to a small box image composed of these small squares have a clear position and color values are assigned small box color and position of the image presented on the decision out of the way
The remaining two, one would say
font color
Color is divided into three primary colors: different mix between red, green and blue, the three primary colors can show different colors
For example, red + green = yellow
The color representation There are three ways in CSS:
<p style="color: red">英文单词表示法，比如red、green、blue</p>
English word notation, such as red, green, blue
<p style="color: rgb(255,0,0)">rgb表示法</p>
rgb representation
<p style="color: #ff0000">十六进制表示法</p>
Hexadecimal notation
For rgb notation and hexadecimal notation, we can take to aid the corresponding color (color eyedropper) by the editor
Font style
The site is divided into a common font and font italic font, we can use the font-styleproperty to set the corresponding font style
<p style = "font-style:normal">这是正常的字体</p>By default, set to Normal text font
This is a normal font
<p style = "font-style:italic">这是倾斜的字体</p>If the current version italic font is available, then the text to italic version; if not available, then the state will use to simulate italics oblique
This is a tilt font
<p style = "font-style:oblique">这是模拟倾斜的字体</p>The text to simulate italic version of the font, that is, plain text tilt style to text
This simulates slanted font
Because the ilabel itself has a tilt of meaning, so you can tilt the existing font to make the appropriate settings on demand.
Font weight
Site, we can font-weightset the size of text in bold
There are many optional value, then use the most is normaland boldrepresent the ordinary and bold, and font weight
| Property Value | description |
|---|---|
| normal | Normal font weight, default |
| bold | Bold font weight |
| lighter | Thinner than normal font font |
| bolder | Thicker than the bold font |
| 100~900 | 400 represents normal |
Bold font weight
Thinner than normal font font
Thicker than the bold font
400 represents normal
Text property
Text-decoration
In a web page Sometimes we need to set the text underline, or strikethrough
If you want to achieve underline or strikethrough, the use of text-decorationproperty
| Property Value | description |
|---|---|
| none | No text modifications |
| underline | Underlined text |
| overline | Crossed the text |
| line-through | Through a line of text, |
No text decoration
Underlined text
Crossed the text
Strikethrough
Text-indent
For example, we usually write article, first line indent two characters then we need to use the text-indentproperty to achieve
Its attribute value is a pixel (px, em, rem) units
We hope that the whole article describes, the first line of two spaces, then we must first know how much the font size
For example, the default font size is 16px, then I need to set it text-indent:32px;to achieve results
You can dynamically set it? We can set another unit em, it is a relative unit, relative to the size of the font tag to set p
If the p tag font is 16px, then 1em = 16px, if I am late to set the font size 20px, 40px then automatically switches to 2em
p{
text-indent:2em;
font-size:30px;
}Line spacing
Line spacing, also known as line height, the distance between the Bank and the Bank, on a case rendering will find that the distance between the line and the line a little closer, then to make the text appear more beautiful, we can use the line- height attributes to set the line spacing, in pixels it
p{
font-size: 20px;
text-indent: 2em;
line-height:2em;
}Text spacing, spacing English
If you want to set the page layout of the text or letter spacing interval can be used letter-spacingor word-spacingbe implemented
Text alignment
In a word document, we usually know the text and even pictures can be set alignment, such as making text or images appear centered
So in web publishing, we can use the text-alignproperty to be set
| Property Value | description |
|---|---|
| left | Left-aligned text, the default |
| right | Right align text |
| center | Align Center |
The default left-aligned
Align Right
Align