"3" CSS simple style

CSS History

December 1996 CSS First edition was born.
May 1998 CSS2 officially released
2004 css2.1 Released
Release of CSS3 .... Not a time but a time period

CSS3 Module Introduction

• The basic properties of a Web page are defined in CSS1:
  fonts, colors, fillers, basic selectors

• Added advanced features on CSS1 based on CSS2
  Floating and positioning, advanced selectors (sub-selectors, adjacent selectors, Universal selectors)

• CSS3 follows a modular development. The release time is not a point in time, but a time period.
  

Introduction to CSS

Basic concepts of CSS
CSS is a cascading style sheet (cascading style Sheet)

The role of CSS

Used to control the appearance of the Web page, decorate and beautify the HTML tags, the implementation of the structure and form of separation.

Advantages of using Css+div
Using Css+div for Web page reconstruction relative to the traditional table page layout has the following 3 notable advantages
1: Separation of performance and content
2: Improve page browsing speed
3: Easy Maintenance and revision

How style sheets are defined

CSS styles are defined in the style sheet
how styles are defined
selector {Style 1: Style value 1; Style 2: Style value 2; ...}

Classification of Style sheets

1, in-line style sheet
Within HTML tags, use the Style property to define CSS styles.
such as: <p style=”color:#00ffdc;”></p>
2. inline style sheets add CSS to the

<style></style>标记声明的一种样式。　　语法如下：<style>　　/*这里写css内容*/</style>

3. externally defined CSS style sheet , linked to <link/> a style in the page through link markers.
Grammar:

<link href="style.css" rel="stylesheet"type="text/css"

4. Define the CSS style sheet externally, and link to a style in the page by importing.
Grammar:

<style>　　 @import url(); </style>

Precedence of Style sheets
Nearest principle

CSS Selector

1: Basic selector

CSS Selector
Global Selector
Set all labels to use the same style, denoted by *
Global selector Syntax: *{}
Tag Selector
Syntax for tag selector: p{}

class Selector
Class selector: Used to define the same style for a series of labels
Syntax for class selector:. classname{}

    先定义    .blue{color:#00000ff;}    然后再引用    

ID Selector
Syntax for ID selector: #idname {}

先定义 #green{color:#0000ff;}再引用样式<h2 id=“green” >一站式建店</h2>

Usage is similar to class, but note that the same ID name can only appear once in the same page

Priority and weight of selectors

 行内>id>class>element>*权重：行内/1000id/100,class/10, element/1,*/0

Basic style

Base style Properties
Color: Colors; Specifies color values for color word names such as (red) or hex-worthy colors such as (#ff0000) or for RGB-worthy colors such as (RGB (255,0,0));

Width: Set the width value of the element, the value is a number, px (pixels), EM (character),% (percent), the default is auto (automatically, the width value is automatically calculated in pixels by the browser)

Height: Set the height of the element, the value is a number, px (pixels), EM (character),% (percent), the default is auto (automatically, the width value is automatically calculated in pixels by the browser)

Background-color: background color; specify color values for color word names such as (red) or hex-worthy colors such as (#ff0000) or for RGB-worthy colors such as (RGB (255,0,0));

Inherit: Attribute values, most properties have the attribute value meaning to inherit.

Representation of color values

单词表示法  Redgreenblueyellowpinkorange…十六进制表示法#ff0000#00ff00#0000ff#000000  #ffffff#f00#0f0  #00f  #000#fffRgb表示法     (255,0,0)Rgba表示法     (255,255,0,0.3)

Note3

HTML: Structured CSS: Retouching and beautifying HTML tags--performance history: theThe first version of the year CSS. Easy decorate change color size filler, base selector -Internet cafes fire CSS3 new features: css<cascading style sheet> cascading style sheet CSS effect: To control the appearance of the Web page, decorate the htmlb label, realize the structure and the shape of the separation of CSS advantages: "Performance and content want to separate | Improve page browsing speed | Easy maintenance and revision "1: CSS uses CSS to define the method: "1"CSS should be written in CSS style table"2"CSS style should write syntax: selector {style1: style value; style2: Style values2;....} "Style sheet":/he "1": Inline style sheet style=""&LT;H2 style="Color:red">2": Internal style sheet (inline style sheet) <style type="Text/css"> H5 in {type="Text/css"} Do not thank the style span{color:pink;} </style> "disadvantage" structure and style not separated "benefits" can define the same style "3": External style sheet1: Linked style sheets (most commonly used) <link href="Css/index.css"Type="Text/css"Rel="stylesheet"/> "Advantages" to realize the separation and maintenance of the structure style is convenient2: Style sheet (almost unused) when importing <style type="Text/css"> @import URL (the path to the style sheet); </style> "style sheet precedence": Inline presentation table: Nearest principle (inline) highest external and internal vs. order "selector": Basic selector1"Global selector": *{style1: style value; style2: Style values2;...} "*" Marks all label features of the page: all tags in the page have the same style "2"Tag Selector": p{style1: style value; style2: Style values2;...}/**/css Comment Pros and cons: Same label with uniform style "3Question: The same tag has a uniform style | Different labels have a uniform style "category selector" after the definition is used:. classname{style1: style value; style2: Style values2;...} used: <p class="ClassName"></p> features: Defined once can be used multiple times "4"ID selector" is defined after the use of the definition;#idname {Style 1: style value; Style 2: Style value 2; ...}Use: <p id="Idname"></p> Features: The same ID name can only appear once in a page (ID unique) problem: A tag can introduce how to introduce multiple category selectors? Parallel introduction, with the earliest introduction of the main class="a B"General introduction of two intermediate spaces a label can I introduce both the category selector and the ID selector? Can the order be overwritten at the same time, with the ID selector as the primary four selector priority?#>.>eliement>*Selector priority: In-line style sheet >id>.class>element (Element) >* "Weight" +  - Ten 1 0Text-decoration:underline; "Color notation" <rgb> Word representation: Red green blue yellow pink purple white black orange gray Hexadecimal color representation method: (0-9) (A-F)0Minimum F Max#ff0000红色 #00ff00绿色 #0000ff蓝色 #ffff00黄色 #000000黑色 #ffffff白色 #ddddddd灰色 #f00RGB Labeling Method (0.255) Background-color:rgb (255,0,0); Red Background-color:rgb ( -, -, -); Gray Rgba notation (RGB Red green Blue a indicates transparency0-1Between values0.3|0.4 0= = Full Transparency1= = opaque) Background-color:rgba (255,0,0,0.1); Red Background-color:rgba ( -, -, -,1); Grey opacity:0.5You can also set the transparency, but affect the text "wide | High notation" witdth:500px (fixed unit); Width="50%"(fluid); Width:em/rem (relative unit) EM: Changes relative to the parent element REM: Changes relative to the root element; Basic style: Color:background-color:widht|height 
"Center"> What is written in the label is called: Tag properties "tag attribute value"h3{color:red; CSS Properties: CSS property values} can be set with CSS properties and do not use the tag attribute text-align:center; Cascading: Style sheets multiple pages can reference a CSS property that can be used by multiple labels

"3" CSS simple style