- Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher
- Address: https://www.bilibili.com/video/BV14J4114768?t=328&p=26
table of Contents
font: comprehensively set the font style (emphasis)
text-align: text horizontal alignment
text-indent: Indent the first line
text-decoration text-decoration
CSS text style
font
font-size: size
- Function: The font-size attribute is used to set the font size
p { font-size:20px; }
- unit:
- You can use relative length units or absolute length units.
- Relative length units are more commonly used, the pixel unit px is recommended, and the absolute length unit is less used
- note:
- After our text size, we basically use px, and other units are rarely used
- The default text size of Google Chrome is 16px
- However, different browsers may display different font sizes by default. We try to give a clear value size instead of the default size.
- Generally specify the size of the entire page text for the body
font-family: font
- Function: The font-family attribute is used to set which font.
p{ font-family:"微软雅黑";}
- Commonly used fonts in web pages include Times New Roman, Microsoft Yahei, HeiTi, etc. For example, set the font of all paragraph text in the web page to Microsoft Yahei
- Multiple fonts can be specified at the same time, separated by commas, which means that if the browser does not support the first font, it will try the next one until it finds a suitable font. If there is none, the default font of our computer shall prevail.
p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}
- 1. The various fonts must be separated by commas in English .
- 2. Chinese fonts need to be quoted in English, and English fonts generally do not need to be quoted. When you need to set the English font, the English font name must be before the Chinese font name .
- 3. If the font name contains spaces, #, $ and other symbols, the font must be enclosed in single or double quotes in English , such as font-family: "Times New Roman";.
- 4. Try to use the system default font to ensure that it can be displayed correctly in any user's browser.
- CSS Unicode font:
- Why use Unicode fonts
- Set the font name in CSS and write Chinese directly. However, when the file encoding (GB2312, UTF-8, etc.) does not match, a garbled error will occur.
- The xp system does not support Chinese like Microsoft Yahei.
- solve:
- Option 1: You can use English instead. For example
font-family:"Microsoft Yahei".- Solution 2: Directly use Unicode encoding to write font names in CSS to avoid these errors. Using Unicode to write Chinese font names, the browser can parse it correctly.
font-family: "\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”。
Font name English name Unicode encoding Song Ti SimSun \5B8B\4F53 New Song NSimSun \65B0\5B8B\4F53 Black body SimHei \9ED1\4F53 Microsoft Yahei Microsoft YaHei \ 5FAE \ 8F6F \ 96C5 \ 9ED1 Italics_GB2312 KaiTi_GB2312 \ 6977 \ 4F53_GB2312 Official script LiSu \96B6\4E66 Kindergarten YouYuan \ 5E7C \ 5706 Chinese fine black STXihei \ 534E \ 6587 \ 7EC6 \ 9ED1 Detailed body MingLiU \ 7EC6 \ 660E \ 4F53 New details PMingLiU \65B0\7EC6\660E\4F53
- In order to take care of the font installation problem of different computers, we try to use only Song Ti and Microsoft Yahei Chinese fonts
font-weight: font weight
- How to make the font bold in html can be achieved with tags
- Use b and strong tags to make the text bold.
- You can use CSS to achieve, but CSS has no semantics.
Attribute value description normal Default value (not bold) bold Define bold (bold) 100~900 400 is equivalent to normal, and 700 is equivalent to bold. Let’s remember this sentence
- Advocate: We usually prefer to use numbers to indicate bold and not bold . (Bold is equivalent to 700)
font-style: font style
- How to tilt the font in html we can use tags to achieve
- The font is slanted except for i and em tags
- You can use CSS to achieve, but CSS has no semantics
- The font-style attribute is used to define the font style, such as italic, italic, or normal font. The available attribute values are as follows:
Attributes effect normal By default, the browser will display the standard font style font-style: normal; italic The browser will display the italic font style.
- Usually we seldom italicize text, but prefer to change italic tags (em, i) to normal mode .
font: comprehensively set the font style (emphasis)
- The font attribute is used to comprehensively set the font style
The basic syntax format is as follows:
选择器 { font: font-style font-weight font-size/line-height font-family;}
- Note :
- When using the font attribute, it must be written in the order in the above grammar format, and the order cannot be changed . Each attribute is separated by spaces .
- The attributes that do not need to be set can be omitted (take the default value), but the font-size and font-family attributes must be retained, otherwise the font attribute will not work .
font summary
Attributes Means important point font-size Font size The unit we usually use is px, we must keep up with the unit font-family Font In actual work, write fonts according to the team agreement font-weight Font weight Remember that bold is 700 or bold. If not bold, it is normal or 400. Remember that numbers should not follow the unit font-style Font style Remember that tilt is italic and not tilt is normal. We most commonly use normal in work. font Font concatenation 1. The font ligation is in order and cannot be changed randomly 2. The font size and font must appear at the same time
CSS appearance properties
color: text color
- Role: The color attribute is used to define the color of the text,
- There are three ways to select values:
Representation Attribute value Predefined color value red, green, blue, and our queen color pink Hexadecimal #FF0000，#FF6600，#29D794 RGB code rgb(255,0,0) or rgb(100%,0%,0%)
- Note: In our actual work, hexadecimal notation is the most common , and we prefer abbreviations such as #f00 for red
text-align: text horizontal alignment
- Function: The text-align attribute is used to set the horizontal alignment of the text content, which is equivalent to the align attribute in html
- The available attribute values are as follows:
Attributes Explanation left Left alignment (default value) right Align right center Align center
- Note: the content in the box is centered horizontally, not the box is aligned in the center
line-height: line spacing
- Function : The line-height attribute is used to set the line spacing, which is the distance between lines, that is, the vertical spacing of characters, generally called line height.
- Unit : There are three commonly used attribute value units for line-height, which are pixel px, relative value em and percentage %. The pixel px is the most used in actual work.
- Generally, the line spacing should be about 7 or 8 pixels larger than the font size .
- line-height: 24px;
text-indent: Indent the first line
- Function : The text-indent attribute is used to set the indentation of the first line of text,
- Attribute value : The attribute value can be a numeric value in different units, a multiple of the em character width, or a percentage relative to the width of the browser window. Negative values are allowed.
- It is recommended to use em as the setting unit.
- 1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
p { /*行间距*/ line-height: 25px; /*首行缩进2个字 em 1个em 就是1个字的大小*/ text-indent: 2em; }
text-decoration 文本的装饰
- text-decoration 通常我们用于给链接修改装饰效果
值 描述 none 默认。定义标准的文本。 取消下划线（最常用） underline 定义文本下的一条线。下划线 也是我们链接自带的（常用） overline 定义文本上的一条线。（不用） line-through 定义穿过文本下的一条线。（不常用）
CSS外观属性总结
属性 表示 注意点 color 颜色 我们通常用 十六进制 比如 而且是简写形式 #fff line-height 行高 控制行与行之间的距离 text-align 水平对齐 可以设定文字水平的对齐方式 text-indent 首行缩进 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; text-decoration 文本修饰 记住 添加 下划线 underline 取消下划线 none
CSS文字文本样式总结
综合案例
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>综合案例-体育页面</title> <style> body { font-size: 16px; } .title { font-size: 28px; /*让字体不加粗*/ font-weight: 400; /*color: #FF6700;*/ /*color: rgb(255,103,0);*/ } em { /*让倾斜的标签 不倾斜*/ font-style: normal; color: skyblue; } .time { color: #ccc; /*#ff0000 #f00 #000000 #000 #ffffff #fff #ff1234 #ff1122 #f12*/ } .people { /*color: #990000;*/ color: #900; text-decoration: underline; } .search { color: red; } .btn { color: green; font-weight: 700; } /*文本 水平居中对齐*/ .tac { text-align: center; } p { /*行高 */ line-height: 26px; /*首行缩进2个字的距离 em 是倍数关系， 1em 就是1个字的距离 2em 就是2个字的宽度*/ text-indent: 2em; } a { /*取消下划线 a 默认自带下划线的*/ text-decoration: none; } </style> </head> <body> <h1 class="title tac">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1> <div class="tac"> <span class="time">2017年07月16日20:11</span> <span class="people"> 新浪体育 评论中大奖 （11人参与）</span> <a href="#">收藏本文</a> <input type="text" value="请输入查询条件" class="search" /> <input type="button" value="搜索" class="btn" /> </div> <hr /> <p> 新浪体育讯 7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。 </p> <p> 在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。 </p> <p> 据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。 </p> <p> 这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong> </p> </body> </html>
