Markup language - specify CSS styles for text
|
Click here to return to the 123WORDPRESS.COM HTML Tutorial section. To view the CSS tutorial, please click here. Above: Markup language - CSS layout . Chapter 13 Styling Text I thought it would be a good idea to devote a chapter to styling text with CSS. Text content is probably the most common place to use CSS, even for sites that don't fully adhere to standards. Getting rid of the repetitive <font> tags on a page was (and still is) a very attractive thing for designers, and it's not hard to see the huge advantage of using CSS to control typography, which is to further separate content from presentation. From many of the previous examples, we know that CSS can handle many situations, and setting text styles is the simplest way to add design elements to even the most basic web pages. At the same time, using CSS to style text can also help us avoid adding unnecessary images to the page. In this chapter, we'll see how CSS can take a boring, ordinary piece of text and bring it to another level (with new colors, sizes, and fonts). How can we make hypertext look cool? Specifying text styles is one of the things CSS does best, even in older browsers that don't fully support CSS's advanced features. In the past, designers and developers might have wanted to design text to achieve effects other than size and bold, which would have resulted in a web page that is unbearable and difficult to use by today's standards (ever seen a web page where most of the text is represented by images? But you happen to be using a text browser...) To give you some alternatives to using images and answer the question above, in this chapter, we will start with a piece of text that has not been styled, and gradually add various CSS rules to it to make it an eye-catching design. Start by viewing the text you are about to process in the browser's default font. In my case, the default font is Times 16 pixels. I am using the Safari browser on Mac OS X, so the text will be drawn in an anti-aliased manner. If you are using Windows XP and have ClearType enabled, you can also see a similar effect. Times (or its variant Times New Roman) is the default font for many browsers, however this can easily be changed by users to their own preferred font, so you certainly cannot rely on this default. Figure 1301 shows the unstyled text we use in this chapter: a simple title marked with an <h1> tag, followed by three paragraphs of home decorating tips.  Figure 13-1 Browser displays title, text presets Changing line height One of the simplest and most effective text styling effects is the line-height property. Adding some extra space between each line of text can make paragraphs easier to read and more attractive, and can also bring wonderful effects to your page. To accomplish this trick, simply add the following CSS rule to the <body> tag. You can also add this rule to other tags, for example, if you only want to change the line height of <p>.
This code means: the line height of the text on the page should be 1.5 times the height of the text. I like to use em units when specifying line-height because they change with the font size. Figure 13-2 shows the effect after adding line-height.  Figure 13-2 The effect of the preset text and line height already looks great. It is amazing what a small line-height can do. Previous Page 1 2 3 4 5 Next Page Read More |
<<: Detailed explanation of MySQL combined query
>>: Detailed explanation of component communication in react
Recommend
Example code for implementing multiple line omissions using three methods of advanced CSS
Preface This is an old demand, but there are stil...
Specific method to add foreign key constraints in mysql
The operating environment of this tutorial: Windo...
Use button trigger events to achieve background color flashing effect
To achieve the background color flashing effect, j...
Sample code for implementing mysql master-slave replication in docker
Table of contents 1. Overview 1. Principle 2. Imp...
MySql grouping and randomly getting one piece of data from each group
Idea: Just sort randomly first and then group. 1....
React antd realizes dynamic increase and decrease of form
I encountered a pitfall when writing dynamic form...
Installation, activation and configuration of ModSecurity under Apache
ModSecurity is a powerful packet filtering tool t...
CSS3 realizes the glowing border effect
Operation effect: html <!-- This element is no...
Implementation of installing and uninstalling CUDA and CUDNN in Ubuntu
Table of contents Preface Install the graphics dr...
Prevent HTML and JSP pages from being cached and re-fetched from the web server
After the user logs out, if the back button on the...
Detailed explanation of mysql basic operation statement commands
1. Connect to MySQL Format: mysql -h host address...
MySQL 5.7.20\5.7.21 free installation version installation and configuration tutorial
mysql download, install and configure 5.7.20 / 5....
Detailed explanation of how to effectively store IP addresses in MySQL and how to convert between string IP and numerical values
When looking at High Performance MySQL Version 3 ...
VMware Workstation installation Linux (Ubuntu) system
For those who don't know how to install the s...
Detailed explanation of how to configure openGauss database in docker
For Windows User Using openGauss in Docker Pull t...