css学习思维导图模板_ProcessOn思维导图、流程图

使用css

inline

text

internal

external

Selectors, Properties, and Values

selector

HTML Tag or a element name

like a、p，mySelector

properties

For each selector there are “properties” inside curly brackets

like color，background-color

value

A value is given to the property following a colon

body { font-size: 14px; color: navy; }

Lengths and Percentages

px

a unit of pixels

em

the unit for the calculated size of a font. So “2em”, for example, is two times the current font size

pt

the unit for points, for measurements typically in printed media.

%

the unit for… wait for it… percentages

when the value is zero ，you needn't use the unit state

color

name

like red，color:red

RGB (red/green/blue) value

color:rgb(255,0,0)

hex code

color : #ff0000 equals with color:#f00

text

font-family

So font-family: arial, helvetica, serif, will look for the Arial font first and, if the browser can’t find it, it will search for Helvetica, and then a common serif font

Note: if the name of a font is more than one word, it should be put in quotation marks, such as font-family: "Times New Roman".

font-size

the size of font,the title should use the HTML Tag h1-h6

font-style

states whether the text is italic or not.

font-style: italic or font-style: normal.

font-weight

this is used as font-weight: bold or font-weight: normal but other values are bolder, lighter, 100, 200, 300, 400 (same as normal), 500, 600, 700 (same as bold), 800 or 900.

text-decoration

text-decoration: underline, does what you would expect.

text-decoration: overline, places a line above the text.

text-decoration: line-through ,puts a line through the text

text-transform

text-transform: capitalize turns the first letter of every word into uppercase.

text-transform: uppercase turns everything into uppercase.

text-transform: lowercase turns everything into lowercase.

text-transform: none I’ll leave for you to work out.

text-space

line-height

sets the height of the lines in an element,such as a paragraph

text-align

align the text inside an element to left, right, center, or justif

letter-spacing

the space between letter,the value can a number or normal

word-spacing

the space between word,the value can a number or normal

text-indent

indent the first line of a paragraph,you can given the value or percentage

the normal style

Margins and Padding

Margins has for properties：margin-top, margin-right, margin-bottom, margin-left

Padding also has four properties ：padding-top, padding-right, padding-bottom and padding-left

The Box Model

