Displaying XML documents using CSS

selector
{
   Attribute 1: Attribute value 1;/*Declaration*/
   Attribute 2: Attribute value 2;
   ...
   Attribute n: attribute value n;
}

productname
{
   font-family:Arial;
   font-size:20pt;
   font-weight:bold;
}

.className{property: value;}
//The example is as follows
.authorname{color: blue;}

#idName{property: value;}
//The example is as follows
#bookname{color: red;}

p ~ span{
color: blue;
}

tag will not be selected.

13. Universal sibling selector

The universal sibling selector uses the tilde (the universal sibling combinator) to select all elements before the first selector without requiring them to be direct siblings of the first selector.

CSS properties

Font properties

The font property is the most commonly used CSS property, and choosing the right font can have a huge impact on the user experience of your website. By setting the value of the font attribute, you can change the display mode of the font, including the type, style, size, etc. of the font.

Font-family attribute: This attribute is used to specify the font type. The default is the font determined by the browser. If the name has spaces, the attribute value must be enclosed in double quotes. As shown in the following example.

font-family:Arial;
font-family:"Time New Roman";

font-style attribute: This attribute is used to specify italic text. The attribute value can be normal (text is displayed normally), italic (text is displayed in italics) or oblique (text is italic, very similar to italic, but not commonly used), refer to the following example of.

font-style:italic;

font-style:normal;font-variant attribute: This attribute can set the uppercase and lowercase status of English fonts when printing. The default value is normal (no change in uppercase and lowercase). There is also a value of small-caps, which means uppercase is used when displaying. Letters represent lowercase letters. Please refer to the following examples.

font-variant:small-caps;

Font-weight attribute: The value of this attribute is used to set the thickness of the font. Commonly used attribute values are bold (bold) and normal (default value: standard font). You can also use numbers to indicate the thickness of the font. Please refer to the example below.

font-weight:bold;
font-weight;600;

font-size attribute: The value of this attribute is used to set the font size. Please refer to the example below.

font-size:12pt;

Text attribute

text-align attribute: This attribute is used to set the alignment of text. The value can be left (text is left aligned), right (text is right aligned), center (text is centered) or justify (text is aligned at both ends). Please refer to the following examples.

text-align:center;

When the text-align property is set to “justify”, each line will be stretched so that each line has the same width and the left and right margins are straight.

text-indent attribute: This attribute is used to set the indent of the first line of text. The unit is pixels (px) or points (pt). Please refer to the example below.

text-indent:16pt;

text-transform attribute: This attribute is used to specify whether to make all letters in the text uppercase, all lowercase, or the first letter is uppercase. The corresponding values are uppercase, lowercase, and capitalize. Please refer to the example below.

text-transform:uppercase;

text-decoration attribute: This attribute is used to set whether to add decoration to the text. The attribute value can be none (without any underline), underline (with underline), overline (with underline), line-through (with any underline). strikethrough) or blink (make text blink). Please refer to the example below.

text-decoration:underline;

vertical-align attribute: This attribute is used to set the vertical alignment of text. The value of the attribute can be baseline, sub, super, top, text-top, middle, bottom or text-bottom. Please refer to the example below.

vertical-align:baseline;

line-height attribute: This attribute is used to set the line spacing of text. The attribute value is a specific numerical value. Please refer to the example below.

line-height:1.5;

Border attribute

border-width sets the border width

border-color border color

border-color:red green #000 yellow;(top right, bottom left)

border-style: solid (realization)/dashed (dashed line)/double (double line)/dotted (dotted line) border line style\\
\\
border abbreviation (arbitrary arrangement)

Note: When the width and height are 0, the border will be square.

Mouse style

When the mouse moves to different places, when the mouse performs different functions, and when the system is in different states, the shape of the mouse will change. The values of the cursor attribute are as follows, and the default value is default.

1.Hand

The cursor uses a hint (a finger) to indicate that there is a connection

cursor: hand;

2. Wait/Hourglass

The cursor indicates that the current program is busy (usually a table or an hourglass)

cursor: wait;

3.Help

The cursor indicates that help is available at the current location (usually a question mark or a balloon)

cursor: help;

4. Prohibited

cursor: progress;

5. Unable to release

cursor: no-drop;

