Three kinds declaratively:
The tag style statement, inline
HTML head statement, internal
<style>
.cssname1{}
#idname1{}
</style>
Separate CSS file statement, external, you need to call in html in:
<head>< link rel="stylesheet" type="text/css" href="mystyle.css">< /head>
Priority: the tag style> defined composition / layer defines>. Definition> #define (also follow the principle of proximity when defined)
html categories: the row labels (a \ span), the block tag (div)
Blocks: It is a point of the entire line, with a position \ padding properties
Line Tags: occupy part, there is no position \ padding properties
Row block Conversion: display property, inline converted to row, block converted into blocks, inline-block has a row label block attributes.
CSS pseudo-elements:
Syntax: : pseudo-element name
link\visited\active\hover\focus\first-letter\first-line\first-child\before\after\lang
CSS basic syntax:
Selector{
Attribute 1: value;
Attribute 2: value;
......
}
1, the selector:
1 tag name [name tag 2] [3 tag name] ......: The nested tags matching sequence tag
The selector name: call the class attribute tag
#idname: id attribute is the label, the label is applied to all # id for the label idname
[Attribute = value]: pname tag is attribute can be any attribute
Complicated selectors:
li a ul.pagination: hover: Not (.active) {background-Color: #ddd;}
Active li class label class under pagenation ul of a tag label
Attributes:
1、background:
Parameters order:
backgournd:RGB(255,255,255) url('image/1.jpg') no-repeat right top;
A separate statement of:
background-color:颜色， #DDDDD/RGB(255,255,255)/red
background-image: background image, url ( 'images / 1.jpg')
background-repeat: repeat image, repeat the default, no-repeat repeat not, repeat-x repeated horizontally, repeat-y vertical repeat
background-attachment: fixed background, the default is not fixed scroll, fixed stationary (not moving character movable FIG.), the inherit inherited properties of the parent background element.
background-position: the background image position, left, right, top, bottom, center
background-size: background image size (length and width)
background-clip: size match the background, border-box to match the size of the outermost border, padding-box to match the inside, content-box to match the text
2, link style defined hyperlinks
Note: a: hover must be a: link and a: After visited, the need for strict in order to see results.
Note: A: the Active must be a: hover after.
a: link {}: normal, unvisited links
a: visited {}: visited links
a: hover {}: on the link when the mouse
a: active {}: mouse clicks
For the different links, different definitions of style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:monospace;}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</style>
</head>
<body>
<p>将鼠标移至链接上查看其样式改变.</p>
<p><a class="ex1" href="/css/">This link changes color</a></p>
<p><a class="ex2" href="/css/">This link changes font-size</a></p>
<p><a class="ex3" href="/css/">This link changes background-color</a></p>
<p><a class="ex4" href="/css/">This link changes font-family</a></p>
<p><a class="ex5" href="/css/">This link changes text-decoration</a></p>
</body>
</html>
Creating a link box:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:link,a:visited
{
display:inline-block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="/css/" target="_blank">注册</a>
<a href="/css/" target="_blank">登陆</a>
</body>
</html>
3、margin、border、padding、content。
Margin, border, padding, and the actual content, is used to define the position of the element.
margin: Aspect
Can be defined separately
margin-right:
border: broad line type color
Type: dotted (point), dashed (dotted line), solid, double, groove (3D), ridge (3D), inset (3D), outset (3D)
You can define different border styles
-style bottom-border: border-bottom-Color: border-bottom-width: border-style: Solid; border-RADIUS: 5px; chamfered border-radius: 15px 50px 30px 5px ; define different angles border-color: # ff0000 # 00ff00 # 0000ff rgb (250,0,255) ;
padding: on the right lower left, just write the next parameter, all are filled
The default padding will be calculated at the border where, that padding will stretch the label, use box-sizing: border-box to limit (recommended for all elements in use)
Can be defined as follows:
padding-left:
width:
height:
border:
4, CSS multiple columns (columns function similar to WORD)
column-count element should specify the number of columns divided.
column-fill column specifies how to fill
a gap between the column-gap designated column to column
column-rule all the column-rule- * attribute short
column-rule-color specified color of the border between the two
column-rule-style designated two border style between the
column-rule-width specified thickness of the border between the two
column-span element to specify how many columns across the
column-width to the width of the designated column
columns and provided short column-width of the column-count
5, display (display)
Display control element has three attributes:
block: the block row labels into
inline: The block tag into line
inline-block: a block having a row label property (not a separate line)
6, position (Location)
After using the positioning, using the top \ bottom \ left \ right to change element position.
Not defined position, the above definition is invalid
static :( default) is not located, static positioning elements will not be top, bottom, left, right influence.
fixed: the position of the element with respect to the browser window is a fixed position. (Floating effect the lower right corner)
relative: the relative positioning element is positioned relative to its normal position. The current element location offset.
absolute: absolute position relative to the positioning element nearest positioned parent element, if the element is not already positioned parent element, then its position relative to the <html>
Typically the parent element is set adjusted relative, child element set to absolute positioning.
sticky: Based on the user's scroll position to position.
7, overflow overflow-x overflow-y (outside the display range of the display)
scroll: always show scrollbars
hidden: hide the excess
auto: If exceeded, scroll bars, if not more not display scroll bars
visible :( default) beyond, still display the content.
8, clip (cut)
Specify an absolute positioning element, the dimensions should be visible, the element is cut into such a shape and displayed.
Note :: If you have to "overflow: visible", clip property does not work.
Small page icon effect, you can use the clip, to prevent too many images to generate multiple requests.
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
div{
background-color:yellow;
background-clip:content-box;
}
9, z-index (element display order)
It may be a negative number, the greater the value the more forward position of the display.
10, float (float element)
Element will move left or right, the elements around it will be re-arranged.
Elements after the floating element will be around it. Element before the floating element will not be affected.
left: left float
right: the right float
none: do not float
inherit: inherit the float property value from the parent element.
Floating element bit string is generated, the upper layer in use the clear: both Clear
10、text:
align = left-text
text-align = left-Last
text-underline style Decoration defined
text-Decoration-Color
text-Decoration-Line
text-Decoration-style
text-indent the first line indent
text-overflow: text-overflow property to specify the text overflows the containing element, what should happen.
overflow-text: Clip | ellipsis | String ; elipsis exceeds displayed ellipsis, string custom character display
text-shadow: the text shadow text-shadow: 2px 2px # ff0000;
text-transform: control the case of text
other:
shaded block
Diffusion angle range from the size of the shadow shadow
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
Mouse shape:
cursor: pointer;
Transparency: 0 minimum, maximum 1
opacity: 1;
Tags displacement:
transform: translateY(10px);
transform: translateX(10px);
Other References:
https://www.runoob.com/c***ef/css3-pr-align-content.html