Margins, padding and borders are all part of what’s known as the Box Model. The Box Model works like this: in the middle you have the content area (let’s say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this

Border

border-style

solid, dotted, dashed, double, groove, ridge, inset and outset

border-width

border-color

you can only set one side the style ，such as border-left，border-right，border-top，border-buttom，when the properties is border ，it will be give four side style

Class and ID Selectors

class Selector 

a class selector is a name preceded by a full stop (“.”)

ID Selector

ID selector is a name preceded by a hash character (“#”)

different

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { /* whatever */ } will only be applied to paragraph elements that have the class “jam”.

Grouping and Nesting

Two ways that you can simplify your code — both HTML and CSS — and make it easier to manage.

Group

You can give the same properties to a number of selectors without having to repeat them.

example

.bg-color{       color：red } .hd-color{       color:red } you can make them a group like: .gbcolor, .hd-color{        color:red }

Nesting

If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

example

#top { background-color: #ccc; padding: 1em } #top h1 { color: #ff0; } #top p { color: red; font-weight: bold; }

This removes the need for classes or IDs on the p and h1 tags if it is applied to HTML that looks something like this:

<div id="top"> <h1>Chocolate curry</h1> This is my recipe for making curry purely with chocolate Mmm mm mmmmm </div>

meaning

This is because, by separating selectors with spaces, we are saying “h1 inside ID top is colour #ff0” and  “p inside ID top is red and bold”.

Pseudo Classes

Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo_class { property: value; }, simply with a colon in between the selector and the pseudo class.

Links

link, targeting unvisited links, and visited, targeting, you guessed it,  visited links, are the most basic pseudo classes.

a:link { color: blue; } a:visited { color: purple; }

Dynamic Pseudo Classes

active

s for when something activated by the user, such as when a link is clicked on.

hover

is for a when something is passed over by an input from the user, such as when a cursor moves over a link.

focus

is for when something gains focus, that is when it is selected by, or is ready for, keyboard input.

First Children

there is the first-child pseudo class. This will target something only if it is the very first descendant of an element

子主题

Shorthand Properties

Some CSS properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces.

Margins and Padding

margin allows you to amalgamate margin-top, margin-right,  margin-bottom, and margin-left in the form of  property: top right bottom left;

p { margin-top: 1px; margin-right: 5px; margin-bottom: 10px; margin-left: 20px; }

p { margin: 1px 5px 10px 20px; }

Borders

border-width can be used in the same way as margin and padding, too. You can also combine border-width, border-color, and border-style  with the border property

p { border-width: 1px; border-color: red; border-style: solid; }

p { border: 1px red solid; }

Fonts

This combines font-style, font-weight, font-size, line-height, and font-family.

p { font: italic bold 12px/2 courier; }

Background Images

Used in a very different way to the img HTML element, CSS background images are a powerful way to add detailed presentation to a page.

body { background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right; }

background-color

set the background a color, name, hex or rgb()

background-image

which is the location of the image itself.

properties value

none

no image

[URL]

location of the image file

[URL],[URL]

Multiple background images can be separated by commas. The first image will be applied on top, “nearest” to the user.  Subsequent images will be applied underneath the image that comes before it.

first image is over the second image

also use the backgrand-position value,also top left or top right

initial

inherit

upset

background-repeat

repeat

the equivalent of a “tile” effect across the whole background

repeat-y

repeating on the y-axis, above and below,

the position is influenced by the properties value of background-position

repeat-x

(repeating on the x-axis, side-by-side), or

the position is influenced by  the properties value of background-position

no-repeat

which shows just one instance of the image

background-position,

which can be top, center, bottom, left, right, a length, or a percentage, or any sensible combination, such as top right.

properties values

[length]

The point of the left or top side of the image, measured from the left or top of the background area.

packground-position:10px

[percentage]

Measured from the left or top of the background area, where 0% pushes the image up against the starting point, and 100% pushes the image up against the end point of  the full width or height of the background area.

background-position:20%

center

Keyword. The equivalent of 50% 50%, if used by itself.

top

Keyword. The equivalent of 50% 0%, if used by itself.

right

Keyword. The equivalent of 100% 50%, if used by itself.

bottom

Keyword. The equivalent of 50% 100%, if used by itself.

left

Keyword. The equivalent of 0% 50%, if used by itself.

[value] [value] 

Any sensible combination of two lengths/percentages or two keywords. If values are lengths or percentages, the first is the horizontal position  and the second is the vertical position.

10px 20px

10% 20%

10px 20%

top left

10px bottom

[value] [value] [value]

Offset. First value is a keyword. Second value is a length/percentage representing       distance from the edge defined by the first value. Third value is a keyword with no offset.

top 10px right

[value] [value] [value] [value]

Offset. First value is a keyword. Second value is a length/percentage representing      distance from the edge defined by the first value. Third value is a keyword. Fourth value is a length/percentage representing      distance from the edge defined by the third value.

top 10px right 10px

[values], [values]

For multiple backgrounds. Value sets separated by commas correspond to multiple images separated by commas with background-image.

top left,10px 20px

when have two background-image ,you can use it. first value can set the first image'position, the second value can set the second image's position

inherit(继承)

initial（最初的）

unset（不设置）

Specificity

If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.

More Specific = Greater Precedence

<ul><li>If the selectors are the same then the last one will always take precedence </li></ul>

for example： p { color: red } p { color: blue }

The text in the box of p elements would be colored blue because that rule came last

<ul><li>Conflicts quite legitimately come up, though, when you have nested selectors </li></ul>

for example: div p { color: red } p { color: blue }

In this example it might seem that a p within a div would be colored blue, seeing as a rule to color p boxes blue comes last, but they would actually be colored red due to the specificity of the first selector. Basically, the more specific a selector, the more preference it will be given when it comes to conflicting styles.

Calculating Specificity

The actual specificity of a group of nested selectors takes some calculating. You can give every ID selector (“#whatever”) a value of 100, every class selector (“.whatever”) a value of 10 and every HTML selector (“whatever”) a value of 1. When you add them all up, hey presto, you have a specificity value.

example: <ul><li>p has a specificity of 1 (1 HTML selector) </li><li>div p has a specificity of 2 (2 HTML selectors, 1+1) </li><li>.tree has a specificity of 10 (1 class selector) </li><li>div p.tree has a specificity of 12 (2 HTML selectors + a class selector, 1+1+10) </li><li>#baobab has a specificity of 100 (1 id selector) </li><li>body #content .alternative p has a specificity of 112 (HTML selector + id selector + class selector + HTML selector, 1+100+10+1) </li></ul>

Display

The HTML element ‘s display type

the most fundamental types

inline

boxes that are displayed inline follow the flow of a line

div{ width: 50px; height: 50px; border: 2px red solid; display: inline-block; }

when properties value display is inline,the border will around the content,and the width and height will unset

block

block makes a box standalone, fitting the entire width of its containing box, with an effective line break before and after it. Unlike inline boxes, block boxes allow greater manipulation of height, margins, and padding. Heading and paragraph elements are examples of elements that are displayed this way by default in browsers.

span{ width: 50px; height: 50px; border: 2px red solid; display: block; }

span{ border: 2px red solid; display: block; }

inline-block

keep a box inline but lend the greater formatting flexibility of block boxes, allowing margin to the right and left of the box

span{ width: 50px; height: 50px; border: 2px red solid; display: inline-block; }

none

none, well, doesn’t display a box at all, which may sound pretty useless but can be used to good effect with dynamic effects, such as switching extended information on and off at the click of a link, or in alternative stylesheets.

difference

the initial

a example of display is not none,and visibility not hidden

display: none

takes the element’s box completely out of play, like it isn't in there

visibility: hidden

keeps the box and its flow in place without visually representing its contents

opacity: 0;

the same as visibility: hidden

others

Tables

A block-level table — the equivalent of the default styling of the HTML table element.

子主题

inline-table

An inline-level table.

table-row-group

The equivalent of the default styling of the HTML tbody element.

table-header-group

The equivalent of the default styling of the HTML thead element.

table-footer-group

The equivalent of the default styling of the HTML tfoot element.

table-row

The equivalent of the default styling of the HTML tr element.

table-column-group

The equivalent of the default styling of the HTML colgroup element.

table-column

The equivalent of the default styling of the HTML col element.

table-cell

The equivalent of the default styling of the HTML td or th elements.

table-caption

The equivalent of the default styling of the HTML caption element.

Pseudo Elements

Pseudo elements suck on to selectors much like pseudo classes, taking the form of selector:pseudoelement { property: value; }.

First Letters and First Lines

The first-letter pseudo element applies to the first letter inside a box  and first-line to the top-most displayed line in a box.

p{ font-size: 12px; } p::first-letter{ font-size: 20px; } p::first-line{ color: red; }

this is first p this is br in p this is other p

attention

The CSS 3 specs suggest pseudo elements should include two colons, so p::first-line as opposed to p:first-line. This is to differentiate them with pseudo classes. Aiming for backwards-compatibility (whereby older web pages will still work in new browsers), browsers will still behave if they come across the single colon approach and this remains the best approach in most circumstances due to some older browsers not recognizing the double colon.

Before and After Content

The before and after pseudo elements are used in conjunction with the content property to place content either side of a box without touching the HTML.

The value of the content property can be open-quote, close-quote, any string enclosed in quotation marks, or any image, using url(imagename).

blockquote:before { content: open-quote; } blockquote:after { content: close-quote; }

li:before { content: "POW! "; }

p:before { content: url("http://www.htmldog.com/images/bg.gif"); }

The content property effectively creates another box to play with so you can also add styles to the “presentational content”:

li:before { content: "POW! "; background: red; color: #fc0; }

Page Layout

Layout with CSS is easy. You just take a chunk of your page and shove it wherever you choose. You can place these chunks absolutely or relative to another chunk.

positioning

static

is the default value and renders a box in the normal order of things, as they appear in the HTML.

position: static; top: 20px; left: 20px; （top and left is not use）

absolute

is much like static but the box can be offset from its original position with the properties top, right, bottom and left.

position: absolute; top: 20px; left: 20px;

relative

pulls a box out of the normal flow of the HTML and delivers it to a world all of its own. In this crazy little world, the absolute box can be placed anywhere on the page using top, right, bottom and left.

position: relative; top: 20px; left: 20px;

fixed

behaves like absolute, but it will absolutely position a box in reference to the browser window as opposed to the web page, so fixed boxes should stay exactly where they are on the screen even when the page is scrolled.

子主题

Floating

Floating a box will shift it to the right or left of a line, with surrounding content flowing around it.

float：left

float：right

clear: left

left floated boxes

clear: right

clear right floated boxes

clear: both

clear both left and right floated boxes.

So if, for example, you wanted a footer in your page, you could add a chunk of HTML