6.Writing/Editing

The cursor indicates that the current location is text content

cursor: text;

7. Movable objects

Cursors imply that something should be moved

cursor: move;

8. Crosshair

The cursor appears as a crosshair

crosshair;

cursor: n-resize;

9. Change size upward (North)/Edge can move upward (North)

cursor: n-resize;

10. Change size downward (South)/edge can move downward (South)

cursor: s-resize;

11.Processing

cursor: progress;

12. System default

Default cursor state (usually an arrow)

cursor: default;

Color and background properties

In CSS, you can set the foreground color of an element through the color attribute. To set the background color of an element, you need to use the background-color attribute, which represents the color method.

1. Name representation

Directly use the English name of the color to express it. Commonly used colors are black (black), blue (blue), gray (gray), green (green), orange (orange), purple (purple), red (red), silver ( Silver), white (white), yellow (yellow). Please refer to the example below.

color:red;
background-color:blue;

3. “#RGB” notation

R, G, and B represent the three primary colors of red, green, and blue respectively. The value of each color is represented by a two-digit hexadecimal number, that is, from 00 to FF, there are a total of 256 different values. The higher the value, the lighter the color. For example, #FFFFFF represents white, and #000000 represents black.

background-image attribute: This attribute is used to define the background image. The default value is none. When you want to specify a background image, set the property value to the URL of the image. As follows.

background-image;URL(“animal.jpg”);

background-repeat attribute: This attribute is used to specify whether the background image tiles the background by recurring. Its value can be repeat (set the background image to completely fill the selected element), repeat-x (set the background image to fill in the horizontal direction) The selected element), repeat-y (sets the background image to fill the selected element in the vertical direction) and no-repeat (sets the background image not to tile). The default value is repeat. Please refer to the example below.

background-repeat:repeat-y;

background-position attribute: After setting the background image, you can use the background-position attribute to specify the position of the background image. The value can be a percentage, or top, center, bottom, left, and right. Please refer to the example below.

body{
     background=image:url("logo.png");
     background-position:100% center;
     background-repeat:no-repeat;
}

How text is displayed

Text display mode refers to the form in which text content is displayed in the browser. There are four ways to display text: block display, line display, list display and no display, which can be set through the display attribute. Their values are as follows.

block: Block display mode means that text content is displayed in blocks. The size of the block depends on the size of the text content, which is left-aligned by default. At the same time, you can also set the position and size of the block through the position, width and height properties. Please refer to the example below.

discretion{
      display:block;
      background-color:silver;
      position:absolute;
      width:30px;
      height:60px;
}

Line: Line display mode means that the text content is displayed in lines, and the contents of each mark are connected end to end in order.

list-item: List display mode means that text content is displayed in a list in the browser. In list display mode, you can specify the appearance of bullets through the list-style-type attribute. Possible values are disc (disk), circle (circle), square (square), decimal (decimal number), lower-roman (lowercase Roman numerals), upper-roman (uppercase Roman numerals), lower-alpha (lowercase English letters) and upper-alpha (uppercase English letters), etc. Please refer to the example below.

price{
     display:list-item;
     list-style-type:circle;
}

none: Do not display the content of the element.

floating

1. Characteristics of floating elements

(1) Any element can be floated

(2) Floating elements are separated from the standard flow and do not occupy the space of the standard flow. Therefore, it will affect the position of the standard flow element behind the floating element.

(3) If an element in a box floats, all elements should be floated, otherwise there will be many bugs

(4) Multiple floating elements are aligned at the top, and there is no gap between elements with the same floating direction. If the width of the parent element cannot accommodate multiple floating elements, arrange them on a new line.

(5) Floating elements have the characteristics of inline blocks

(6) If the width of a floating element is not set, the width is the width of the content.

2. Floating will not suppress the text

The floating box will suppress the standard flow box, but the text in the standard flow box will not be suppressed and will wrap around the floating box. Because the original purpose of floating is to create a text wrapping effect.

3. Clear floats

Because floating boxes do not take up space, and sometimes it is inconvenient for the parent box to give a height, the height of the parent box is 0, which will affect subsequent standard flow elements.

So we need to clear the float. After clearing the float, the parent box will automatically detect the height based on the height of the child box. If the parent box has a height, it will not affect subsequent standard flow elements.

