CSS syntax and xml association 1

title: Hello World

CSS syntax and xml association 1

Article directory

• CSS syntax and xml association 1
• • CSS selector
  • • element selector
    • ID selector
    • class selector
    • attribute selector
  • CSS properties
  • • display properties
    • Setting the font attribute
    • Border property settings
    • Layout property settings
    • Background attribute settings
    • Text attribute settings
  • CSS float
  • • Float
    • margin
    • clear float
  • CSS application styles
  • • external style sheet
    • internal style sheet

XML is
Storing structured data provides a powerful method, but it does not provide information about how the data is displayed (the structure of the data has nothing to do with the data representation). You can use CSS to control the presentation of elements in an XML document.

It consists of three parts: selector, property, and value. The basic syntax is as follows:

selector {<!-- -->
    property1: value;
    property2: value;
    property3: value;
}

Although CSS is not case-sensitive, in XML, names such as Name, NAME, and name will be treated as the same element by CSS, so it is impossible to set different attributes for these elements. Therefore, completely different names should be set to distinguish them.

CSS selector

Element selector

Selects all matching elements given a node name.

Syntax:elementname

Example:input matches any element.

element {<!-- --> style declaration }

ID selector

Selects a matching element based on the id attribute. It should be noted that each ID attribute in a document should be unique.

Syntax:#idname

Example:#toc matches the element with the ID “toc”.

#id attribute value {<!-- --> style declaration }

Class selector

Selects all matching elements based on the value of the given class attribute.

Syntax:.classname

Example:.index matches any element containing the class “index” in the class attribute.

.Class name {<!-- --> Style declaration }

Attribute selector

Selects all matching elements according to the given attribute.

Syntax:[attr] [attr=value] [attr~=value] [attr| =value] [attr^=value] [attr$=value] [attr*=value]

Example:[autoplay] Selects all elements with the autoplay attribute (regardless of the value of this attribute).

ID selector: chrome, firefox normal, IE does not support

Class selector: chrome, IE does not support it, firefox supports it.

Attribute selector: all supported

Element selector: all supported

CSS properties

Display properties

In CSS, the display attribute is usually used to control the text display effect of browser elements.

CSS stipulates that the display attribute cannot be inherited by other child elements, so if the display attribute of the parent element is set to block, it does not mean that it has set this attribute for the child element. But there are two special cases:

• If the display attribute of the parent element is set to none, the child elements actually inherit the attribute setting of none, because when the parent element is hidden, all child elements will be hidden at the same time;
• The inline attribute value of the parent element will also be inherited by the child element, because the IE browser displays element content inline by default.

Example:

1. Create a new xml file: employee.xml, with the following content:

   <?xml version="1.0" encoding="GB2312"?>
   <?xml-stylesheet type="text/css" href="test01.css"?>
   <Employees>
       <Employee>
           <name>Zhang Tao</name>
           <sex>Male</sex>
           <age>18</age>
           <department>Development Department</department>
       </Employee>
       <Employee>
           <name>Li Xueping</name>
           <sex>Female</sex>
           <age>34</age>
           <department>Sales Department</department>
       </Employee>
   </Employees>
   

2. Create a new css document: employee.css, with the following content:

   Employee {<!-- -->
       display: block;
       margin-top: 16pt;
   }
   name {<!-- -->
       font-weight: bold;
   }
   Employee#1 {<!-- -->
       font-size: 25pt;
       font-style: italic;
   }
   Employee#2 {<!-- -->
       font-size: 20pt;
       font-style: bold;
   }
   department {<!-- -->
       display: none;
   }
   

   

Setting the font attribute

< /table>

Setting border attributes

• border-style: Set the style around the border;
• none, dotted, dashed (the border line is dotted), solid, double, groove (the border line is set to have a 3D effect), inset (the border line is set to have a sinking effect), outset (the border line is set to have a floating effect).
• border-color:
• The value is the English name or RGB value of the color. By default, the border and element have the same color;
• border-width:
• thin, medium, thick

Setting layout attributes

• Positioning attributes: The position, width and height of elements can be set through the positioning attributes of CSS;
• top, bottom, left, width, height, right;
• margin attribute: By default, the margin of an element in CSS is 0;
• margin (set the distance between the upper, lower, left and right boundaries of the element at the same time), margin_top, margin_bottom, margin_left, margin_right;
• padding attribute: After the border attribute is set, the distance between the element and the border may be too close. By setting the padding attribute, the distance between the border and the element will not be too close;
• padding, padding_top, padding_bottom, padding_left, padding_right;

Setting background attributes

Setting text attributes

In CSS, the spacing and line height of element text, converting letters to upper and lower cases, and adding various modifications to text, etc.

CSS float

Float

CSS Float will move an element to the left or right, and its surrounding elements will also be rearranged.

Float is often used for images, but it is also very useful in layout.

xml:

<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/css" href="test01.css"?>
<Employees>
    <div></div>
    <p>
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
    </p>
</Employees>

css:

div{<!-- -->
    display: block;
    width: 150px;
    height: 100px;
    border-radius: 5px;
    background-color: rgb(207, 232, 220);
    padding: 1em;
}
p{<!-- -->
    font-size: 20px;
}

To make the box float, add the float and margin-right attributes below the rule div:

div{<!-- -->
    float: left;
    margin-right: 15px;
    width: 150px;
    height: 100px;
    border-radius: 5px;
    background-color: rgb(207, 232, 220);
    padding: 1em;
}

Let’s consider how floats work – a floated element (a

div{<!-- -->
    float: left;
    margin: 10px;
    width: 150px;
    height: 200px;
    border-radius: 5px;
    background-color: rgb(207, 232, 220);
    padding: 1em;
}
#t1{<!-- -->
    font-size: 20px;
}

#t2{<!-- -->
    display: block;
    background-color: rgb(79, 185, 227);
    color: #fff;
}

<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/css" href="test01.css"?>
<Employees>
    <div></div>
    <p id="t2">
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
    </p>
    <p id="t1">
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
        Here is some text. Here is some text. Here is some text.
    </p>
</Employees>

#t1{<!-- -->
    font-size: 20px;
    display: block;
    clear: both;
}

<?xml:stylesheet type="text/css" href="***.css"?>

<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/css" href="test01.css"?>
<Employees>
    <Employee>
        <name>fwt</name>
        <sex>Male</sex>
        <age>21</age>
        <department>Development Department</department>
    </Employee>
</Employees>

<?xml-stylesheet type="text/css"?>
<Root element xmlns:HTML="URL">
    <HTML:STYLE>
        <!--CSS content-->
    </HTML:STYLE>
    <!--XML sub-element-->
</root element>

<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/css"?>
<Employees xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://www.w3.org/Profiles/XHTML-transitional ">
    <HTML:STYLE>
        name{
        font-weight:bold
        }
        sex{
        font-size:200px
        }
        age{
        font-style:italic
        }
    </HTML:STYLE>
    <Employee>
        <name>fwt</name>
        <sex>Male</sex>
        <age>21</age>
        <department>Development Department</department>
    </Employee>
</Employees>