CSS: Cascading Style Sheets
1. Features of
css 2. Introduction of css
3. Selector
4. Pseudo-class selector
5. Pseudo-element selector
6. Font style text style background attribute
7. Box model border margin padding
8.display visibility property
9.float property
10.position z-index property
11. Web page layout
First, the characteristics of css:
1.css solves two problems:
1. Separate the content and style of the HTML page.
2. Improve the work efficiency of web development.
2. The advantages of css:
1. Separation of content and performance
2. The performance of web pages is unified and easy to modify
3. Rich styles make page layout more flexible
4. Reduce the amount of code on web pages, increase the speed of web browsers, and save network bandwidth
5 .Using the CSS of an independent page is beneficial to the web page being indexed by search engines.
3. CSS syntax:
1. Selector; 2. Declaration = attribute + value;
/*This is a comment*/
Second, the introduction of css:
1. Embedded
generally do not write embedded, it is difficult to maintain in the future
<h1 style="font-size: 10px;color: yellow">I am h1 Luffy Academy</h1>
2 .Internal link
<style type="text/css">
h2{font-size:30px;color:red;}
</style>
3. External
link
link css is loaded at the same time!
<link rel="stylesheet" type="text/css" href="./css/index.css">
Import type
is rarely used, first load html, and then load css
import is unique to css2.1, for Browsers that are not compatible with css2.1 are invalid eg: below IE5
<style type="text/css">
@import url('./css/index.css');
</style>
Note: @import url() must be written at the beginning of the file.
The difference between linking and importing:
1. The <link/> tag belongs to XHTML, and @import is the attribute css2.1
2. The css file linked by <link/> is loaded into the web page first, and then compiled and displayed.
3. The css file imported by @import will be displayed on the client side Display the HTML structure, and then load the CSS file into the
webpage
Chain
three, selector:
1. Wildcard selector
*{
padding:0;
margin:0;
color:red;
}
2. Label selector
h1{
color:red;
}
img{
width:900px;
}
3.id selection Container (the parent box has no height, the child content is filled)
#container{
width:900px;
margin:0 auto;
}
4. Class selector. content
{
width: 900px;
background-color: red;
}
5. Child selector (use > between selectors)
ul>li{
color: red;
}
6. Descendant selector (selector Use a space between)
ul a{
color:green;
}
7. Group selector (in the middle,)
.title,.content,.footer{
width:900px;
margin:0 auto;
background-color:red;
border: 1px solid red;
}
8. Intersection selector (there can be no spaces between selectors, the first tag must be a tag selector, and the second tag can be an id or class selector)
p.p1{
color:red;
}
p#title1{
font-size:30px;
color:red;
}
9. Adjacent selectors (with + between selectors followed by the label of the h3 title)
h3+p{
color:red;
}
10. Sibling selectors (between selectors Use ~)
h3~p{
color:red;
}
11. Attribute selector ( ^ starts with..., $ ends with..., * contains..., ~ has one of multiple values)
[class ="baidu"]{
color:red;
}
[class^="btn"]{
color:yellow;
font-size:12px;
}
[class$="ault"]{
font-size:12px;
color:red;
}
[class]{
color:red;
}
[class*='baidu']{
color:red;
}
[class~='baidu']{
color:red;
}
input[input="text"]{
background-color:red;
}
css style priority:
Inline style > Internal style sheet > External style sheet
ID selector > Class selector > Label selector
4. Pseudo-class selector
a:link{ background-color: blue;} The state when the hyperlink is not accessed
a:hover{ color: green;} the state when the mouse is hovered
a:visited{ color: yellow;} the state when the mouse is clicked
a:active{ color:blue;} the state when the mouse is not released
input:focus{ background-color:red; } The state when the focus is obtained
5. Pseudo-element selector:
p:first-letter{ font-size:30px;} p paragraph sets a special style for the first letter of the text
p:before{ is used to insert new content before the content of the element
content:"beginning";
color:red;
}
p: after{ is used to insert new content after the content of the element
content:"End";
color:green;
}
Six, font style text style background attribute
1. Font style:
default font size: 16px = 1em 12px = 0.75em
font-size :30px;
Note:
Text size: If set to inherit, it means inherit the font size value of the parent element.
font-style:oblique;
Note:
The style of the text: italic also means italic;
it is recommended to use oblique
font-weight:bolder; when setting italic; the thickness of the font
Note:
The thickness of the text: normal default value, standard thickness
bord bold
border thicker
lighter
100~900 set the specific thickness, 400 is equivalent to normal, and 700 is equivalent to bold
inherit inherits the parent element's font thickness
font-family:"Microsoft Yahei ";
font-family: "Microsoft Yahei", "Microsoft Yahei", "Arial", "sans-serif";
Note:
Type of text:
If the browser does not support the first font, it will try the next one . The browser will use the first value it recognizes.
If set to inherit, it means inherit the font of the parent element.
color:red;
Note:
Text color: Three color values are supported: #FF0000 RGB(255,0,0) red
2. Text style:
text-decoration:underline;
Note:
Line: Overline on line-through In underline
none None (standard text is defined by default)
inherit Inherit the value of the text-decoration property of the parent element.
text-indent: 20px;
Note:
First line indent: 20px
text-align: center;
Note:
Text alignment can be centered horizontally: left (default) right center justify (justify only for English)
text-shadow: 10px 10px 0.5px #fff;
Note:
Shadow: left and right, up and down, 0-1, color
cursor: pointer;
Note:
Mouse shape: pointer, cell cross, default mouse
height: 200px;
line-height: 200px;
Note:
Text vertically centered :height = line-height
3. Background properties:
background-color:red;
Note:
background color.
background-image:url("./images/***.png");
Note:
Background image
background-size: 300px 300px;
Note:
The size of the background image
background-repeat: no-repeat;
Note:
How to repeat the background image
repeat by default. The background image will repeat vertically and horizontally.
repeat-x The background image will repeat horizontally.
repeat-y The background image will repeat vertically.
The no-repeat background image will only be displayed once.
inherit specifies that the setting of the background-repeat property should be inherited from the parent element.
background-attachment:fixed;
Note: Whether the
background image is fixed or
scroll default value. The background image moves as the rest of the page scrolls.
fixed background image not moving when the rest of the page scrolls.
inherit specifies that the setting of the background-attachment property should be inherited from the parent element.
background-position: 10px 20px;
Note:
The position of the background image
top left If only one keyword is set, then the second value is "center".
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y% The first value is the horizontal position and the second value is the vertical position. Default: 0% 0%.
The upper left corner is 0% 0%. The bottom right corner is 100% 100%.
If only one value is set, the other value is 50%.
xpos ypos The first value is the horizontal position and the second value is the vertical position.
The upper left corner is 0 0. Units are pixels (0px 0px) or any other CSS unit.
If only one value is set, the other value is 50%.
You can mix % and position values.
background: green;
background: url("./homesmall1.png") no-repeat 10px 12px red; background: url("./ homesmall1.png
") no-repeat center red fixed;
Note: Abbreviation 7. Box model border Margin padding Every element in an HTML document is depicted as a rectangular box that describes its footprint through a model called the box model.
1.border
border-top-width: 5px;
border-bottom-width: 10px;
border-left-width: 15px;
border-right-width: 20px;
border-top-color: red;
border-bottom-color: yellowgreen;
border-left-color: yellow;
border-right-color: blue;
border-top-style: solid; 实线
border-bottom-style: dashed; 矩形虚线边框
border-left-style: dotted; 点状虚线边框
border-right-style: double; 两条实线
四个值 上 右 下 左
border-style: dotted dashed double solid;
border-width: 5px 10px 15px 20px;
border-color: blue red yellow slateblue;
Border-style: dotted double solid;
border-width: 5px 10px 20px;
border-color: blue yellow slateblue;
two values border
-style: dotted solid;
border-width: 5px 20px;
border -color: blue yellow;
a value
border-style: dotted;
border-width: 20px;
border-color: blue;
shorthand: border: none
borderless border :
10px solid yellow; Distance between elements Note: The margin will change the actual size, the background color will not be rendered to the margin area, this area will be blank, but it is also part of the box. margin-top: 20px;
margin-left: 40px;
margin-bottom: 20px; margin - right
: 40px; top right bottom
left margin
: 20px 30px 40px 50px;
top, left, right and bottom
margin: 20px 30px 40px; : 50px; horizontally centered box element margin: 0 auto; speciality: there is no such feature in the horizontal direction; speciality in the vertical direction; when two vertical outer margins meet, a margin will be formed, which is called margin merge, which has been Big as the benchmark! ! Explanation: The margins of all adjacent two or more box elements will be combined into one shared margin (based on the largest). Note: The parent-child box nesting and setting the margins will form margins merging, which will affect the page layout. Solution: (child debt to father)
1. The parent or child element uses floating or absolute positioning absolute, and floating or absolute positioning does not participate in the folding of margin.
2. Parent overflow: hidden
3. Parent set padding (destroy non-blank folding conditions)
4. Parent set border
3. Padding
padding: control the distance from the content to the border, the padding will expand the area where the element is located ,width+padding;
Note: Setting the padding for an element can only affect itself, not other elements. Padding does not support negative values.
padding-left: 20px;
padding-top: 30px;
padding-right: 40px;
padding-bottom: 40px; padding : 10px
20px 30px 40px ; Attributes 1. Controls the display and hiding of HTML elements 2. Conversion between block-level elements and inline elements display:none; Note:
none
controls the element to hide and not occupy
space. The element exists in the HTML document, but is not displayed in the browser. Generally used with JavaScript code.
The block
block-level element occupies a single line, and the width and height can be set (div ph ul ol li)
to occupy the entire page width by default. If the specified width is set, the remaining part will be filled with margin.
Inline-block Inline
block elements are displayed in one line, and the width and height can be set (img input),
which has the characteristics of inline elements and block-level elements at the same time.
Inline inline
elements are displayed in one line, and
the width, height, and margin-top of elements that cannot be set to width and height (a span label) will not have any effect.
Generally:
inline block elements are converted into block-level elements;
inline elements are converted into block-level elements /Inline block element;
visibility: hidden;
Note: the hidden position of the control element affects the layout
of the following box Flow arrangement.
Floating Effects: Floating can cause elements to line up in a specified direction until they reach the boundaries of the parent element or until another floating element stops.
float:left; left floating left is the starting point, right is arranged in order from left to
right; right floating right is the starting point, which is arranged in order from right to left
;
floating effect:
1. Floating can make the element out of the document flow, no Occupying a place
To leave the document flow, that is, to take the element away from the normal layout and typesetting.
When other boxes are positioned, they will be positioned as if the element that is separated from the document flow does not exist.
2. Floating will make the element increase the level 3. Floating can make block elements arranged in a
row, if the width and height are not set, the element can be adapted to the content
4. Floating can make the inline elements support the width and
height
It is floating. If the previous element of the A element is also floating,
then the A element will follow the previous element (if the two elements cannot be placed in one line, the A element will be squeezed to the next line);
if the A element is on the An element is an element in the standard flow, then the relative vertical position of A does not change, which means that the top of A is always aligned with the bottom of the previous element.
In addition, the block element after the floating box will think that the box does not exist, but the text in it will still make room for the element.
The inline element after the floating box will make room for the box, and then arrange it in order.
Problems with floats:
When the height of the parent element is not set, the child element is set to float, which will not stretch the height of the parent element. At this time, the parent box has no height. Because the child element does not occupy the position!
If there is a standard flow box below the parent box, it will affect the layout of the page. ------Clear the float
Solution:
1. Set a fixed height for the parent box; Disadvantage: inflexible;
2. Add an empty block-level element to the last floating element, and the element is non-floating float:none , set clear:both, it will open the box.
Disadvantage: Structural redundancy
3. Official recommendation: Recommended use:
.wrap:after{
content: '.';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
4. Recommended use: add to the parent element overflow:hidden eg: .warp{overflow: hidden;}
Ten, position z-index property
1.position
position: absolute;
top: 20px;
bottom: 10px;
left: 20px;
right: 0px;
static : default value
relative : relative positioning
1. When the offset is not set, it has no effect on the element.
2. Relative positioning can improve hierarchical relationships.
3. Relative positioning is positioning relative to itself.
absolute : Absolute positioning
1. It can improve the hierarchical relationship.
2. Get out of the document flow.
3. When there is no parent element positioning, the positioning is based on the upper left corner of the browser.
4. When there is a parent, the parent sets relative positioning, and the subset sets absolute positioning, which is based on the parent box.
(Father and son absolutely) to adjust the position
fixed: fixed positioning (can be used for advertising!)
2.z-index
border-radius: 50%; # Set the circle
border-radius: 10px 20px 30px 40px; # Set the corners
position: absolute;
z-index: 3;
z-index: 1000;
Note:
The bigger the number, the more in the outer layer!
11. Web page layout
Web page layout:
upper and lower structure
, upper middle and lower structure , upper left, middle and lower
structure: 1-2-1 structure
, upper left, middle and lower right structure: 1-3-1 structure
General:
first:
*{padding:0;margin: 0;}
ul>li{list-style:none;}
a{text-decoration:none;}
.wrap{width:100%;background-color:gray;}
.header{}
.content{}
.footer{}
…
_