First entry Web knowledge Point (ii)

Source: Internet
Author: User
Tags html form object object

CSS selectors (seven types)
① element Selector (type selector)
Select any HTML element on the page that matches the selector, regardless of the location of those elements in the document tree. The target is each instance of an element.
② class Selector (class Name {property: value;})
is used to select any HTML element that has a class attribute, regardless of its location in the document tree.
③id Selector
Similar to the class selector, it is used to select any HTML element of an ID attribute, regardless of the location of those elements in the document tree. The main difference from the class selector is that the same property ID value can appear only once on the same page. The same class property value can appear multiple times on the same page.
④ contains selectors
Used to select the descendant elements of an element in the document tree.
⑤ Wildcard Selector
Used to select all elements.
⑥ Pseudo class Selector
Allows us to format some items that are not in the document tree.
Use pseudo-class selectors to format hyperlinks <a> four different states of elements in different ways;
* A:link is a selector for links that have not been visited
* a:visited is a selector used in a link that has been visited
* A:hover is a link selector on which the mouse cursor is placed
* A:active is a selector on the link that gets the focus (such as clicked)
Because of the specificity of the pseudo-class selector, a selector that appears last in the style sheet is used when conflicts are used. Memory a love or hate
⑦ pseudo Element Selector
Allows us to format some information that is not in the document tree.
There are two types of support in the pseudo-element selector that are supported by all browsers:
* First-line selector for the first line of an element
* First-letter a selector for the first letter of an element

Three differences between inline and block-level elements

Features of inline elements:

1. And other elements are on one line;
2. High, the line height and the margin and the inner margin part can be changed;
3. Width is only relevant to the content;
4. Inline elements can only hold text or other inline elements.
5. Inline element setting width is invalid, height is invalid (can be set line-height), margin is invalid, padding up and down


Block-level elements

1. Always start on a new line and occupy a whole line;
2. Height, row height, and margin and internal margins can be controlled;
3. Broadband is always the same as the browser width, regardless of content;
4. It can accommodate inline elements and other block elements.

Second, in-line elements are converted to block-level elements

Display:block (the literal representation is set to block level)

Three, inline elements and block-level elements

Block-level element list
<address> Define Addresses
<caption> Define table headings
Defining entries in the <dd> definition list
<div> defining partitions or sections in a document
<dl> definition List
<dt> defining items in a list
<fieldset> Defining a Frameset
<form> Create an HTML form
<legend> element defines a caption for the fieldset element
<li> Label Definition list items
<noframes> display text for browsers that do not support frames, inside the frameset element
<noscript> Define alternative content when the script is not executed
<ol> defining an ordered list
<ul> Defining unordered Lists
<p> Label definition Paragraphs
<pre> define pre-formatted text
<table> Tag Definition HTML table
<tbody> Label table Body (body)
Standard cells in the <td> table
<tfoot> define a footer for a table (footnote or table note)
<th> Define table header cells
<thead> table header for Label definition table
<tr> define rows in a table
In-line element list
<a> tags can define anchors
<abbr> represents an abbreviated form
<acronym> Define only initials
<b> Font Bold
<bdo> overrides the default text orientation
<big> Large Font Bold
<br> line break
<cite> references for definition
<code> Defining computer code text
<dfn> Define a definition project
<em> defined as the content of emphasis
<i> Italic text effects
embed an image into a Web page
<input> input Box
<kbd> Defining keyboard text
<label> tags defining callouts (tags) for input elements
<q> define short references
<samp> Define Sample text
<select> Create a single or multi-select menu
<small> Render Small font effects
<span> inline elements in a combined document
<strong> a stronger emphasis on the content of the tone
<sub> Define Subscript Text
<sup> Defining superscript text
<textarea> multiple lines of text input controls
<tt> Typewriter or equal-width text effects
<var> Defining variables

Variable element list--variable element to determine whether the element is a block element or an inline element based on context contexts
<button> buttons
<del> define text that has been deleted in the document
<iframe> Create an inline frame with another document (inline frame)
<ins> tags define text that has been inserted into a document
<map> client image mapping (i.e. hot zone)
<object>object Object
<script> Client Script

First entry Web knowledge Point (ii)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.