HTML&CSS Day03 CSS Fonts and Text Styles

1. Text attributes

- color properties

How to modify the text color through the color attribute in CSS

Format: color: value;
value:

• English vocabulary

​ Generally, common colors have corresponding English words, but the colors that can be expressed by English words are limited, that is to say, not all colors can be expressed by English words

• rgb

​ rgb is actually the three primary colors, where r(red red) g(green green) b(blue blue)
​ Format: rgb(0,0,0) Then the first number
in this format is used to set the three primary colors
The brightness of the red display of the light source element
The second number is used to set the brightness of the green display of the light source element of the three primary colors The
third number is used to set the brightness of the blue display of the light source element
of the three primary colors Each of these numbers is The value is between 0-255, 0 means no light, 255 means light, the larger the value, the brighter

​ Red: rgb(255,0,0);
​ Green: rgb(0,255,0);
​ Blue: rgb(0,0,255);
​ Black: rgb(0,0,0);
​ White: rgb( 255,255,255);

​ In fact, black is not commonly used in front-end development.
As long as the red/green/blue values ​​are the same, it is gray.
And if these three values ​​are smaller, the more black, the larger the more white.
For example: color : rgb(200,200,200);

• rgba

​ The rgb in rgba is the same as what was explained before, except that there is one more a. Then
this a represents transparency. The value is 0-1, and the smaller the value, the more transparent.
For example: color: rgba(255,0, 0,0.2);

• hexadecimal

​ In the front-end development, the color is represented by hexadecimal, in fact, the essence is RGB
​ In the hexadecimal system, a color is represented by every two bits
​ For example: #FFEE00 FF means R EE means G 00 means B

- font-style for turning italic text on and off

​ Format: font-style: italic;
​ Value:
​ normal : normal, the default is normal
italic : slanted
Shortcut key:
fs font-style: italic;
fsn font-style: normal;

- font-weight sets the thickness of the font

​ Format: font-weight: bold;
​ Value:
​ bold
bolder bolder thicker than bold
lighter lighter thin line, the default is thin line
Digital value:
​ 100-900 whole hundred
numbers 400 is equivalent to normal
​ 700 is equivalent to bold

​ Shortcut keys
​ fw font-weight:;
​ fwb font-weight: bold;
​ fwbr font-weight: bolder;

- font-size specifies the size for the text

​ Format: font-size: 30px;
​ Unit: px (pixel pixel)
​ Note: the size set by font-size must have a unit, that is, must write px
Shortcut key
fz font-size:;
​ fz30 font-size: 30px;

- font-family specifies a special font for the text, and the browser will only use the fonts that the browser can access

​ Format: font-family: "italics";

​ General fonts (direct use, no need for quotation marks)
serif: serif fonts, special decorative lines or serifs at the end of strokes
sans-serif: sans-serif fonts, smooth fonts at the end of strokes
monospace : Monospaced font, used for codes, each word in the font has the same width
Cursive: cursive, some of these fonts have continuous strokes, and some have special italic effects.
​ Fantasy: decorative fonts, fonts with special artistic effects

​ Points to note:
1. If the value is Chinese, it needs to be enclosed in double quotes or single quotes, and multiple word combinations must also be added.
2. The set font must be the font already installed in the user's computer
. 3. If set The font does not exist, then the system will use the default font to display the default font.
4. What if the set font does not exist, and we do not want to use the default font to display?
You can set an alternative
format for the font​ Format :font-family: "font 1", "alternative 1", …;
​ 5. What if you want to set fonts for Chinese and English separately?
However, all Chinese fonts contain English
. English fonts, none of them contain Chinese.
That is to say, Chinese fonts can handle English, but English fonts cannot handle Chinese.
Note: If you want to set a separate font for English in the interface, then the English font must be written in
front of 6. Supplement The most common fonts in enterprise development are as follows
​ Chinese: SongTi/Heiti/Microsoft Yahei
​ English: “Times New Roman”/Arial

