CSS study notes - dark horse programmer front-end video
-
- 1. Common attributes of css:
- 2. How to import css:
- 3. Basic selector
- 4. Font style
- 5. Advanced selector
- 6. Background properties
- 7. Element display mode
- 8. Three major features of css
- 9 box model
- 10. Structural pseudo-classes
- 11. Pseudo-elements
- 12. Float (commonly used)
- 14. Positioning
- 15. Decoration
- css writing order
- tips：
The following is the front-end video of the dark horse programmers who are studying on station b. Record the study notes for your own review. If you need to learn, you can go to station b to learn the original video
1. Common attributes of css:
css is written in the style tag
- color: text color
- font-size: font size
- background-color: background color
- width: width
- height: height
<style>
p {
/* 文字颜色变红色 */
color: red;
/* 字变大 px:像素 */
font-size: 30px;
/* 背景颜色 */
background-color: green;
/* width height; */
width: 400px;
height: 400px;
}
</style>
2. How to import css:
- Embedded: css is written in the style tag (only applied to the current page, small case)
<head>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>这个div是什么颜色</div>
</body>
- Outline: css is written in a separate .css file (applied to multiple pages, used in projects)
<head>
<!-- 关系: 样式表 -->
<link rel="stylesheet" href="./my.css">
</head>
<body>
<!-- css外联式 -->
<p>这是p标签</p>
</body>
<!-- .css: -->
p {
color: red;
}
- Inline style: css is written in the style attribute of the label (acts on the current label, used with js)
<body>
<div style="color: green; font-size: 30px;">这是div标签</div>
</body>
3. Basic selector
3.1 Label selector
标签名 { css属性名：属性值； }
- The label selector selects a type of label, not a single one
- The label selector can find the corresponding label no matter how deep the nesting relationship is
<head>
<style>
/* 选择器 {} */
/* 标签选择器 就是 以标签名命名的选择器 */
p {
color: red;
}
/* 标签选择器 选中所有的这个标签都生效css */
</style>
</head>
<body>
<p>pppppppp</p>
</body>
3.2 Class selectors (most commonly used)
.类名{css属性名： 属性值}
- All tags have a class attribute
- Class names can consist of numbers, letters, underscores, and dashes, but cannot start with numbers or dashes
- A tag can have multiple class names at the same time, separated by spaces
<head>
<style>
.red {
color: red;
}
.size {
font-size: 66px;
}
</style>
</head>
<body>
<!-- 类: 定义 和 使用才能生效 -->
<!-- 一个标签可以使用多个类名 , 需要空格隔开即可 -->
<p class="red size">222</p>
<div class="red">这个标签文字也要变红</div>
</body>
3.3 id selector
#id属性值{css属性名： 属性值}
- id attribute on all tags
- The id cannot be repeated in a page
- A tag can have only one id attribute value
- An id selector can only select one tag
<head>
<style>
/* 定义id选择器 */
#blue {
color: skyblue;
}
</style>
</head>
<body>
<div id="blue">这个div文字是蓝色的</div>
</body>
3.4 Wildcard selectors
<head>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>div</div>
<h1>h1</h1>
<span>span</span>
<p>pppp</p>
</body>
4. Font style
<head>
<style>
p {
/* 字体大小 */
font-size: 30px;
/* 字体粗细-加粗：bold/700，不加粗：normal/400 */
font-weight: 700;
/* 字体样式：italic倾斜,normal正常 */
font-style: italic;
/* font-family: 宋体;微软雅黑, 黑体, sans-serif */
font-family: 微软雅黑;
/* 层叠性: 后面的覆盖前面的属性 */
/* 字体颜色*/
color: red;
/* font连写属性: style weight size 字体; */
font: italic 700 100px 微软雅黑;
/* 文本缩进：1em(一个字)*/
text-indent: 2em;
/* 文本对齐方式：left center right; */
text-align: center;
/* 文本修饰：underline下划线 line-through删除线 overline上划线 none无线; */
text-decoration: none;
/* 行高line-height: 50px/1.5; */
line-height: 1.5;
/* font连写：66px 宋体 倾斜 加粗 行高是2倍 */
font: italic 700 66px/2 宋体;
/* 垂直居中技巧: 设置行高属性值 = 自身高度属性值 */
/*盒子宽度，高度，背景颜色*/
width: 552px;
height: 400px;
background-color: pink;
/* 盒子垂直居中技巧: 设置行高属性值 = 自身高度（背景不是字号）属性值 */
line-height: 400px;
/* 盒子水平居中技巧: */
margin: 0 auto;
}
/* 控制placeholder的样式 */
.search input::placeholder {
font-size: 14px;
color: #bfbfbf;
}
</style>
</head>
<body>
<p>段落文字</p>
</body>
Points of confusion:
Horizontal centering of text, inline elements, and inline block factors: text-align: center;
Centering of block-level elements: margin: 0 auto;
Vertical centering of single-line text:line-height
5. Advanced selector
5.1 Composite selectors
- Descendant selector (
选择器1 选择器2 { css }), a commonly used selector type
<head>
<style>
/* 选中div中的所有a，p中的a也会被选中 */
div a {
color: red;
}
</style>
</head>
<body>
<div>
<a href="#">这是div里面的a</a>
<p>
<a href="#">这是div里面的p里面的a</a>
</p>
</div>
</body>
- child selector (
选择器1 > 选择器2 { css })
<head>
<style>
/* 选中div中的a */
div>a {
color: red;
}
</style>
</head>
<body>
<div>
/* 只选中div中的a，不选p中的a */
<a href="#">这是div里面的a</a>
<p>
<a href="#">这是div里面的p里面的a</a>
</p>
</div>
</body>
5.2 Union selector
选择器1 ， 选择器2 { css }, select multiple selector settings at the same time, for multiple modules with similar browser layouts, which can optimize browser processing speed
<head>
<style>
/* p div span h1 文字颜色是红色 */
p,
div,
span,
h1 {
color: red;
}
</style>
</head>
<body>
<p>ppp</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>
<h2>h2</h2>
5.3 Intersection selectors
Selects the tabs that are both selected by selector 1 and selected by selector 2
<head>
<style>
p.box {
color: red;
}
</style>
</head>
<body>
<!-- 找到第一个p,带box类的, 设置文字颜色是红色 -->
<p class="box">这是p标签:box</p>
</body>
5.4 hover pseudo-class selector
The state when the mouse is hovering, common types
of selectors:hover {css}
<head>
<style>
/* 用户鼠标悬停到div的时候, 文字是绿色 */
div:hover {
color: green;
}
</style>
</head>
<body>
<div>div</div>
</body>
6. Background properties
The css layout can regard all content as a box, a small box is placed inside a big box, and the layout is the arrangement between boxes
/* 盒子宽度，高度，背景颜色 */
width: 400px;
height: 400px;
/* 红绿蓝三原色, a是透明度0-1 */
background-color: pink;
background-color: #ccc;
background-color: rgba(0, 0, 0, .5);
/*背景图片，默认水平和垂直方向平铺*/
background-image: url(./images/1.jpg);
/*背景平铺属性*/
/*repeat:平铺，no-repeat:不平铺，repeat-x:沿着水平方向平铺，repeat-y:沿着垂直方向平铺*/
background-repeat:repeat
/*背景位置:水平方向位置 垂直方向位置;或者用像素表示*/
/*水平方向：left center right*/
/*垂直方向：top center bottom*/
background-position:left top;
background-position: 50px 100px;
/*背景复合属性连写，不分前后顺序*/
/*背景色 背景图 背景图平铺 背景图位置 */
background: pink url(./images/1.jpg) no-repeat center bottom;
7. Element display mode
When setting the width and height of the inline label does not take effect, it needs to be converted to a block-level element or an inline block element according to actual needs
- block-level element (
display: block;)
- Only one line can be displayed
- Width and height can be set
Block-level tags:div,p,h
- inline element (
display: inline;)
- A row can display multiple
- Width and height cannot be set
Inline tags:a,span
- inline-block element (
display: inline-block;)
- A row can display multiple
- Width and height can be set
- Inline-block tags:
input,textarea
tips
- You can use the statement in brackets to change the default display characteristics of elements, composite layout requirements
- Block-level elements can nest other elements, p tags do not nest div, p, h and other block-level elements
- a tag can nest any element, except a tag
8. Three major features of css
inheritance, cascading, priority
8.1 Inheritance
Pros: less code
- The properties of the control text can all be inherited; those that are not control text cannot be inherited
- The element has the browser's default style, but the browser's default style is displayed first
- The color of the a tag will be invalid
- The font-size of h series tags will be invalid
Properties that can be inherited:
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
8.2 Cascading
- Setting different styles for the same label will work together on the label
- Set the same style for the same tag, and the final style will take effect
8.3 Priority
Different selectors have different priorities, and selector styles with high priority will override selector styles with low priority.
Priority: Inheritance < wildcard selector < label selector < class selector < id selector < inline style < !important
!important cannot increase the priority of inheritance, as long as the priority of inheritance is the lowest!
Weight superposition calculation
Weight superposition calculation case:
- First determine whether the selector can directly select the label, if not, it is inherited, and the priority is the lowest
- If it can be selected directly, it is not an inheritance, see if there is !important, if there is, this item has the highest priority
- If there is no case, use the weight calculation formula to judge who has the highest weight
<head>
<style>
/* (行内, id, 类, 标签) */
/* (0, 1, 0, 1) 权重最高*/
div #one {
color: orange;
}
/* (0, 0, 2, 0) */
.father .son {
color: skyblue;
}
/* 0, 0, 1, 1 */
.father p {
color: purple;
}
/* 0, 0, 0, 2 */
div p {
color: pink;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="one">我是一个标签</p>
</div>
</body>
9 box model
Easy layout of web page elements
<style>
/* 纸箱子, 填充泡沫 */
div {
/*盒子宽度和高度，背景颜色，背景图片*/
width: 300px;
height: 300px;
background-color: pink;
background-image: url();
/* 边框线 == 纸箱子 */
/*border：粗细 样式（solid实线，dashed虚线，电线dotted） 颜色*/
border: 1px solid #000;
/*单方向设置：border-top，border-bottom，border-left，border-right，*/
border-left: 5px dotted #000;
/* 内边距 == 填充泡沫 : 出现在内容和盒子边缘之间 */
/*单方向设置：padding-top，padding-bottom，padding-left，padding-right，*/
padding-top: 20px;
/* 添加了4个方向的内边距 */
padding: 20px;
/* padding 最多取4个值,上，右，下，左的顺序，没有的属性看对面 */
/* 外边距 : 出现在两个盒子之间, 出现在盒子的外面，四个方位，同上*/
margin: 50px;
}
/*自动清除内外边距*/
* {
margin: 0;
padding: 0;
/* 內减模式 */
box-sizing: border-box;
}
/*清除ul前边的小黑点*/
ul {
list-style:none;
}
/*清除a自带的下划线*/
a {
text-decoration: none;
}
</style>
tips
- The box in the horizontal layout, the final distance is the sum of the left and right margins
- The vertical layout box, the final distance is the maximum value of the upper and lower margins - only one box is set
- For nested block-level elements, the margin-top of the child element will act on the parent element – set overflow:hidden for the parent element
- When setting margin and padding for inline elements, the horizontal margin and padding layout is valid, and the vertical margin and padding layout is invalid
10. Structural pseudo-classes
Used to find elements, which can reduce the dependence on classes, and is often used to find child elements in parent selectors
<style>
/* 选中第一个 */
li:first-child {
background-color: green;
}
/* 最后一个 */
li:last-child {
background-color: green;
}
/* 任意一个 */
li:nth-child(5) {
background-color: green;
}
/* 倒数第xx个 */
li:nth-last-child(1) {
background-color: blue;
}
/*公式中n从0开始*/
/* ** 偶数 */
li:nth-child(2n) {
background-color: green;
}
/* *** 奇数 */
li:nth-child(2n+1) {
background-color: green;
}
/* 找到前3个 */
li:nth-child(-n+3) {
background-color: green;
}
/* *** 3的倍数 */
li:nth-child(3n) {
background-color: green;
}
</style>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
</ul>
</body>
11. Pseudo-elements
Pseudo-elements are used to create content, and non-main content in general pages can use pseudo-elements
The difference between pseudo elements and elements is that elements are in Html, while pseudo elements are written in css
- Pseudo-elements are inline elements by default, setting width and height does not take effect
- The content attribute must be set to take effect
<head>
<style>
.father::before {
/* 在内容之前加入元素 */
/* content属性必须添加, 否则伪元素不生效 */
content: '我';
color: green;
width: 100px;
height: 100px;
background-color: blue;
/* 默认是行内元素, 宽高不生效 */
display: block;
}
/* 在内容之后加入元素 */
.father::after {
content: '你';
}
</style>
</head>
<body>
<!-- 伪元素 通过css创建标签, 装饰性的不重要的小图 -->
<!-- 找父级, 在这个父级里面创建子级标签 -->
<div class="father">爱</div>
/*我爱你*/
</body>
12. Float (commonly used)
==Standard flow:==Also known as document flow, it is a set of layout rules that browsers adopt by default when rendering and displaying web page content, which specifies how elements should be arranged Common standard flow layout rules Floating
effect
:
- Text wraps around image
<style>
img {
float: left;
}
</style>
- Web page layout, let the vertical layout box become a horizontal layout
<head>
<style>
div {
width: 100px;
height: 100px;
}
.one {
background-color: pink;
float: left;
}
.two {
background-color: skyblue;
/* flr */
/* float: right; */
float: left;
}
</style>
</head>
<body>
<!-- 2. 网页布局: 块在一行排列 -->
<div class="one">one</div>
<div class="two">two</div>
</body>
The effect is as follows:
when the browser parses the inline block or inline label, if the label is written in a new line, there will be a distance of a space, and the space will disappear after setting the float
Floating features:
- Floating elements will break away from the standard flow (abbreviation: unlabeled), and do not occupy a position in the standard flow. When floating is set, the element does not occupy a position, and the following elements will fill in the space. The floating label defaults to the top alignment. After floating Labels have the characteristics of inline blocks.
- Floating elements are half a level above the standard flow and can cover elements in the standard flow
- Floating to find floating, the next floating element will float left and right behind the previous floating element
- Floating elements have special display effects, multiple displays in one row, and width and height can be set at the same time
- Floating elements cannot pass text-align:center or margin:0 auto (floating priority)
<style>
.one {
width: 100px;
height: 100px;
background-color: pink;
float: left;
/* margin-top: 50px; */
}
.two {
width: 200px;
height: 200px;
background-color: skyblue;
/* float: left; */
/* 因为有浮动, 不能生效 - 盒子无法水平居中 */
/* margin: 0 auto; */
}
.three {
width: 300px;
height: 300px;
background-color: orange;
}
</style>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
After the first pink box is set to float to the left, the effect is as follows:
After setting the second blue box to float, the effect is as follows:
After setting the upper edge padding for the first box, the pink box moves down
to make the version centered Elements, first add a background box, set the center and then set the partition box to float
Browser execution efficiency is higher, css writing order:
- float / display
- Box model: margin border padding width height background color
- text style
Clear the effects of floating:
**Floating effects: ** Parent-child label, child-level floating, parent-level has no height, the standard flow box behind will be affected, and displayed to the above position.
Some commonly used layouts in the process of web page creation:
clearing method:
- Add a block-level element at the end of the parent element, and set the added block-level element:
clear:both
.clearfix {
/* 清除左右两侧浮动的影响 */
clear: both;
}
- single pseudo-element removal method
.clearfix::after {
content: '';
/* 伪元素添加的标签是行内, 要求块 */
display: block;
clear: both;
/* 为了兼容性 */
height: 0;
visibility: hidden;
}
- Double Pseudo-Element Elimination Method
/* .clearfix::before 作用: 解决外边距塌陷问题*/
/* 外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置 */
/* 清除浮动 */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
/* 真正清除浮动的标签 */
.clearfix::after {
/* content: '';
display: table; */
clear: both;
}
- Set the parent element
overflow:hidden
14. Positioning
Three layout methods: standard flow, floating and positioning
The role of positioning:
- Solve the cascading effect between boxes
- The box can always be fixed at a certain position on the screen
Positioning properties: position
Positioning method:
-
Static positioning -
position: static; -
relative positioning -
position: relative;- occupy the original position
- Still specific label original display mode characteristics
- Change the position to refer to its original position
- If there are both left and right, take left as the standard; if both top and bottom have both, take top as the standard
-
absolute positioning -
position: absolute;- off-label, no space
- Change the display mode characteristics of the label: Specific inline block characteristics (coexist in one line, width and height take effect)
- First find the parent that has been positioned. If there is such a parent, use this parent as a reference for positioning; if there is a parent, but the parent is not positioned, use the browser window as a reference for positioning
- The way to find the parent with absolute positioning: Find the parent that is located nearby. If you can’t find such a parent layer by layer, use the browser window as a reference to locate (children and fathers)
- Absolutely positioned boxes cannot be centered using left and right margin auto
/* 1. 绝对定位的盒子不能使用左右margin auto居中 */
position: absolute;
/* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */
left: 50%;
/* 把盒子向左侧移动: 自己宽度的一半 */
margin-left: -150px;
top: 50%;
margin-top: -150px;
/* 位移: 自己宽度高度的一半 */
transform: translate(-50%, -50%);
/* 绝对定位的盒子显示模式具备行内块特点: 加宽度高度生效, 如果没有宽度也没有内容, 盒子的宽度尺寸就是0 */
/* 如果子级和父级的宽度相同,用width: 100%;表示宽度 */
width: 100%;
- fixed positioning -
position: fixed;- Off label - does not take up space
- Change position reference browser window
- With inline block features
.box {
position: fixed;
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: pink;
}
Offset value setting:
- horizontal-left/right: px
- vertical-top/bottom: px
Hierarchical relationship of elements in different layout methods:
- standard stream<float<positioned
- Relative, Absolute, Fixed default levels are the same
- By default, according to the writing order, the later ones come first. In addition, it can be set
z-index:整数. The integer defaults to 0. The larger the value, the higher the display order.
15. Decoration
15.1 Baseline
Baseline: There is a baseline for alignment in the text layout process, which solves the problem of vertical alignment of inline/inline block elements
Solve problem 1: The browser encounters inline and inline block tags as text, and the default text is based on the baseline object
Solution: vertical-align: middle;ordisplay: block;
Solve problem 2: The picture is centered in the middle of the box
Solution: Add a line height to the parent line-height:行高;, and then add the picture vertical-align:middle;. If you want the picture to be centered horizontally, add it to the parenttext-align:center;
/*默认基线对齐*/
vertical-align: baseline;
/*顶部对齐*/
vertical-align: top;
/*中部对齐*/
vertical-align: middle;
/*底部对齐*/
vertical-align: bottom;
15.2 Cursor
default is arrow
/* 手型，提示用户可以点击 */
cursor: pointer;
/* 工字型, 表示可以选择文字 */
cursor: text;
/* 十字型, 表示用户可以移动 */
cursor: move;
15.3 Border rounded corners
Function: Make the four corners of the box round, increase page details, and improve user experience
border-radius: 数字+px/百分比, assign values from the upper left corner, assign values clockwise, and look at the opposite corner if there is no assignment
border-radius: 10px;
border-radius: 10px 20px 40px 80px;
**Perfect circle:** The box must be square, set the border fillet to be half of the width and height of the box, and border-radiusthe maximum value can only be 50%
.one {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 100px; */
/* 50% : 取盒子尺寸的一半 */
border-radius: 50%;
}
Capsule button : the box is rectangular, set border-radiusto half the height of the box
/* 胶囊状: 长方形, border-radius取值是高度的一半 */
.two {
width: 400px;
height: 200px;
background-color: skyblue;
border-radius: 100px;
}
15.4 Display effect of overflow part
There are too many fonts, and the part that exceeds the box shows the type:
/* 默认溢出部分可见 */
overflow: visible;
/* 溢出隐藏，最常用，可以解决外边距塌陷的问题 */
overflow: hidden;
/* 滚动: 无论内容是否超出都显示滚动条的位置 */
overflow: scroll;
/* auto: 根据内容是否超出, 判断是否显示滚动条 */
overflow: auto;
15.5 Element hiding effect
/* 占位隐藏 */
visibility: hidden;
/* 不占位隐藏 */
display: none;
15.6 Element Transparency
/*opacity: 0-1之间的数字*/
opacity: 0.5;
15.7 Border merging
table {
border: 1px solid #000;
/* 注意: 一定要加给table标签 : 做细线表格 */
border-collapse: collapse;
}
15.8 Triangles
Implementation steps:
- set up a box
- Set borders of different colors around
div {
width: 100px;
height: 100px;
border-top: 10px solid pink;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid orange;
}
3. Set the width and height of the box to 0, leaving only the border
div {
width: 0;
height: 0;
/* background-color: pink; */
/* transparent: 透明 */
border-top: 10px solid pink;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid orange;
}
4. Get four triangles, select one of them, and set the color of the other triangles (borders) to be transparent
div {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid orange;
}
15.9 Selectors
1. Chaining pseudo-class selectors
Commonly used for different states of selected hyperlinks
/*选中a链接未访问过的状态*/
a:link{
}
/*选中a链接访问之后的状态*/
a:visited{
}
/*选中鼠标悬停的状态*/
a:hover{
}
/*选中鼠标按下的状态*/
a:active{
}
2. Focus pseudo-class selector
Used to select the state when the element gets the focus, often used in form controls
/* 获得焦点的状态 */
/* 获得焦点: 把光标点到input里面; 失去焦点: 把光标从input里面拿出来 */
input:focus {
background-color: pink;
}
3. Attribute selector
Select elements through HTML attributes on elements, often used to select input tags
/* text:背景色是粉色; password背景色是skyblue */
input[type='text'] {
background-color: pink;
}
input[type="password"] {
background-color: skyblue;
}
15.10 Item Style Supplement
1. Sprite map
Function : In the project, multiple small pictures are combined into one big picture. This big picture is called a sprite map
Advantages : reduce the number of server transmissions, reduce the pressure on the server, and improve page loading speed
Steps to use :
- Create a box and set the size of the box to be the same as the size of the thumbnail
- Set the sprite image as the background image of the box
- Modify the position of the background image, measure the coordinates of the upper left corner of the small image through pxcook, and set the negative value to the background-position of the box: xy
2. Background image size
background-size：宽度 高度；
/*常用*/
background-size: 300px;
/*相对于当前盒子的宽高百分比*/
background-size: 50%;
/* 如果图的宽或高与盒子的尺寸相同了, 另一个方向停止缩放 -- 导致盒子可能有留白 */
background-size: contain;
/* 保证宽或高和盒子尺寸完全相同 , 导致图片显示不全 */
background-size: cover;
/* 工作中, 图的比例和盒子的比例都是相同的, contain 和cover效果完全相同; */
3. Text Shadow
Function: Ability to use sprites, add shadow effects to elements, and allow elements to complete transition effects
text-shadow: h-shadow v-shadow blur color;
/*h-shadow:水平偏移量，允许负值*/
/*v-shadow:垂直偏移量，允许负值*/
/*blur:模糊度*/
/*color:阴影颜色*/
4. Box Shadow
Add a shadow effect to the box
/* box-shadow:h-shadow v-shadow blur spread color inset;*/
box-shadow: 5px 10px 20px 10px green inset;
/*h-shadow:水平偏移量，允许负值*/
/*v-shadow:垂直偏移量，允许负值*/
/*blur:模糊度*/
/*spread:阴影扩大*/
/*color:阴影颜色*/
/*设置为内部阴影*/
5. Transition
Function: Let the style of the element change slowly, enhance the interactive effect, often used with hovertransition: 属性 时间；
/* 过渡配合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;
}
15.11 Pre-cognition of the project
1. Skeleton structure label
/*<!DOCTYPE html>文档类型声明，告诉浏览器该网页的 HTML版本,DOCTYPE需要写在页面的第一行，不属于HTML标签*/
<!DOCTYPE html>
<!-- zh-CN:中文网站,en:英文-->
<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>
2. SEO three major labels
Function: Search engine optimization, let the website rank high on the search engine
title: Web page title tag
description: Web page description tag
keywords: Web page keyword tag
<!-- meta:desc -->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
<!-- meta:kw -->
<meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
3.ico icon settings
The small icon displayed on the left side of the tab title, it is customary to use the icon in .ico format
<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">
4. Version heart
Function: Constrain the subject content of the page in the middle of the webpage, so that screens of different sizes can see the main content of the page. Commonly used class names:container、wrapper、w
.container {
width: 1240px;
margin: 0 auto;
}
css writing order
-
layout properties
display、position、float、clear、visibility、overflow -
Box model + background
width、height、margin、padding、border、background -
text content property
color、font、text-decoration、text-align、line-height -
embellishment attribute
cursor、border-radius、text-shadow、box-shadow
Generally, the elements that every css layout needs to have at the beginning:
/* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
* {
margin: 0;
padding: 0;
/* 內减模式 */
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
tips：
-
The main navigation of the web page; it must be a tag nested in the li tag,
-
Google error checking tool:
-
PxCook tool
Measure size and color, from outside to inside, first relax the high background color, then put the content, adjust the position of the content, control the text details -
The position of the background image is responsible for 2 things: changing the position of the arrow inside the box; changing the position of the sprite, resulting in inaccurate dimensions measured in the sprite There are 2
solutions:- Write the position attribute of the background image, and use Google's debugging tool to debug the specific position value
- When writing the label, a is responsible for the box, and a span is added inside to be responsible for the arrow