0 basic web Front end-css

CSS refers to cascading style sheets (cascading style Sheets), a standard layout language that controls the size, color, and layout of elements. CSS has been invented by the consortium to replace table-based layouts, frameworks, and other non-standard performance methods. Styles define how HTML elements are displayed; Styles are typically stored in style sheets, and external style sheets are stored in CSS files.
CSS can solve the duplication of style definition in HTML code, improve the maintainability of later style code, and enhance the function of the Web page display effect. Simple sentence: CSS separates the content of the Web page from the display style, which improves the display function.
1, CSS Basic part
Stacking order
What style is used when the same HTML element is defined by more than one style? Generally, all styles are stacked in a new virtual style sheet according to the following rules, where the number 4 has the highest precedence.
Browser default settings
External style sheet
Internal style sheet (inside the Inline style (inside HTML elements)
CSS Basic syntax
A CSS rule consists of two main parts: a selector, and one or more declarations. selector {declaration1; declaration2; ... declarationn}
Selectors are usually HTML elements that you need to change the style. Each declaration consists of an attribute and a value. The property is the style property (style attribute) that you want to set. Each property has a value. Attributes and values are separated by colons. selector {Property:value}
The CSS is not sensitive to casing. However, there is one exception: class and ID names are sensitive to capitalization if they involve working with HTML documents. Interested in understanding the Web front-end can add me this group: The front is 487, the middle is 425, the back is 429, we have a great God every night to explain, really interested friends can add group, if not sincere do not disturb
CSS Advanced Syntax
Selectors are grouped so that you can group selectors so that the grouped selectors can share the same declaration. Separate the selectors that need to be grouped with commas. In the following example, we group all the header elements. All the caption elements are green.
1 H1,h2,h3,h4,h5,h6 {
2 Color:green;
9 ·
CSS Derivation selectors
You can make the markup more concise by defining the style based on the context of the element in its place. In CSS1, selectors that apply rules in this way are called context selectors (contextual selectors) because they rely on context to apply or avoid a rule. In CSS2, they are called derived selectors, but whatever you call them, they work the same way.
A derived selector allows you to determine the style of a label based on the context of the document. By using derived selectors reasonably, we can make the HTML code neater. For example, if you want the strong element in the list to become italic instead of the usual bold, you can define a derived selector that only works on the strong tag in the LI tag:
1 Li Strong {
2 font-style:italic;
3 font-weight:normal;
4}
CSS ID Selector
The ID selector can specify a specific style for an HTML element that is labeled with a specific ID. The ID selector is defined as "#". The following two ID selectors, the first one can define the color of the element to be red, the second defines the color of the element as green:
1 #red {color:red;}
2 #green {color:green;}
In the following HTML code, the P element with the ID property of red is shown in red, and the P element with the id attribute green is shown in the blue. Note: The id attribute can only appear once in each HTML document.
1 <p id= "Red" > This paragraph is red. </p>
2 <p id= "Green" > This paragraph is greenish. </p>
ID selector and Derivation selector
In modern layouts, ID selectors are often used to establish derived selectors.
#sidebar p {
Font-style:italic;
Text-align:right;
Margin-top:0.5em;
}
A selector, multiple usages
This ID selector can be used many times as a derived selector, even if the element labeled Sidebar only appears once in the document:

Haha is the ID of the form
#haha {
Color:green;
}
#haha Input {
Color:blue;
}
#haha Select {
color:red;
}

The above style will only be applied to the contents of the ID that is within the haha element. For example, in a form with id haha, the font color in the input tag is red in the Blue,select label, and the other color is green.
CSS class Selector
In CSS, the class selector is displayed as a dot:. Center {Text-align:center}
In the example above, all HTML elements that have the center class are centered. In the following HTML code, both the H1 and P elements have the center class. This means that both will adhere to the rules in the. Center selector.

1

2 This heading'll be center-aligned
3 4
5 <p class= "center" >
6 This paragraph'll also becenter-aligned.
7 </p>

