01. Units of length
1. Pixel px
A pixel is a small glowing dot on a computer screen that is invisible to our eyes.
The pixel is one of the most common units we use on pc, it is a fixed unit.
2. Percentage %
is a percentage of the parent element's width and height, the percentage is a relative unit and will change with the parent element's width and height transformation
In general, doflow layoutMore.
is also a relative element, equivalent to the font size of the current element to calculate the final size.
That is, 1em = 1 font-size. if the current element does not have a font-size set.
then inherits the font size of the ancestor element, the
The default font size is 16px, which is inherited from html.
r --root Root
It is also a relative unit, relative to the font size of the root tag html to calculate the final size
That is, 1rem=1 html font-size
、vh
02. Color Units
1: In css you can use color words directly to represent different colors
red, green, yellow, blank, etc.
Cons: Too many color words to describe.
2: Use RGB values to represent different colors
rgb(red, green, blue)
The value of the color between 0-255, 0 is the smallest and 255 is the largest.
You can absorb the ratio of the color directly from the computer or plug-in, and you can absorb the color in the screenshot state.
3：RGBA
rgba（red，green，blue，alpha）；
alpha transparency Set the transparency between 0 and 1. 0 is transparent and 1 is opaque.
4: Use the hexadecimal rgb value to represent the color, the principle is the same as rgb
hexadecimal：0-9abcdef，
00 denotes minimum, replacing 0 in 0-255, ff denotes maximum, replacing 255 in 0-255
Concentrations of red, green, and blue in hexadecimal values (6 digits, 2 digits for each color)
Syntax: #ff0000, like this two by two repetition of the representation, you can omit a bit, abbreviated as #f00.#f0f0f0 this kind of non-observable
5:HSL values (H - Hue 0-360, S - Saturation 0-100%, L - Luminance 0-100%)
HSLA value , A is alpha transparency between 0-1
03.Classification of fonts
Fonts are categorized into 5 main categories on the web page:
serif ['serif] (serif font)
sans-serif (non-serif)
monospace (equal width font)
cursive ['kə:siv] (cursive script)
fantasy ['fæntəsi]（illusory(Font)
You can set the fonts to these large categories, and when you set the fonts to large categories, you can set the fonts to the large categories, and then you can set the fonts to the large categories.
The browser automatically selects the specified font and applies the style
Generally, the font's major category is designated as the last font in the font-family, which is used as a backing.
-
<body>
-
<p style="font-size: 20px; font-family: serif">Serif fonts: I am a paragraph of text, ABCDEFGabcdefg</p>
-
<p style="font-size: 20px; font-family: sans-serif">Non-serif fonts: I am a paragraph of text, ABCDEFGabcdefg</p>
-
<p style="font-size: 20px; font-family: monospace">Equal width fonts: I am a paragraph of text, IHABCDEFGabcdefg</p>
-
<p style="font-size: 20px; font-family: cursive">Cursive font: I am a paragraph, ABCDEFGabcdefg</p>
-
<p style="font-size: 20px; font-family: fantasy">Unreal Fonts: I am a piece of text, ABCDEFGabcdefg</p>
-
</body>
04. Font Styles
Set the font color, but also other colors
-size Sets the font size
-family allows you to specify the font
4.@font-face Custom Fonts
-
<body>
-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex deserunt harum cum repellat reprehenderit velit. Deserunt, totam consequatur , distinctio maiores impedit laudantium asperiores ipsam eum adipisci harum quasi amet pariatur?</p>
-
</body>
-
<style>
-
@font-face{
-
/* The name you gave the font */
-
font-family: name;
-
/* Font introduction path */
-
src: "";
-
}
-
p{
-
color: red;
-
font-size: 20px;
-
/* Setting the font of the text Fonts are designed by the designer and specified in advance, we can just use them directly */
-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
}
-
</style>
5. Set the text italicized font-style: ;Â
Optional values:
normal Default The text is displayed normally.
italic (more commonly used)
oblique Textual slant (understood)
6. Set the text to be bold font-weight: ;Â
Optional values:
normal Default Text is displayed normally
bold Text Bold
bolder text bold
Values between 100 and 900 100 is the thinnest and 900 is the thickest Note that there are no units.
7. Set a small capital letter font-variant
Optional values:
normal Default Text is displayed normally
small-caps Sets small caps
font abbreviation (can be unified to set some styles related to text)
Attention:
1, must have the font size and text font
2, the font size must be in the penultimate position
Text font must be in the penultimate position
<p class="p1">I'm a piece of text I'm a piece of text I'm a piece of text ABCDEFGabcdefg</p>
-
.p1 {
-
font-size: 2em;
-
font-family: "Times New Roman", Times, serif;
-
/* Setting text in italics */
-
font-style: oblique;
-
/* Setting the bolding of text */
-
font-weight: 900;
-
}
05. Line spacing
1, line height (line height) text occupies the actual height of the
Line height = top spacing + size of text + bottom spacing
Upper spacing = lower spacing
If you want to set the margin distance between rows, you can do so by setting the row height
line-height style name
Optional values:
(1), directly write the size, unit: px/em/rem/%
(2), directly write multiples, 1/2/3/4/5---- is a multiple of the current font size
(3), can write percentage, 100%, 200%. 300%
2、Single line text is vertically centered in the parent element
Just set the row height to match the height of the parent element
3, font can also be specified in the line height
font: font-size/line-height font;
06. Text Styles
-transform can be used to set the case of text.
Optional values:
none Text is displayed normally Default
uppercase uppercase letters
lowercase lowercase letters
capitalized Capitalize the first letter of the word
-decoration can be used to set text modifiers.
Optional values:
none Text is displayed normally Default
underline Text underline
overline Text overline
line-through Text strikethrough
-spacing allows you to specify character spacing
-spacing allows you to set the spacing between words (sentence to sentence, word to word)
-align is used to set the alignment of the text.
Optional values:
left default, text is left-aligned
right Text right-aligned
center Text center alignment
Note: To set the alignment of the text, you must give the text a certain amount of space.
If it's an inline element, its width is stretched by the content, and you can't set the width of the
-indent Sets the indent of the first line of text.
Common unit of length: em
-space:; Set how the web page handles whitespace, can be set to replace or not to replace lines
-overflow What happens when text overflow contains elements
Optional values: ellipsis ellipsis symbol
-shadow: Set the text shadow.h-shadow v-shadow blur color;
4 parameters (parameters are separated by spaces)
1. shaded horizontal displacement distance positive to the right, negative to the left Required
2. the vertical displacement distance of the shadow is downward for positive values and upward for negative values Required
3. Blur radius of shadow Optional, default is 0px.
4. the color of the shadow generally use rgba form more optional, the default is the font color
-shadow: h-shadow v-shadow blur color;
4 parameters are the same as text-shadowIt's the same.
The only difference is
The default shadow color is black
-align Sets the vertical alignment of an element.
Optional values:
baseline Default
top Text on top
bottom Text down
middle Text centering
Role:
1. Set the alignment of the graphic
2.Solve the problem of three pixels of an image. (Interview questions)
When images are introduced, there will be a gap between the images, which normally needs to be removed
Method I:
vertical-align: middle non-baseline
Method II:
Set the font-size of its parent element to 0
Method Three:
Setting images as block elements
Method four:
Detach the image from the document flow, either by setting it to float or by positioning it absolutely.
-
<style>
-
/* 11. Role I */
-
img{
-
width: 300px;
-
vertical-align: middle;
-
}
-
h1{
-
text-align: center;
-
text-shadow: 5px 5px 10px red;
-
}
-
.box{
-
width: 100px;
-
height: 100px;
-
background-color: gray;
-
box-shadow: 0px 0px ;
-
}
-
/* Requirement: Shadow around box on mouseover */
-
.box:hover{
-
box-shadow: 0px 0px 10px orange;
-
}
-
.p1{
-
text-transform: uppercase;
-
}
-
/* span is an inline element */
-
span{
-
display: block;
-
text-align: center;
-
}
-
/* Setting a fixed way of writing single-line text ellipses */
-
.p3{
-
background-color: green;
-
/* Setting the width */
-
width: 300px;
-
/* Set no line breaks */
-
white-space: nowrap;
-
/* Setting excess content to be trimmed off */
-
overflow: hidden;
-
/* Setting redundancy to appear as an ellipsis */
-
text-overflow: ellipsis;
-
}
-
/* Fixed way to write ellipses in multi-line text? */
-
</style>
-
<body>
-
<h1>Guo Tongpai final county you talent, Ren.</h1>
-
<p class="p1">I know what he's looking for, and the next time he's looking for the same thing as you, it's like that.
-
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit modi odit est velit ipsam repellat vero voluptate, unde reiciendis incidunt tenetur eveniet magni perspiciatis cupiditate veniam repellendus? At, accusamus minima.</p>
-
<p class="p2">The high six-foot harem king, right.
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta expedita quia magni praesentium dignissimos obcaecati omnis in quam tenetur. Sapiente officia voluptates numquam beatae tempora suscipit dicta perferendis, ipsa similique?
-
</p>
-
<a href=""><p class="p3">After a thousand to be true mountain I take to protect the high country inverted Germany, there are extremely people thirty if had and high pro times from no county change, aunt.</p></a>
-
<div class="box"></div>
-
<span>I'm a span tag.</span>
-
<div>
-
<img src="../1116/" alt="">
-
<img src="../1116/" alt="">
-
<img src="../1116/" alt="">
-
</div>
-
</body>
