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
Solution to nacos not being able to connect to mysql
reason The mysql version that nacos's pom dep...
Use dockercompose to build springboot-mysql-nginx application
In the previous article, we used Docker to build ...
Vue's simple implementation process of imitating NetEase Cloud Music Player interface
Due to the needs of the work project, song playba...
A brief discussion on JavaScript scope
Table of contents 1. Scope 1. Global scope 2. Loc...
How to create, start, and stop a Docker container
1. A container is an independently running applic...
Mysql5.7 my.ini file loading path and data location modification method under windows7
Update: Now you can go to the MySQL official webs...
Detailed tutorial on integrating Apache Tomcat with IDEA editor
1. Download the tomcat compressed package from th...
How to enable Swoole Loader extension on Linux system virtual host
Special note: Only the Swoole extension is instal...
XHTML Basic 1.1, a mobile web markup language recommended by W3C
W3C recently released two standards, namely "...
CSS3 achieves cool 3D rotation perspective effect
CSS3 achieves cool 3D rotation perspective 3D ani...
Steps to configure IIS10 under Win10 and support debugging ASP programs
Microsoft IIS IIS (Internet Information Server) i...
How to directly reference vue and element-ui in html
The code looks like this: <!DOCTYPE html> &...
Example statements for indexes and constraints in MySQL
Foreign Keys Query which tables the primary key o...
Implement MySQL read-write separation and load balancing based on OneProxy
Introduction Part 1: Written at the beginning One...
Introduction to HTML DOM_PowerNode Java Academy
What is DOM? With JavaScript, you can reconstruct...