The syntax for clearing floats is: clear: both;, which clears the influence of floats on the left and right sides. The principle is to close the floats and close the floating boxes inside the parent box without affecting the boxes outside the parent box.

Positioning

Positioning is also a web page layout method, which moves the box to a certain position according to the positioning method. Positioning = positioning mode + edge offset. The positioning mode specifies the positioning method of a box (specified through the positon attribute), and the edge offset specifies the size of the movement. The four attributes are as shown in the following table

Edge offset property	Description	Example
top	Top offset, specifies the distance of the box relative to the upper edge of a box	top: 10px;
right	Right offset, specifies the distance of the box relative to the right line of a box	right: 10px;
bottom	Bottom offset, specify the distance of the box relative to the lower edge of a box	bottom: 10px;
left	Left offset, specifying the box relative to a certain box Distance from left line	left: 10px;

Special features of positioning:

(1) Add absolute positioning or fixed positioning to inline elements, and you can directly set the width and height
(2) Add absolute positioning or fixed positioning to block-level elements. The width and height default to the width and height of the content in the box.
(3) Like floating, absolutely positioned or fixedly positioned boxes will not cause the problem of margin collapse.

1. Static positioning (static)

• The default positioning method of the box, that is, no positioning
• Specified via positon: static;, no edge offset attribute

2. Relative positioning

Features:

1. Move relative to previous position
2. After the move, the original position continues to be occupied in the standard flow manner.
3. The moved box presses other boxes

3. Absolute positioning (obsolute)

Features:

(1) When moving a box, if there is no ancestor box, or the ancestor box is not positioned, it will be offset relative to the edge of the browser (non-viewport)
(2) If the ancestor box has positioning (relative, absolute, fixed), it will be offset relative to the edge of the nearest ancestor box. Therefore, the parent box is usually positioned relatively but not offset. This does not cause the parent box to move, but also allows the child box to form an absolute position.
(3) The absolutely positioned box does not occupy its original position, but will suppress other boxes.

4. Fixed positioning (fixed)

Features:

1. Fixed-position boxes are fixed at a certain position in the browser viewport, suppressing other boxes. When the browser scrolls up and down, the position of the box does not change
2. Edge offsets move relative to the edges of the viewport
3. Fixed-positioned boxes do not occupy their original positions
4. Fixed positioning boxes need to have width

5. Sticky positioning (sticky)

At first, the box is equivalent to the standard flow box. When one of top, right, bottom, and left (there must be and only one) reaches the set value, it is converted into a fixed positioning box with an offset of that value.

6. Other features of positioning

z-index positioning stacking order

When using positioning layout, there may be problems with multiple positioned boxes overlapping. If you want a certain positioned box to be displayed on top, you can use z-index: number;

The default z-index value is auto(0), which means that in writing order, the later ones come first.
Only positioned boxes have z-index attributes
The value can be positive, negative, or 0. The larger the value, the higher the box is.

How to combine XML and CSS

There are three forms of calling CSS from XML documents: referencing an external CSS file, embedding CSS language into the XML document, and applying both internal CSS and external CSS at the same time.

1. Call external style sheet files

Calling an external style sheet file means that the XML file itself does not contain style information, but defines the presentation form of the XML file by referencing an external CSS file. The CSS style sheet file is a text file with the extension .CSS. You can add the following processing instructions at the beginning of the XML document to link the specified CSS style sheet. Its format is as follows.

Among them, there are the following points:

(1) The

(2) type=”text/css” means using a CSS type style sheet.

(3) Href= is used to specify the path of the style sheet file.

2. Define CSS styles inside the XML document

Applying CSS inside an XML document refers to embedding CSS styles directly inside the XML document. But it is not recommended to define CSS styles inside XML documents. Because this method requires repeated definition of styles in different XML documents, and a large number of CSS styles are nested in the XML document, which will cause the XML document to be too large. If the website style needs to be modified, each page must be opened in sequence and modified repeatedly, which is not conducive to software engineering. If you want certain CSS styles to be valid only for a certain page and not affect the entire site, you should choose to use internal CSS internal definitions.

The following explains how to write CSS statements directly inside the XML document through specific procedures.

