'CSS Website Layout Record' Study Notes (2)_html/css_WEB-ITnose
Chapter 2 XHTML and CSS Basics
2.1 XHTML Basics
XHTML is the core content of web page code , the standard XHTML code is as follows:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 .org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>新建文档</title> 6 </head> 7 8 <body> 9 </body>10 </html>
This code can be divided into several parts to understand:
1. This code starts with doctype and also becomes the document type specification Code, which is the format tag of XHTML, is used to tell the browser what type of code it is.
2. The tag represents a web page and is the first tag of the web page. It indicates that the content between the predicate tags belongs to the html type, and the browser will Content is parsed by html type.
3. The
tag refers to the head of the web page, the content of which is mainly placed in the title bar of the browser, or other information that needs to be given to the browser. The meta tag tells the browser that the type of web page is text/html and is encoded in utf-8.4. The
tag refers to the main body of the web page. The content in the body will be displayed in the window by the browser.The CSS code should be placed in the head tag.
2.2 Choose the appropriate DTD
A standard XHTML document must start with a doctype tag. For XHTML, the type can use 3 different XHTML document types. The usage is as follows:
- Transitional type:
- Strict type:
- Frameset type:
In essence, XHTML DTD requires the use of individual tags of XHTML to define all content in the document structure rather than expressing its style, so the final way of writing XHTML should be to use the Strict type. However, using the Strict type directly sometimes makes the encoding method too narrow, so the Transitional type is generally used.
2.3 Choose the appropriate tag
1. Layout
The div tag is the first choice for layout tags. Each tag on the page An area, such as header, footer, left column, right column, etc., can be identified using div. Remember one sentence: use div layout and css control!
2. Text
XHTML provides many rich tags for text layout, such as h1-h6 tags, etc.
3. Pictures and other objects
There are img tags in HTML, as well as object tags that are often used when inserting Flash. They can be used for pictures and objects. insert.
4. List element
In addition to being used in list-type content, list elements can also be used as navigation designs. XHTML provides several list tags including ul, ol, li, dl, dt, dd, etc.
There are also form, input, select and tags used in forms, etc. Here are only some tags. In table layout, they are not often used, but in CSS layout, they will be the main force of page tags.
2.4 Leave an interface for CSS
CSS is controlled by using the id and class attributes in XHTML. id can be understood as the name of the object, and class can be understood as the type or ownership of the object. For example:
Define a p tag with an id of content:
Use in CSS: #content {...}
This form allows you to write styles for p objects. Even if the page has multiple p tags, as long as their ids are different, you can write different style codes for them respectively. In XHTML, the same id name can only be used once on each page, and repeated id names are not allowed. This is the uniqueness of naming.
Similarly, the class attribute can also be used in the same way, such as:
The main purpose of class It corresponds to the CSS style, and the class name is allowed to be reused in the page. In other words, painful styles can be used in multiple XHTML objects.
2.5 Good XHTML writing habits
The most obvious difference between XHTML and HTML is that XHTML has stricter syntax requirements than HTML. These rules are mainly reflected in the following aspects:
2.6 CSS syntax structure
To apply CSS to XHTML, the first thing to do is to choose the appropriate selector. The selector is the CSS object in the XHTML document. a way. Simply put, it tells the browser which object this style will be applied to.
2.6.1 CSS attributes and selectors
The grammatical structure of CSS only consists of 3 parts: selector (Selector), attribute (Property) and value ( Value).
How to use: Selector {Property: Value;}
In practical applications, the following types of application forms are often used:
body {background-color: blue;}
It means that the selector is body, that is, selection The
tag in the page has the attribute background-color. This attribute is used to control the background color of the object, and its value is blue.In addition to the definition of a single attribute, you can also define one or more attributes for a single tag, using semicolons to separate each attribute. For example:
p {
text-align: center;
color: black;
font-family: arial;
}
Similarly, an id or class can also be styled in the same form.
2.6.2 Type selector
The body {} above is a type selector. The type selector refers to the selector that uses the existing tag name in the web page as its name. Such as: body{}, div{}, span{}, etc.
2.6.3 Group Selector
In addition to assigning styles to a single XHTML object, the same style can also be assigned to a group of objects. For example:
h1, h2, h3, p, span {
font-size: 12px;
font-family: arial;
}
Use commas to separate selectors so that all h1, h2, h3, p, and span in the page will have the same style definition. The advantage of this is that you only need to write the style sheet once for places on the page that need to use the same style, thereby reducing the amount of code and improving the structure of the CSS code.
2.6.4 Inclusion selector
When you only intend to specify styles for sub-objects of an object, the inclusion selector comes in handy. Containing selectors means that the previous object in the selector combination includes the following object, and spaces are used as separators between objects. For example:
h1 span {
font-weight: bold;
}
The span under h1 is styled, and the span under the h1 tag is styled The span tag will be styled with font-weight: bold applied. It is worth noting that this style is only effective for tags with this structure. This style will not be applied to separate h1 or span and other spans that are not subordinate to h1 tags.
In addition to including both, the inclusion selector can also be included at multiple levels. However, for the sake of clear code and high readability, this is generally not recommended.
2.6.5 id and class selectors
id and class are selectors provided by CSS for user-defined tag names. Users can use the selectors id and class to customize the name of the XHTML tags in the page.
2.6.6 Tag-specific selector
If you want to use both id or class and tag selector at the same time, you can use the following format:
h1#content {}: Indicates that all h1 tags with the id of content are assigned.
h1.p1 {}: Indicates that it is defined for all h1 tags with class p1.
The label-specific selector is between the label selector and the id/class selector in terms of accuracy of label selection.
2.6.7 Combination Selectors
For all the above CSS selectors, no matter what kind of selectors, they can be used in combination. For example:
h1 .p1 {}: Indicates all tags with class p1 under the h1 tag.
#content h1 {}: Represents all h1 tags under the tag with the id of content.
h1 .p1, #content h1 {}: Group selection for the above two.
h1#content h2 {}: Represents the h2 tag under the h1 tag with the id of content.
2.6.8 Pseudo classes and pseudo objects
Pseudo classes and pseudo objects are special classes and objects that are automatically supported by CSS and are part of CSS. Extension classes and objects. The names of pseudo classes and pseudo objects cannot be customized by users, and can only be applied in standard formats when used.
Pseudo classes and pseudo objects are composed of the following two forms:
CSS has several built-in standard pseudo-classes that can be used for style definition.
| 伪类 | 用途 |
| :link | a链接标签的未被访问的样式 |
| :hover | 对象在鼠标移上时的样式 |
| :active | 对象被用户点击及被点击释放之间的样式 |
| :visited | a 链接对象被访问后的样式 |
| :focus | 对象成为输入焦点时的样式 |
| :first-child | 对象的第一个子对象的样式 |
| :first | 对于页面的第一页使用的样式 |
Similarly, CSS has several built-in standard pseudo-objects for user style definition.
| 伪对象 | 用途 |
| :after | 设置某个对象之后的内容 |
| :first-letter | 对象内的第一个字符的样式设置 |
| :first-line | 对象内第一行的样式设置 |
| :before | 设置某个对象之前的内容 |
Except for the :link, :hover, :active, :visited pseudo-classes controlled by link styles, other pseudo-classes and pseudo-objects are not common in actual use.
2.6.9 Wildcard selector
Wildcarding refers to using characters to replace uncertain content. The so-called wildcard selector means that objects can be selected using a fuzzy formula. The CSS wildcard selector can use * as a keyword. The usage method is as follows:
* {
color: blue; All objects, including all id and class XHTML tags. When using the above selector for style definition, all objects in the page will apply color: blue; to set the font color.
Note:Priority of CSS selectors: Remember one sentence, the more precise the control, the higher the priority!
2.7 CSS data units
CSS provides many types of mathematical units to help designers define numerical values.
2.8 Apply CSS to web pages
2.8.1 Inline style sheet
Inline style sheet refers to encoding CSS styles Written in XHTML tags, similar to the following format:
...
We strongly oppose this. Rare style sheets only support the style attribute of XHTML tags and do not comply with the design principle of separation of presentation and content. Therefore this way of writing CSS should be completely avoided. This method is only suitable for temporary use when you need to debug CSS styles.
2.8.2 Internal Style Sheets
The similarity between internal style sheets and inline style sheets is that they both write CSS style code in the page. The difference is that the former can uniformly place the style sheet in a fixed location. Write the CSS code inside the
Internal style sheet is a primary application form of CSS style coding, but it is not a recommended writing method. It is only valid for the current page and cannot be executed across pages, so it cannot achieve the purpose of CSS code reuse.
2.8.3 External style sheet
External style sheet is the best form of CSS application, which places the CSS style code in a separate external file , and then called by the web page. Multiple web pages can call the same style sheet file, which can maximize code reuse and optimize the configuration of website files. This is the most recommended coding method.
In XHTML code, use under
tag to call external style sheet files. Set the link to stylesheet mode and use href="" to specify the path to the stylesheet file.2.9 Style priority issue
Since there are 3 different style sheet import methods and a wide variety of style selectors. Therefore, in CSS design, the issue of style priority cannot be ignored.
2.9.1 Writing priority
From the perspective of the location where styles are written, their priorities are:
That is to say, in the case of the same CSS definition, the style in the XHTML tag defined using style must take precedence over Style definitions written between
2.9.2 Selector priority
For id and class, the definition of id takes precedence over the definition of class.
2.9.3 Style inheritance
Child tags in XHTML will inherit some of the style characteristics of the parent tag. Of course, some styles will not be inherited, such as margin, padding, etc.
2.9.4 !important syntax
In two lines of CSS style definitions of the same type, the latter one is often executed first:
div {
background-color: red; property, so that the statements marked with !important are executed first:
div {
background-color: red; !important
background-color: green;
}
In this way, the background color of the div will be designed as red.
From the professional terminology of CSS, the issue of style priority can be called cascading and particularity. This is one of the reasons why the full name of CSS is cascading style sheet.
2.10 Code CommentsIn good CSS coding habits, comments are a very important part. The comments of its style code are: /*...*/
HTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AMThe function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.
The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AMThe future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.
HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AMThe roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.
The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AMThe future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.
HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AMThe roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.
HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AMHTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.
HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AMHTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.
From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AMHTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Atom editor mac version download
The most popular open source editor
SublimeText3 English version
Recommended: Win version, supports code prompts!
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
