1.1 Chaining pseudo-class selectors
➢ Scenario: Commonly used to select different states of hyperlinks
➢ Selector syntax:
➢ Note:
• If you need to achieve the above four pseudo-type state effects at the same time, you need to write the memory formula in the order of LVHA
: Your boyfriend gave you an LV bag Package, you are happy HA lol
. Among them: the hover pseudo-class selector is used more frequently, and is often used to select the hovering state of various elements
: the hover pseudo-class selector is used more frequently,
2.1 Focus pseudo-class selector
➢ Scene: used for the state when the selected element gets the focus, commonly used in form controls
➢ Selector syntax:
used for the state when the selected element gets the focus, often used in form controls
input:focus{
background-color:skyblue;}
➢ Effects:
• When the form control gets the focus, the outer outline will be displayed by default When the form control gets the focus, the outer outline will be displayed
by default
summary
➢ What pseudo-class selector can be used when the selected form control gets the focus?
• :focus { }
When the selected form control gets the focus, what pseudo-class selector can I use? :focus{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 获得焦点的状态 */
/* 获得焦点: 把光标点到input里面; 失去焦点: 把光标从input里面拿出来 */
input:focus {
background-color: pink;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
<input type="button">
</body>
</html>
input:focus{background-"pink;}
3.1 Attribute selector
➢ Scenario: Select elements through HTML attributes on elements, often used to select input tags
➢ Selector syntax:
Select elements through HTML attributes of elements, often used to select input tags
E[attr] selects E elements with attr attributes
strong class ="one" attribute name: attribute of the attribute value label
summary
➢ How to select all the text boxes in the page and use the attribute selector?
• input[type="text"] { }
input[type="text"]{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* text:背景色是粉色; password背景色是skyblue */
input[type='text'] {
background-color: pink;
}
input[type="password"] {
background-color: skyblue;
}
/* input:nth-child(1) {
} */
</style>
</head>
<body>
<input type="text">
<input type="password">
</body>
</html>
input[type=‘text’],input[type=‘password’]
input[type=‘text’],input[type=‘password’]
input:nth-child(1){}
input:nth-child(1){}
1. Supplementary project style
1.1 Introduction to sprites
Ø Scenario: In the project, multiple small pictures are combined into a large picture, which is called a sprite.
Ø Advantages: Reduce the number of server sending, reduce the pressure on the server, and improve the page loading speed.
Ø For example: need to display 8 in the web page Small picture • Send 8 small pictures separately → send 8 times 
• Combine a sprite and send → send once
Ø What are the advantages of sprites?
• Reduce server sending times, reduce server pressure, and improve page loading speed
1.3 Steps for using sprites
- create a box
- Measure the size of the small picture through PxCook, and set the width and height of the small picture to the box
- Set the sprite as the background image of the box
- Measure the coordinates of the upper left corner of the small picture through PxCook, and set the negative value to the background-position of the box: xy
Set the sprite image as the background image of the box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 定位盒子居中: left和top设置50%, 把盒子移动到浏览器的中间(盒子的左和顶到浏览器的中间) */
/* 把盒子向左和上移动宽度和高度的一半 */
.box {
position: absolute;
left: 50%;
/* margin-left: -200px; */
/* transform: translate(-50%); */
top: 50%;
/* margin-top: -150px; */
transform: translate(-50%, -50%);
/* margin: 0 auto; */
width: 400px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
PxCook takes a negative value to the background-position:xy of the box;
adding a background image requires adding a position
1.4 Summary
Ø What are the steps to use sprites? 1. Create a box 2. Set the size of the box to the size of the small image 3. Set the sprite image to be the background image of the box 4. Negative value of the upper left corner of the small image, set the background-position of the box: xy
2.1 Background image size
Ø Function: set the size of the background image, Ø
Syntax: background-size: width and height;
Ø Value: 
number + px;
It will exceed the maximum
cover coverage of the box, and the picture will be scaled proportionally until it just fills the entire box and there is no blank.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
width: 18px;
height: 24px;
background-color: pink;
background-image: url(./images/taobao.png);
/* 背景图位置属性: 改变背景图的位置 */
/* 水平方向位置 垂直方向的位置 */
/* 想要向左侧移动图片, 位置取负数; */
background-position: -3px 0;
}
b {
display: block;
width: 25px;
height: 21px;
background-color: green;
background-image: url(./images/taobao.png);
background-position: 0 -90px;
}
</style>
</head>
<body>
<!-- <img src="./images/taobao.png" alt=""> -->
<!-- 精灵图的标签都用行内标签 span, b, i -->
<span></span>
<b></b>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height:300px;
background-color: pink;
background-image: url(./images/1.jpg);
background-repeat: no-repeat;
/* background-size: 300px; */
/* background-size: 50%; */
/* 如果图的宽或高与盒子的尺寸相同了, 另一个方向停止缩放 -- 导致盒子可能有留白 */
background-size: contain;
/* 保证宽或高和盒子尺寸完全相同 , 导致图片显示不全 */
/* background-size: cover; */
/* 工作中, 图的比例和盒子的比例都是相同的, contain 和cover效果完全相同; */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
backgroun-size: 50%;
ensure that the width and height are exactly the same as the box size, resulting in incomplete picture display. During the cover
work, the proportion of the picture and the box are the same, and the effect of contain and cover is exactly the same.
Ø Set the background picture size What are the properties?
• background-size: width and height;
2.3 Background continuous writing expansion
Complete continuous writing:
background:color image repeat position/size
Ø Note:
• When setting background-size and background continuous writing at the same time, you
need to pay attention to the coverage problem.
Ø Solution:
1. Either write the following in a
separate style. 2. Or write a separate style. in the writing
3.1 Text Shadow
Ø Function
: add
shadow effect to text to attract users'
attention The larger the value, the more to the right inset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
box-shadow: 5px 10px 20px 10px green inset;
/* 注意: 外阴影, 不能添加outset, 添加了会导致属性报错 */
/* box-shadow: 5px 10px 20px 10px green outset; */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Ø What are the properties of the text shadow? • text-shadow Ø What are the common values of text shadow?
blur blur color shadow color h-shadow horizontal offset v-shadow vertical offset
4.1 Box Shadows
Ø Function: Add a shadow effect to the box to attract users' attention and reflect the production details of the page Ø Attribute name: box-shadow Ø Value:
4.2 Summary
Ø What are the properties of the box shadow?
• box-shadow
Ø What are the value parameters of box shadow?
5.1 Transition
Ø Function:
Let the style of the element change slowly, often used with hover, to enhance the interactive experience of the web page
Ø Attribute name: transition
Ø Common values:
Ø Note:
- Transition needs: The default state and the hover state style are different in order to have a transition effect
-
- The transition property adds 3 to the element itself that needs to be transitioned. The transition property is set in different states, and the effect is different. ① Set to the default state, the mouse moves in and out, there is a transition effect. ② Set the hover state, the mouse moves in, there is a transition effect, and there is no transition when the mouse moves out. Effect
The transition property adds the transition property to the element itself that needs to be
transitioned. The effect is different in different states.
For the default state, the mouse moves in and overflows have an excessive effect. Set the hover state, and the mouse moves in and has an excessive effect, and removes no excessive effect.
transition:width 1s ,background-color:2s;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 过渡配合hover使用, 谁变化谁加过渡属性 */
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 宽度200, 悬停的时候宽度600, 花费1秒钟 */
/* transition: width 1s, background-color 2s; */
/* 如果变化的属性多, 直接写all,表示所有 */
transition: all 1s;
}
.box:hover {
width: 600px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<!-- 中文网站 -->
<html lang="zh-CN">
<head>
<!--charset="UTF-8" 规定网页的字符编码 -->
<meta charset="UTF-8">
<!-- ie(兼容性差) / edge -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 宽度 = 设备宽度 : 移动端网页的时候要用 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
!DOCTYPE html parses web pages in the same version!DOCTYPE html
5.2 Summary
Ø What is the property name of the transition property? • transition Ø What are the common values of transition properties
? Ø Who are the transition properties set for? • Transition attributes add to the element itself that needs to be transitioned
Second, the project pre-cognition
1.1 Examples in life
Ø Web page: equivalent to each page Ø Website: equivalent to a book • When users flip through the pages, they see the content on each page • When multiple pages are integrated together, it is a complete book
1.2 The relationship between webpage and website
Ø In the Internet, a website is similar to a book, and a webpage is every page of the book • For example: Taobao, Jingdong, Dark Horse Programmer, etc. are a website, similar to a book • Every page in these websites, Such as: home page, login page, product page is each individual page, similar to each page • Multiple pages with the same theme are integrated together, which is called a website.
1.3 Concepts of web pages and websites
Ø Webpage: Each "page" in the website. For example: Taobao's homepage, Taobao's login page, Taobao's product page, etc. Ø Website: A collection of web pages that provide a specific service. For example: Baidu, Taobao, Jingdong, dark horse programmers, etc.;
1.4 Summary
Ø What is the website? • A collection of web pages that provide a specific service. Ø What is a web page? • Every “page” in the website
2.1 DOCTYPE document description
Ø Document type declaration, telling the browser the HTML version of the web page Ø Note: DOCTYPE needs to be written on the first line of the page, not an HTML tag
2.2 Webpage language
html lang=“en”
identifies the language used by the web page Ø Function: Search engine classification + browser translation Ø Common language: zh-CN Simplified Chinese / en English
Function: Search engine classification + browser translation
zh-CN Simplified Chinese zh -CN Simplified Chinese
2.3 Character encoding (understand)
Ø Identify the character code used by the webpage Ø Function: The character code for saving and opening needs to be set uniformly, otherwise garbled characters may appear Ø Common character codes:
- UTF-8: Universal code, internationalized character encoding, including texts in global languages
-
- GB2312: 6000+ Chinese characters
-
- GBK: 20000+ Chinese characters
- Ø Note: In development, use UTF-8 character encoding
uniformly, just emta charset="UTF-8"
2.4 Summary
Ø What is the role of? • Document type declaration, telling the browser the HTML version of the web page Ø How to set the language of the web page to Chinese? • Ø What is the unified character encoding used in development? •