<?xml version="1.0">
<?xml-stylesheet type="text/css"?>
<persons xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
  <HTML:style>
     person{
         display:block;
         font-size:25pt;
         color:red;
     }
     </HTML:style>
     <person>
         <name>Zhang San</name>
         <sex>male</sex>
         <age>25</age>
     </person>
     <person>
         <name>Li Na</name>
         <sex>female</sex>
         <age>24</age>
     </person>
</person>

In addition, there is another way to write CSS statements inside the XML document, which is to use the style attribute to define the style within the tag.

<?xml version="1.0"encoding="utf-8"?>
<?xml-stylesheet type="text/css"?>
<student>
  <name style="display:block;font-size:18pt;font-weight:bold">Li Xiaolin
    <sex style="display:line;font=size:12pt;font-style:italic">Male</sex>
    <birthday style="display:line;font-size:10pt;font-weight:bold">December 22, 1998</birthday>
  </name>
  <name style="display:block;font-size:18pt;font-weight:bold">Xiaoxiao
    <sex style="display:line;font=size:12pt;font-style:italic">Female</sex>
    <birthday style="display:line;font-size:10pt;font-weight:bold">August 10, 1999</birthday>
  </name>
</student>

3. Use mixed methods to specify styles

The third method is to combine internal CSS styles and external CSS styles. In this case, if there is a conflict between the two styles, the internal CSS style takes precedence. For example, if the font size defined in the external CSS file is 25pt, and the font size defined in the internal CSS style is 20pt, then the text size should be 20pt.

4. Use multiple style sheet files

A style sheet file can be called by multiple XML files. Similarly, an XML file can also call multiple style sheet files at the same time. For example, there are two CSS files in the following example: 01.css and 02.css. Among them, the code of the 01.css file is as follows.

name
   {
      display:block;
      font-size:18pt;
      font-weight:bold;
   }

The code of 02.css file is as follows.

price
    {
       display:line;
       font-size:16pt;
       font-style:italic;
    }
    made Time
    {
       display:line;
       font-size:9pt;
       font-weight:bold;
    }

The document below calls both CSS files.

<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="01.css"?>
<?xml-stylesheet type="text/css" href="02.css"?>
<goods>Product list:
   <name>
      Xiaomi mobile phone
      <price>1999 yuan/unit</price>
      <madeTime>2020.09.28</madeTime>
   </name>
   <name>
      Apple IPad
      <price>5999 yuan/unit</price>
      <madeTime>2020.10.10</madeTime>
   </name>
</goods>

CSS display rules

When you open an XML file with a browser, the browser will display the content contained in the element according to the “order” in which the elements appear in the XML file, and use the corresponding style rules of the element in CSS. If an element does not have a corresponding style rule in CSS, the browser will use the default rules to display the content contained in the element.

Normally, the display format attribute set on an element in CSS will affect all sub-elements contained in that element, unless these sub-elements have been reset to different format attributes. Therefore, if no specific style rules are set for a child element, the child element will automatically inherit the rules of the parent element.

If there are no style rules set for an element in the style sheet, and there are no style rules for the parent element to inherit, the browser will use its own default rules for display.

This is illustrated below with specific examples.

The source code of the style sheet file gongshi.css is as follows.

math
{ display:block;
   font-size:12pt;
   font-style:italic;
   background-color:rgb(227,228,229);
}
chemistry
{ display:block;
   font-size:12pt;
   font-style:underline;
   background-color:cyan;
}
sub
{ display:line;
   font-size:8pt;
   font-style:italic;
   vertical-align:super;
}
low
{ display:line;
   font-size:8pt;
   vertical-align:bottom;
}

XML file gongshi, the source code of xml is as follows.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="gongshi.css" type="text/css"?>
<root>
  <math>
     Sum of squares formula: (A + B)<sup>2</sup>=A<sup>2</sup> + 2AB<sup>2</sup>
  </math>
  <chemistry>The molecular formula of water: H<low>2</low>O</chemistry>
  <chemistry>The molecular formula of carbon dioxide: CO<low>2</low></chemistry>
</root>

The basic idea of XML regarding document browsing is to define data and data display separately. The XML document itself does not involve the specific display method of various data. The display of the document is described through an external style sheet.