Java-day19 study notes

day18 review

Insert picture description here

day19

One, div and span tags

div是html中一个普通的标签,主要用来当做容器,一般用于配合css完成网页的基本布局,
span是html中一个普通的标签,一般作为文本容器 

1.1 Difference

div是一个块级标签,独占一行,能存放所有内容(除了html、head和body)
span是一个行级标签,内容会在一行内追加,只能嵌套像文本、图片、超链接

Two, CSS

Cascading Style Sheets Cascading Style Sheets

Stacking: layer by layer

Style sheet: a collection of styles

Note: learning html is learning tags, learning CSS mainly learns styles (attributes), selectors

1.1 Role

1. 美化页面,修饰页面  
2. 之前是html自己完成内容和样式,而现在我们可以通过css来完成样式的内容,并且可以批量的完成的样式的添加和修改

html当做毛坯房, CSS当做装修。

1.2 Why use CSS

之前的问题:
    1. 之前用html属性完成样式的时候有很多问题,比如字体的大小只能在1和7之前选择,不能设置更大的字体,还有超链接的下换线不能去除等
    2. 我们给标签设置属性之前需要先记忆标签是否有此属性,如果没有的话,写上也没有效果。
    3. 有些效果需要嵌套好几层标签才能实现
    
而CSS可以解决如上问题
	1. css不用记忆哪些属性属于哪个标签
	2. 当需求变更时我们不需要修改大量的代码就可以满足需求

1.3 How to use

① Format

选择器 {
	属性名1 : 属性值1;
    属性名2 : 属性值2;
    属性名3 : 属性值3
}

注意事项:
1. 属性名和属性值之间通过英文状态的 : 连接
2. 大括号中可以放多对属性名和属性值,但是它们之间要通过分号 ; 分隔
3. 最后一个属性名和属性值的后面可以不加 ;

② Where to put css to use [introduction method]

HTML is a language; CSS is also a language. If you want CSS to modify the style of HTML, you must introduce CSS into HTML. That is: to solve the problem of where to write the CSS code

行内样式
内部样式
外部样式

1.4 Introduction

① The first type: inline style [inline style] [understand]

把CSS代码内嵌到HTML代码里,直接通过标签的style属性进行设置
<p style="color: green;">我是文字</p>

② The second type: internal style [Master]

把CSS代码写在HTML文档内部,通过style标签来结合
1. 需要在head标签中写一个style标签
2. 在style标签中统一写css相关的样式设置

注意:
	1. style标签中,可以写上type="text/css",也可以不写
	2. style标签,一定要放在head标签中
<style type="text/css">

        p {
     
     
            color: pink;
            font-size: 50px
        }
</style>

③ The third type: external style [master]

把CSS代码写在独立的CSS文件里,通过link标签结合
1. 将css样式写在一个后缀为css的文件中
2. 在html文件中引入css文件

注意:引入外部css文件,是在head标签中写一个link标签引入的
<link rel="stylesheet" href="../css/bb.css">

④ The priority of the three introduction methods

就近原则,也就是距离要修饰的标签最近的引入方式产生效果

1.5 selector

Selector: used to select HTML elements (tags) for style modification

① Basic selector

Selector description grammar Example
Label selector Select tags based on HTML tag name 标签名称{} div{ color:red; }
ID selector Select label based on id attribute value #id值{} #d1 { color:blue; }
Class selector Select the label according to the class attribute value (class name) .类名{} .c1 { color:yellow; }
Universal selector Select all tags *{} *{ color: pink;}

② Selector priority

ID选择器 > 类选择器 > 标签选择器 > 通用选择器

注意:如果优先级相同,那么就满足就近原则

③ Extended selector

The combination of multiple basic selectors can select labels more flexibly

Selector description grammar Example
Level selector Select tags based on HTML tag name 祖先 后代 div a{ }
Attribute selector Filter elements based on the value of the specified attribute [属性='值'] input[type='text'] { }
Union selector Combine the results of multiple selectors 选择器1,选择器2,... .c1, span { }

④ Pseudo-class selector [understand]

Selector description Example
:link Select the normal hyperlink a:link{}
:visited Select the hyperlinks that have been visited a:visited{}
:hover Select the hyperlink on mouseover a:hover{}
:active Select the hyperlink pressed by the mouse a:active{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-伪类选择器</title>

    <style>

        /*超链接默认的颜色*/
        a:link{
     
     

            color: blueviolet;
        }
        /*超链接被访问之后的颜色*/
        a:visited{
     
     

            color: mediumvioletred;
        }
        /*鼠标悬浮在超链接上方显示的颜色*/
        a:hover{
     
     

            color: green;
        }
        /*鼠标点击不松开的颜色*/
        a:active{
     
     

            color: pink;
        }

        /*注意:一定要确保顺序为lvha*/

    </style>

</head>
<body>

<a href="https://www.baidu.com">百度一下,你就知道</a>

</body>
</html>

Hyperlink pseudo-class

1.6 common attributes

CSS provides a large number of styles (attributes) to modify HTML tags. What we need to know are: background attributes, text styles, and font attributes.

① Background attributes

Features Attribute name Attribute value
Background color background-color 1. Color constants, such as: red
2. Use hexadecimal, such as: #ABC
3. Use rgb for red, green, and blue (red, green, blue)
Background picture background-image url(图片的路径)
Tiling background-repeat repeatdefault. Background image will be repeated in the vertical and horizontal directions
repeat-xbackground image will be repeated in the horizontal direction.
repeat-yThe background image will repeat in the vertical direction.
no-repeatThe background image will only be displayed once.

② Text style

Features Attribute name Attribute value
colour color colour
Set row height line-height Pixel
Text modification text-decoration underlineUnderline
overlinecrossed the
ine-throughstrikeout
nonedo not line
Text indent text-indent For indenting text, you can use em units.
Text alignment text-align leftArrange the text to the left.
rightArrange the text to the right.
centerArrange the text in the middle.
Default value: Determined by the browser.

③ Font attributes

Features Attribute name effect
Font name font-family Set the font, the machine must have this font
Set size font-size Pixel
Set style font-style italicItalic
normalDefault value. The browser displays a standard font style.
Set thickness font-weight boldBold

Guess you like

Origin blog.csdn.net/ChangeNone/article/details/112997280