Note: The first character of the class name cannot use a number! It doesn't work in Mozilla or Firefox.
Do we use the class selector or the ID selector when we use it? Note that the ID selector is used once, and only once, if there are multiple ID entries that match the ID selector, only the first one will work. Unlike class selectors, ID selectors cannot be used in conjunction because the ID attribute does not allow a space-delimited list of words. Similar to a class, you can select an ID independently of the element. In some cases, you know that a particular ID value appears in your document, but you do not know which element it will appear on, so you want to declare a separate ID selector. For example, you might know that there is an element with an ID value of mostimportant in a given document. You don't know whether the most important thing is a paragraph, a phrase, a list item, or a section heading. You only know that each document will have one of the most important things, it may be in any element, and only one can appear. In this case, it is particularly appropriate to use the ID selector.
CSS Property Selector
Sets the style for the HTML element with the specified property. You can set the style for the HTML element that owns the specified property, not just the class and ID properties. The property selector is especially useful when styling a form that does not have a class or ID:
[Attribute] {
color:red;
}
The above code will be for <p attribute= "" > I am a paragraph </p> has a role.
Creation of CSS
How to insert a style sheet, when a stylesheet is read, the browser formats the HTML document according to it. There are three ways to insert a style sheet: an external style sheet, an inner style sheet, and a restrained style.
External style sheet
An external style sheet is an ideal choice when the style needs to be applied to many pages. With an external style sheet, you can change the appearance of the entire site by changing a file. Each page uses <link> tags to link to the style sheet. <link> tags at the head of (document):
1 2 <link rel= "stylesheet" type= "Text/css" href= "Mystyle.css"/>
3 The browser reads the style declaration from the file mystyle.css and formats the document according to it. External style sheets can be edited in any text editor. The file cannot contain any HTML tags. Style sheets should be saved with a. css extension. Here is an example of a style sheet file:
1 hr {Color:sienna;}
2 p {margin-left:20px;}
3 body {Background-image:none;}
Internal style sheet
An internal style sheet should be used when a particular style is required for a single document. You can use the <style> tag to define an internal style sheet at the head of the document, just like this:

<style type= "Text/css" >
hr {Color:sienna;}
p {margin-left:20px;}
body {background-image:none;}
</style>

inline style
Inline styles lose many of the benefits of stylesheets because of the mix of performance and content. Use this method with caution, such as when the style only needs to be applied once on one element. To use inline styles, you need to use style properties within the relevant tags. The Style property can contain any CSS properties. This example shows how to change the color and left margin of a paragraph:
1 <p style= "color:sienna;margin-left:20px" >
2 This is a paragraph
3 </p>

HTML+CSS Program Examples

<title>html and CSS Learning </title>

<!--referencing external file methods
<link type= "Text/css" rel= "stylesheet" href= "Body.css"/>
-

<!--write CSS directly in the head--
<style type= "Text/css" >

/* ID Selector */
#haha {
Color:green;
}
#haha Input {
Color:blue;
}
#haha Select {
color:red;
}

/* Property Selector */
[Attribute] {
Color:brown;
}

/* Class Selector */
. p_class {
color:red;
}

/* Property Selector, only the type in input has a role in text */
Input[type= "Text"] {
Background-color:yellow;
}
</style>

<body>

<p> I was a paragraph </p>
<p attribute= "" > I am a paragraph </p> <!--property Selector--
<p class= "P_class" > I am a paragraph </p> <!--class Selector--

<!--ID Selector--
<form id= "haha" action= "/example/html/form_action.asp" method= "POST" >
User name: <input type= "text" name= "username"/> <br/>
Password: <input type= "password" name= "password"/> <br/>
Uploaded: <input type= "file" name= "Upload_file"/> <br/>
Image: <input type= "image" Original= "pic.jpg" width= "40px" height= "20px"/> <br/>
Radio: <input type= "Radio" name= "Sex" checked= "checked" value= "man"/> Male <input type= "Radio" name= "Sex" value= " Women "/> Women's <br/>
Multiple selection: <input type= "checkbox" Name= "Sex2" checked= "checked" value= "man"/> Male <input type= "checkbox" Name= "Sex2" value= "Women"/> Women <br/>
City: <select name= >
<option value= "NULL" >--Please select--</option>
<option value= "Beijing" > Beijing </option>
<option value= "Shanghai" > Shanghai </option>
<option value= "Hangzhou" > Hangzhou </option>
</select> <br/>
Message board: <textarea>
</textarea> <br/>
<input type= "Submit" value= "commit"/> <input type= "reset"/>

Web Front end Learning Communication Group 21 598399936

0 basic web Front end-css