Bloggers don’t talk nonsense, and directly introduce the attributes and attribute values commonly used in CSS; attributes and values only need to be passed through, the structure of the page still needs layout, and the layout will only be updated later.
Websites that provide some icons: font-awesome: http://fontawesome.dashgame.com/ iconfont: http://www.iconfont.cn/
Text style
1, font style
color specifies the color of the font, the value is as follows:
color English words: white, RGB value rgb(255,255,255), RGBA value rgba(255,255,255,0.5), hexadecimal value #ffffff
font-family Specify a special font for the text, the browser will only use the font that the browser can access, The values are as follows:
Universal font
• serif: A font with serifs, and a special decorative line or serif at the end of the strokes. : A sans serif font with a smooth font at the end of the stroke
• monospace: monospace font, used for code, each word in the font has the same width
• cursive: cursive, cursive Some of these fonts have continuous strokes, and some have special italic effects.
•Fantasy: decorative fonts, fonts with special artistic effects
common fonts
/p>
• Song Ti
Note: You can go to multiple values continuously, when the first one is not available, use the second one, and so on.
DOCTYPE html>
<html lang="en">
<head >
<meta charset="UTF-8">
<title >How to introduce style sheettitle>
<style >
div{
font-family: myFont; /*Use a custom font*/
}
@font-face{
/* Define by yourself Font name, src finds out the installation path of the font*/
font-family: "myFont";
src: url("Font installation path");
}
style>
head>
<body >
<div >
Test your own custom font styles downloaded and installed
div>
body>
html>
font-style is used to open and close italic text, the value is as follows:
normal: normal font , Italic: italic, oblique: analog italic
font-weight sets the thickness of the font, the value is as follows:
normal, bold: normal, bold font, lighter, bolter: Thinner and thicker than the parent element, 100-900: the thickness of the numeric type
font-size specifies the size of the text, the value is as follows:
is similar to 16px, 20px, 30px
text-align text-align, the value is as follows:
center: center alignment, left: left alignment, right: right alignment
text -transform Set or cancel the font change, the values are as follows:
none: prevent any changes, uppercase: convert the text to uppercase, lowercase: convert the text to lowercase, capitalize: convert the first letter of all words Convert to uppercase, full-width: Convert to a font similar to a monospaced font
text-decoration Set or cancel text decoration, the value is as follows:
none: Cancel all text decoration, underline: add an underline to the text, overline: add an overline to the text, line-through: add a strikethrough to the text
text-shadows Set or cancel text shadows, syntax: text-shadow:h-shadow v-shadow blur color; The values are as follows:
none: cancel all shadows
h-shadow: required. The position of the horizontal shadow. Negative values are allowed.
v-shadow: required. The position of the vertical shadow. Negative values are allowed.
blur: optional. Blurred distance.
color: optional. The color of the shadow. See CSS color values.
2, list style
list-style-type: set the type of the list item logo, the value is as follows:
none: no logo, disc: default solid Circle, circle: hollow circle, square: square, decimal: the number starts from 1…
list-style-position: Set the position where the list item’s logo appears, take The values are as follows:
outside: the list item flag appears outside the main block box, inside: the list item flag appears inside the main block box
list-style-image: custom Set the list item flag, the value is as follows:
url(“storage address”)
list-style: shorthand for the list style, the value is as follows:
[
line-height Set the line height of the list
3, text style
cur : Adjust the shape of the cursor when hovering over the link, the value is as follows:
pointer: gesture, wait: wait,. . . .
outline: Adjust the frame surrounding the link
text-decoration: Customize the list item flag
text-align: Text alignment
< hr>
Box
There are two box models in HTML5, but we usually use the default box model/W3C box model/standard box model; the other is Border box model/IE box model. The conversion of these two box models has the attribute name box-sizing, the default value of the box model is content-box, and the value of the border box model is border-box.
We set the width and height of the default box model is equivalent to setting the width and height of the content area of the box; setting the width and height of the border box model is to set the width and height of the entire box, and then expand for the default box model of.
width & height is used to set the width and height of the content area, which is used to display the content. The height of the box defaults to the height of the content
padding represents the distance between the outer border of the content box and the inner border of the outer border
border is set between the outer edge of the padding and the margin Between inner edges, the default value is 0
margin represents the area around the box. The setting method is similar to padding. Border collapsing of adjacent elements will merge (margin collapsing)
1, box background style:
background-color Set a color for the element, the value is as follows:
< p> is the same as the color value above
background-image set a background image for the element, the value is as follows:
none: no picture, url() The storage address of
background-clip Set the coverage of the background, which means that the background picture is placed on top of it. If it is a content-box, the pictures outside the content-box will be cropped , The value is as follows:
• border-box: the background is located within the border• padding-box: the background is located within the padding• content-box: the background is located in the content area
background- origin Set the starting point of the background, which refers to where to place the picture. The values are as follows:
• border-box: the background image is drawn from the outer edge of the border • padding-box: the background image is drawn from The outer edge of the inner margin starts to be drawn • content-box: the background image is drawn in the content area
background-position is set to the initial position of the background image, which is equivalent to the position defined by background-origin, just give a coordinate< /p>
background-repeat Set the repeating method of the background image, the value is as follows:
• repeat: In order to cover the entire background range, the background image should be repeated as much as possible and cut at the edge of the background (clipping ) The last picture to use the entire background range.
• space: Use blanks to separate the pictures, make the background picture fill the entire screen as much as possible without using clipping (clipping)
• round: compress or expand the picture Adapt to the entire background range, without cutting; if the area can accommodate two types, two will be drawn
• no-repeat: no repeat
background-attachment Set the background image to be fixed Point, the value is as follows:
• fixed: the background is fixed on the viewport• scroll: the background is fixed on its own element • local: the background is fixed on the content of its own element
p>
background-size Set the size of the background, the value is as follows:
• cover: The background width and height are proportional to the entire screen, (try not to use a large image to cover a small area)
background setting shorthand method
[
2, box border style
border-width specifies the width of the border for the element, just give a specific value, similar to 1px, 2px
border-style specifies the element Border style, the values are as follows:
• none: do not set• hidden: hidden• dotted: display a series of dots• dashed: display a series of small line segments
• solid: display A single solid straight line • double: Show two solid straight lines • Groove: Frame carving effect (opposite to ridge)
• ridge: Contrary to groove • inset: Embedded bounding box (opposite to outset) • outset: Outset bounding box
border-color specifies the border color for the element, the same value as the color above
border-radius specifies the radius of the rounded border for the element, and gives a The specific value will do
border-image Set the border background for the element
border-image-source is used to load pictures as borders
• url()
border-image-slice is used to cut border images
: This value cuts on each side
• Two values: The top and bottom are a value, the left and the right are a value
• Three values: one value on the top, one value on the left and the right A value
• Four values: Take one value for the upper right, lower left and the lower left
border-image-repeat is used to set the border image repeat mode
border-image-repeat Stretching, not recommended; repeat: repeat cutting;
• round: repeat adaptation; space: repeat adaptation;
border shorthand for border-related attributes
< /p>
DOCTYPE html>
<html lang="en">
<head >
<meta charset="UTF-8">
<title >How to introduce style sheettitle>
<style >
div{
font-family: myFont; /*Use a custom font*/
}
@font-face{
/* Define by yourself Font name, src finds out the installation path of the font*/
font-family: "myFont";
src: url("Font installation path");
}
style>
head>
<body >
<div >
Test your own custom font styles downloaded and installed
div>
body>
html>