​ One more thing to know is that it is not necessarily an English font if the name is in English
​ Because Chinese fonts actually have their own English names, so whether they are Chinese fonts mainly depends on whether they can handle
Chinese . Microsoft YaHei

​ Shortcut key
​ ff font-family:;

- abbreviated format

​ Abbreviated format:
​ font:style weight size family;
​ For example:
​ font:italic bold 10px “Italic”;

​ Points to note:
1. Some attribute values ​​in this abbreviation format can be omitted.
Style can be omitted.
Weight can be omitted.
2. In this abbreviation format, the positions of style and weight can be exchanged
. 3. In this abbreviation Some attribute values ​​in the format cannot be omitted
​ Size cannot be omitted
​ Family cannot be omitted
​ 4. The position of size and family cannot be randomly placed
​ Size must be written in front of family, and size and family must be written in front of end of all attributes

- WebFont

https://www.ziti163.com/webfont/
When the corresponding font is not installed in the user's computer, webFont can load web fonts for display.

@font-face {
    
                
    font-family: 'myfont';          
    src: url(“/fonts/test.woff”), url("/fonts/test.ttf");       
}       
div {
    
               
    font-family: myfont;        
}
<div>        
  test  
</div>

- font icons

​ When developing a website, you need a variety of small icons. It may be troublesome if you require an artist to draw these icons. Then we can directly use the open source font icon library. These font icon libraries use the principle of webFont. We load an icon as if Loading a font is as simple as controlling the size and color of the icon by controlling the font size and font color.
Currently popular open source font icon libraries include
iconfont http://www.iconfont.cn/
font-awesome http://fontawesome.dashgame.com/

-iconfont usage steps

1. Open the iconfont website https://www.iconfont.cn/

2. Search for the icon you want to use

3. Add the icon you like to the shopping cart, provided that you need to log in to iconfont

4. Open the shopping cart and download the code to the local

5. After downloading, put the corresponding folder in the project directory

6. In the corresponding page, import iconfont.css through the link tag, and use it directly according to the corresponding class name

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入对应的iconfont.css -->
  <link rel="stylesheet" href="./font_jcx62njyfg/iconfont.css">
</head>
<body>
  <!-- class="iconfont icon-xxx" 使用对应的图标即可-->
  <i class="iconfont icon-Flowerbud"></i>
</body>
</html>

-iconfont multi-color icon usage steps

1. Search or select the multi-color icon

2. Select the appropriate icon to add to the shopping cart

3. Add the icon to the project, no project can be created

4. Select the symbol in the project to generate an online link or download it locally

5. To quote the online js address, just use the script tag to import it directly; download it locally, and import iconfont.js into the project

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 加入通用css代码（引入一次就行） */
    .icon {
     
     
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;	
    }
  </style>
  <!-- 线上 -->
  <script src="http://at.alicdn.com/t/font_2723033_a8d3feqyo3r.js"></script>
  <!-- 本地 -->
  <script src="./font_2723033_472uiy994m2/iconfont.js"></script>
</head>
<body>
  <!-- 挑选相应图标并获取类名，应用于页面 -->
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xianxingbingbao"></use>
  </svg>
</body>
</html>

-font-awesome usage steps (note the version)

https://fontawesome.dashgame.com/

- Properties of the text decoration

​ Format: text-decoration: underline;
​ Value:
​ underline underline
​ line-through strikethrough
​ overline overline
​ none nothing, the most common use is to remove the underline of hyperlinks Shortcut
key
: td text-decoration: none;
​ tdu text-decoration: underline;
​ tdl text-decoration: line-through;
​ tdo text-decoration: overline;

- Attributes for horizontal text alignment

​ Format: text-align: right;
​ Value:
​ left left
right right
center middle
shortcut key
ta text-align: left;
tar text-align: right;
tac text-align: center;

- Properties for text indentation

​ Format: text-indent: 2em;
​ Value:
​ 2em, which is the em unit, and one em represents the width of indenting a text
shortcut key
ti text-indent:;
​ ti2e text-indent: 2em;

