I hope you are happy, I hope you are healthy, I hope you are happy, I hope you like it!
Finally, follow meow, follow meow, follow meow, you will see more interesting blogs! ! !
Meow meow meow, you are really important to me!
Table of contents
1. Background color background-color
2. Background-image background-image
3. Background image tiling method background-repeat
4. Fixed/scrolling background image background-attachment
5. Position the background image background-position
6. Background abbreviation background
Preface
Meow meow, I'm doing a sneak attack, come back early to see my dear friends!
On the 11th, Meow Meow will be Lao Lao’s daily update expert!
Today is also a day to love you, meow~
CSS color and background
Color color property
The color attribute is used to set the color of the element font. The syntax of this attribute is relatively simple, but the values are relatively diverse, and can be in the form of color names, functions, hexadecimal numbers, etc.
Color name. Use red , blue , yellow and other CSS predefined parameters representing colors. CSS predefines 17 colors, as shown in the table below.RGB() function. Using rgb ( RRR, GGG, BBB ) or rgb ( r%, g%, b% ) , the letters R or r , G or g , B or b respectively represent the color components red, green, and blue. The value of the former parameter is 0 to 255 , and the value of the latter parameter is 0 to 100 .Hexadecimal number. Use the form of " #RRGGBB" or " #RGB ", in which each hexadecimal digit ranges from 0 to F , such as #FFC0CB for pink .
backgroundbackground property _
Used to set the background color, background pattern, etc. of the specified element.
1.background-color : keyword | RGB value | transparent
2.background-image : url(*.jpg) | none
3.background-attachment : scroll | fixed
4.background-repeat : repeat | repeat-x | repeat-y |no-repeat
5.background-position : percentage | length | keyword
When setting the image position using percentage and length, you must specify two values, and both values must be separated by spaces .
Keywords in the horizontal direction mainly include left , center , and right .
Keywords in the vertical direction mainly include top , center , and bottom .
1.Background color background-color
The background-color property in CSS is used to specify the background color for all HTML elements.p{background-color:gray} /*将段落元素的背景颜色设置为灰色*/If you need to change the background color of the entire web page, apply the background-color attribute to the <body> element .body{background-color:cyan} /*将整个网页的背景颜色设置为青色*/
2. Background-image background-image
The background-image property in CSS is used to set a background image for an element.If you reference pictures in other local folders, just give the corresponding folder path.p{background-image:url(image/flower.jpg)}If you need to change the background image of the entire web page, apply the background-image attribute to the <body> element .body{ background-image:url(image/flower.jpg)}
3. Background image tiling method background-repeat
The background-image property in CSS is used to set the tiling method of the background image. If this property is not set, the default background image will be repeatedly tiled both horizontally and vertically. This attribute has four different values.
4. Fixed / scrolling background image background-attachment
The background-attachment property in CSS is used to set whether the background image is fixed on the screen or scrolls with the page. This attribute has two values.
5. Position the background image background-position
By default, the background image is placed in the upper left corner of the element. The background-position property in CSS is used to set the position of the background image. The image can be placed at the specified position based on a combination of property values. This property allows the background image to be positioned using a combination of two property values.
background-position: 水平方向值 垂直方向值Both horizontal and vertical attribute values can be expressed in the form of keywords, length values or percentages.
(1) Keyword positioningThere are 5 keywords that can be used in the background-position attribute value .
background-position:left bottom , displayed in the lower left corner. If the abbreviation is a parameter value , another one uses center to complete the omitted keywords.
(2) Length value positioning
The length value positioning method is to use the point in the upper left corner of the element's inner margin area as the origin, and then interpret the offset of the point in the upper left corner of the background image from the origin.
For example, background-position: 100px 50px means that the upper left corner of the background image is 100 pixels to the right and 50 pixels downward from the upper left corner of the element.
(3) Percent positioning
The positioning method of percentage values is more complicated. It aligns the HTML element and its background image at the specified point, and the specified point is interpreted as a percentage. For example, background-position: 0% 0% means that the upper left corner of the background image is placed at the origin of the upper left corner of the HTML element.
And background-position: 66% 33% refers to the alignment of the HTML element and the background image at 2/3 of the horizontal position and 1/3 of the vertical position.
If abbreviated as a parameter value, it only represents the horizontal position, and the omitted vertical position defaults to 50% . This method is similar to the abbreviation of the keyword positioning method, using center to complete the omitted keywords.
6. Background abbreviation background
p{ background-color:silver; background-image:url(image/football.png); background-repeat:no-repeat; }p{ background: silver url(image/football.png) no-repeat }The two pieces of code have the same effect!
CSS list styles
1. Style type list-style-type
The list-style-type attribute in CSS can be used to set the logo style of the list.
2. Style image list-style-imageThe list-style-image attribute in CSS can be used to set the logo icon of the list. The logo icon can be an image file from a local or network source.If the list-style-image attribute has been used to declare the list's logo icon, the list-style-type attribute cannot be used to declare the list's logo type at the same time, otherwise the latter will have no display effect.When the list-style-image attribute value is none or the set image path is wrong, the list-style-type attribute will take effect.
3. Style position list-style-positionThe list-style-position attribute in CSS is used to define the position of the list mark. There are three attribute values.
4. Style abbreviation list-styleThe list-style attribute in CSS can be used to summarize the other three font attributes, and the related attribute values are summarized and written on the same line. When you need to declare multiple list attributes for the same list element, you can use the list-style attribute for abbreviation.
[list-style-type] [list-style-position] [list-style-image]Attribute values are separated by spaces. If one of the attributes is not specified, it can be omitted.
ul{ list-style-type: circle; list-style-position: outside }ul{ list-style: circle outside}The effect of the two pieces of code is the same!
CSS box model
What is the CSS box model?
The W3C organization recommends that all objects on the web page be placed in a box . Designers can control the properties of this box by creating definitions . These objects include paragraphs, lists, titles, pictures, and layers.The box model mainly defines four areas of MBPC : border ( m argin) , border ( b order) , filling ( p adding) and content ( content ) .The hierarchy, relationship and mutual influence between margin , background-color , background-image , padding , content and border .CSS box model structure
Boundary attribute settings
The border attribute is margin , also known as margin, which represents the distance between the box border and the page border or other boxes. The attribute value is the length value, percentage or auto . The attribute effect is the "blank" surrounding the element border.Margins can also be set through single-sided attributes, which will not affect other margins, and these single-sided attributes can be set to one or more, with 4 single-sided margin attributes:margin-top ： 20px; margin-right ： 20px;margin-bottom ： 20px; margin-left ： 20px;margin:10px; /* 4 sides are all 10px */margin:10px 20px; /* up and down | left and right* /margin:10px 20px 30px; /* top | right left | bottom * /margin:10px 20px 30px 40px; /* top | right | bottom | left* /
border-width : thin , medium , thick , length ; composite attribute, divided into four sub-attributes: border- top -width , border- right -width , border- bottom -width , border- left -width .border-style : none|dotted|dashed | solid|double|groove [ concave line ] |ridge [ convex line ] inset [ embedded line ] |outset [ embedded line ] ;--Composite attribute, divided into four sub-attributes: top , right , bottom and left .
border-color : color keyword | RGB value ;border : border thickness, border style , border color ;border:2px solid #ff33ee;
Fill property settings
The inner border of an element mainly refers to the blank distance between the border and internal elements . When using the padding attribute to set the inner border of an element, it also includes 5 attributes, and there are also four setting methods.Basic syntax:padding: length | percentage
padding-top、padding-right、padding-bottom:同上
padding:20px 30px 40px 60px;/**/
padding:20px 30px 40px; /* top | right | bottom | left */
padding:20px 30px; /* top | left and right | bottom */
padding:20px; /* The top, right, bottom and left are the same */
Homework
Enter the following code and pay attention to the difference between row-level elements and block-level elements.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>块级元素与行级元素高宽度的区别</title>
<style>
.special{
border:1px solid #036;
width:200px;
height:50px;
background:#ccc;
margin:5px;
/*display:block;*/
}
</style>
</head>
<body>
<div class="special">这是div元素</div>
<span class="special">这是span元素</span>
</body>
</html>
- Web page title: Document flow positioning
- The main content of the web page is:
<div id="nav">
<a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a>
</div>
- Use internal style sheets to set the following style effects for web pages:
- Use global styles to clear browser defaults.
- The nav navigation bar is displayed centered relative to the page, 300px wide, and the text is centered.
- The style of the a tag: 80px wide, 30px high; the bottom border line is set to: 1px solid gray line; the font size is 14px, the text is centered, the line height is 30px; the text is not underlined.
- The mouse hover is the style of the hyperlink: white text, gray background, 1px solid border, where the color of the upper right and left border lines is set to orange.
- If you want to achieve the display effect as shown in the figure below, what attributes of the a tag need to be set? Please add it to the style of the a tag.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文档流定位</title>
<style>
*{margin:0;
padding:0;
}
#nav{
margin:0 auto;
width:300px;
text-align:center;
}
a{
width:80px;
height:30px;
border-bottom:1px solid #666;
font-size:14px;
text-align:center;
line-height:30px;
height:30px;
width:80px;
text-decoration:none;
display:inline-block;
}
a:hover{
color:#fff;
background-color:#999;
border:1px solid;
border-top-color:#FF8000;
border-right-color:#FF8000;
border-left-color:#FF8000;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</div>
</body>
</html>Summarize
Introduced CSS style attributes such as color, background, and list . Some of these attributes have sub-attributes, which describe the appearance style from different aspects, so they are more flexible. You can use a single sub-attribute to define a certain aspect of the style, or you can use a composite attribute to define the overall style. When using it, you should pay attention to the relationship between attributes and attributes. the order and constraints between them.The focus is on the CSS box model, which is the essence of CSS and also the difficulty in learning. If the page element is regarded as a "box", the element has important concepts such as margin , border , padding , and element content . The box has 4 sides, so each of these attributes has 4 single-sided sub-attributes. When using it, you can directly apply the single-sided sub-attribute to a certain side to set its style, or you can set the styles of each side in a certain order. The method is more flexible.
I hope you are happy, I hope you are healthy, I hope you are happy, I hope you like it!
Finally, follow meow, follow meow, follow meow, you will see more interesting blogs! ! !
Meow meow meow, you are really important to me!
