Tips for efficient use of CSS style sheets: Take full advantage of the power of style sheets
|
With the continuous development of the Internet economy, the number of professional websites, public service websites and corporate portals on the Internet is growing rapidly, and the amount of information on each website is also showing an explosive growth trend. Faced with such a huge amount of information, it would be a very complicated process for us to add or delete each column on the web page. In order to improve the efficiency of web page maintenance and updating, we can use style sheets to change the appearance of hundreds of web pages at the same time by just changing one file without losing any personalized performance. In order to make full use of the power and flexibility of style sheets, the author would like to share some of his own experiences on how to use style sheets effectively. 1. Multiple ways to import CSS in one web page There are many ways to introduce CSS into HTML, such as direct insertion, using a link to an external style sheet, using CSS "@import" to import a style sheet, and using the "STYLE" tag in an internal element to define a style sheet. Some netizens asked whether these introduction methods can be called in the same web page at the same time and whether there will be confusion between them? In fact, we don't need to worry so much. This is why it is called "Cascading Style Sheets". The browser processes the style sheets in the web page in a certain order. First, check whether there is directly inserted CSS in the page. If so, execute it first, and ignore the other CSS in this sentence; then check the "STYLE" tag in the source code of the web page, and execute it if it is found; then check the internal style sheet imported by "@import" and the linked external style sheet in turn. Therefore, we can call multiple CSS import methods in one web page at the same time. 2. Quickly create CSS external files For a web designer who is new to CSS, it is quite difficult to create a CSS external file using an editor such as WordPad. Since Dreamweaver supports CSS very well, it is much easier to use it to help. Specifically, you can do it as follows: first write down on paper the names of the formats that may be used in the website's web pages, then call out the CSS panel in the Dreamweaver editing window, define them one by one, and write some relevant content on a blank page, while defining and trying them out. If you are not satisfied with the results, modify them immediately. After all are defined, use Notepad to create an empty CSS external file, copy the defined CSS between 〈head〉 and 〈/head〉 to the CSS file, and you're done. 3. Make the background pattern still When a web page cannot be fully displayed on one screen, we often use horizontal and vertical scroll bars to browse the content outside the screen. When moving the scroll bar, the image and text usually move together. So is there any way to prevent the background image from "scrolling" with the text? We can use CSS to achieve this goal. We just need to put the following source code directly between the and tags of the web page. bg.jpg is the background image of the web page. You can replace it with the background image you need: Copy code The code is as follows:〈style type="text/css"〉 〈!-- BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed } --〉 〈/style〉 4. Let the web page automatically indent the first line Users who use DreamWeaver to design web pages know that it is not so convenient to enter spaces in DreamWeaver. We can use CSS to design the "first line indent" function to make up for this shortcoming. Open the design interface of DreamWeaver, find the CSS property definition dialog box (Style Definition for .style1) in the interface, and set the "first line indent" function in the "text-indent" property definition setting item under the "Block" tab of the dialog box. It should be noted here that the so-called "first line" refers to the first line of each paragraph of content, that is, directly pressing the Enter key will form a new paragraph. It is best to use "em" (character) as the unit of indentation. For example, Chinese typesetting requires that each paragraph be indented two Chinese characters at the beginning. The set CSS is as follows: Copy code The code is as follows:〈style type="text/css"〉 〈!-- .style1 { text-indent: 2em} --〉 〈/style〉 5. Use CSS to set the background of text In DreamWeaver, if we need to add a different background color to the text, the operation is very simple. Just click the text color button on the property panel with the mouse and select the required color from the pop-up color setting bar. But what should we do if we want to add a different background color to some text? Since DreamWeaver3 does not have this function, we can cleverly use CSS to achieve this goal. The specific operation process is, first we can make a CSS to define the background color, for example, name this CSS bjstyle, then select the text that needs to set the color on the web page, and then click "bjstyle" in the toolbar. The following is a CSS source code that defines the color background: Copy code The code is as follows:〈style type="text/css"〉 〈!-- .bjstyle { background: #cc00bb} --〉 〈/style〉 6. Add borders to specified content In DreamWeaver, we can use the powerful definition function of CSS to add borders to certain content. When defining, first open the design interface of DreamWeaver, and find the CSS property definition dialog box (Style Definition for .style1) in this interface. The "Border" setting item in this dialog box is used to define the border line of the specified content, among which the "top", "bottom", "left", and "right" setting columns are used to define the thickness and color of the border lines around the specified content respectively. After setting these settings, you also need to define the line type in the "Style" below, otherwise we will not be able to see the defined border line, because the default line type of CSS is "none". The following is a CSS source code that defines the top border as a thin blue line and the left border as a medium-thick green line: Copy code The code is as follows:〈style type="text/css"〉 〈!-- .style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00} --〉 〈/style〉 7. Use style sheets to control the color of hyperlinks If you study hyperlinks carefully, you will find that the default way the browser handles hyperlinks is to display hyperlinks that have not been visited yet in blue text with an underline, and hyperlinks that have been visited in dark purple text with a dark purple underline. These default colors may become boring after a while, and they may not match the background color of your web page. Therefore, we can freely change the display color of the hyperlink according to our own visual requirements, so that it can better reflect our own style. Next, I will introduce a source code for modifying the display color of a hyperlink. The code is as follows: We can add this source code between the... in the HTML file, and it will work for any hyperlink on this web page. The code in this section: A:link {text-decoration: none; color:blue} means that the hyperlink has not been visited yet, it has no underline and its color is blue. A:visited { color:red; text－decoration:line－through } indicates that after the hyperlink is visited, its color turns red and there is a strikethrough. A:active { color:white; text-decoration:underline } means that when the hyperlink is active, its color turns white and has an underline. A:hover {text-decoration:none;color:＃FF0000;background-color:black} means that when the mouse moves to the hyperlink, it has no underline, the text color turns yellow, and the background color is black. According to the above explanation, we can change the display color of the hyperlink in various states to the one we like, so as to better show our personality. 8. Add a background image to the selected text In DreamWeaver, we can also add a background image to specified text. The operation process is similar to adding a background color to specified text, except that the selected background color is replaced with the selected loaded background image. The specific operation process is, first we can make a CSS to define the background color, for example, name this CSS txstyle, then select the text that needs to set the color on the web page, and then click "txstyle" in the toolbar. The following is the CSS source code that defines the background image (test.gif is the loaded background image): Copy code The code is as follows:〈style type="text/css"〉 〈!-- .txbgstyle { background-image: url(test.gif)} --〉 〈/style〉 |
>>: File upload via HTML5 on mobile
Recommend
Tips for creating two-dimensional arrays in JavaScript
Creation of a two-dimensional array in Js: First ...
Specific use of useRef in React
I believe that people who have experience with Re...
Use simple jQuery + CSS to create a custom a tag title tooltip
Introduction Use simple jQuery+CSS to create a cus...
Example of how to set WordPress pseudo-static in Nginx
Quoting Baidu's explanation of pseudo-static:...
Detailed example of MySQL joint table update data
1.MySQL UPDATE JOIN syntax In MySQL, you can use ...
Example code for implementing timeline and animation effects using JavaScript (front-end componentization)
Table of contents Code cleaning "Frames"...
Detailed tutorial on how to connect to a remote server Docker to deploy a Spring Boot project in IDEA
Before you begin Have a cloud server, mine is Ten...
Summary of Operator Operations That Are Very Error-Prone in JavaScript
Table of contents Arithmetic operators Abnormal s...
Use of Linux bzip2 command
1. Command Introduction bzip2 is used to compress...
Sample code for html list box, text field, and file field
Drop-down box, text field, file field The upper p...
Summary of the data storage structure of the nginx http module
Starting from this section, we will explain the i...
MySQL5.7+ MySQL Workbench installation and configuration method graphic tutorial under MAC
This article mainly focuses on the installation a...
Configuring MySQL and Squel Pro on Mac
In response to the popularity of nodejs, we have ...
jQuery Ajax chatbot implementation case study
Chatbots can save a lot of manual work and can be...
VMware Tools installation and configuration tutorial for Ubuntu 18.04
This article records the installation and configu...