- set or cancel font change

​ Used to make the text appear in all uppercase or all lowercase

​ text-transform allows font changes, text deformation

​ none prevents any changes

​ uppercase Convert text to uppercase

​ lowercase Convert text to lowercase

​ capitalize converts the first letter of all words to uppercase

​ full-width converted to resemble a monospaced font

- font shadow

​ Format: text-shadow: h-shadow v-shadow blur color;
​ Values:
​ none: cancel all shadows
h-shadow : required. The position of the horizontal shadow. Negative values ​​are allowed.
v-shadow : Required. The position of the vertical shadow. Negative values ​​are allowed.
​ blur: optional. Blurred distance.
​color: optional. The color of the shadow.

2. List style

- default style

​ The margin-top and margin-bottom of the ul and ol elements are both 16px (1em), and the padding-left is 40px (2.5em)​ The
li element does not set the default blank space (line spacing)
​ The margin-top and margin of the dl element -bottom is 16px (1em), but there is no inner margin
​ The margin-left of the dd element is 40px (2.5em)
The margin-top and margin-bottom of the p element are 16px (1em)

- list-style-type Set the list item flag type

​ Value:

​ none : No item marker is shown.
​ disc : A filled circle (default value)
​ circle : A hollow circle
​ square : A filled square
​ decimal : Decimal numbers，Beginning with 1
​ lower-roman : Lowercase roman numerals，E.g. i, ii, iii, iv, v…
​ upper-roman : Uppercase roman numerals，E.g. I, II, III, IV, V…
​ decimal-leading-zero : Decimal numbers，Padded by initial zeros，E.g. 01, 02, 03, … 98, 99
​ …

- list-style-position sets the position where the list item logo appears

​ Values:
​ outside : the list item logo appears outside the main block box
inside : the list item logo appears inside the main block box

- list-style-image custom set list item logo

​ Value:
​ url() : Specify the location of the icon

- list-style

Shorthand for list style
Values:

[<type>][<image>][<position>]

Our most commonly used is list-style:none; setting without any style, through CSS to customize the style.

3. Other styles

- line-height

​ Set the line height of the text to absolute or relative units

- display

​ Display switching

​ inline Inline display, invalid width and height

​ block Block-level display, width and height are valid

​ inline-block In order to allow elements not to occupy a single line, but also to set the width and height, an inline block-level element appears, and the inline display is effective at the same time

​ none does not display, does not occupy screen space

​ flex flex box layout

- visibility

​ Show and hide

​ hidden Hidden, occupying screen space

​visible display

- opacity

​ Transparency, a value between 0-1, hidden when the value is 0, occupying screen space

- overflow overflow handling

​ hidden beyond the content hidden

​ auto beyond the scroll bar

​ scroll scroll bar

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;
/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;
/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;
/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

- cursor

Specifies the style of the cursor

default	Default cursor (usually an arrow)
auto	default. Cursor set by the browser.
crosshair	The cursor appears as a crosshair.
pointer	The cursor is rendered as a pointer (a hand) indicating a link
move	This cursor indicates that an object can be moved.
e-resize	This cursor indicates that the edge of the rectangle can be moved to the right (east).
what-resize	This cursor indicates that the edge of the rectangle can be moved up and to the right (north/east).
nw-resize	This cursor indicates that the edge of the rectangle can be moved up and to the left (North/West).
n-resize	This cursor indicates that the edge of the rectangle can be moved up (north).
se-resize	This cursor indicates that the edges of the rectangle can be moved down and to the right (south/east).
sw-resize	This cursor indicates that the edge of the rectangle can be moved down and to the left (south/west).
s-resize	This cursor indicates that the edge of the rectangle can be moved down (south).
w-resize	This cursor indicates that the edge of the rectangle can be moved left (west).
text	This cursor indicates text.
wait	This cursor indicates that the program is busy (usually a watch or hourglass).
help	This cursor indicates available help (usually a question mark or a balloon).