One: B/S software structure
Two: Front-end development process
3. Components of the web page
The page consists of three parts! They are content (structure), performance, and behavior.
Content (structure) is the data we can see in the page. We call it content. General content we use html technology to display. Performance refers to the display form of these contents on the page. For example. Layouts, colors, sizes and more. general use
CSS technology implements behavior, which refers to the response of elements on the page to interact with input devices. Generally use javascript technology to achieve.
4. Introduction to HTML
Hyper Text Markup Language Shorthand: HTML HTML uses tags to mark the various parts of a web page to be displayed. The web page file itself is a text file. By adding tags to the text file, you can tell the browser how to display the content (such as: how to process text, how to arrange screens, how to display pictures, etc.)
5. Create an HTML file.
Take ideas as an example:
1. Create a web project (static web project)
2. Create an html page under the project
Select the browser to execute the page
first html example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
hello
</body>
</html>The result of the operation is as follows:
Note: Java files need to be compiled first, and then run by the java virtual machine. However, HTML files do not need to be compiled, and are directly parsed and executed by the browser.
6. Specifications for writing HTML files
<!DOCTYPE html><!-- 约束，声明 -->
<html lang="zh_CN"><!-- html标签表示html的开始 lang="sh_CN"表示中文 html标签中一般分为两部分，分别是：head和body -->
<head><!-- 表示头部信息，一般包括三部分内容，title标签，css样式，js代码 -->
<meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集 -->
<title>标题</title><!-- 表示标题 -->
</head>
<!--
bgcolor：是背景颜色属性
onclick:表示单击（点击）事件
alert() 是javaScript语言提供的一个警告框函数，
它可以接收任意参数，参数就是警告框的函数信息
-->
<body><!-- body标签是整个html页面显示的主体内容 -->
hello
<button onclick="alert('123456')">按钮</button>
哈哈<br/>hahaha
<hr/>
嘻嘻
</body>
</html>Html code comment <!-- This is an html comment, you can see it in the source code by right-clicking on the page -->
7. Introduction to HTML tags
1. Format of label:
<tag name>encapsulated data</tag name>
2. Tag names are not case sensitive.
3. Tags have their own attributes.
i. Divided into basic attributes: bgcolor="red" can modify simple style effects
ii. Event attribute: οnclick="alert('Hello!');" can directly set the code after the event response.
4. Labels are divided into single label and double label.
i. Single tag format: <tag name/> br newline hr horizontal line
ii. Double tag format: <tag name> ...encapsulated data...</tag name>
Example label syntax:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0-标签语法.html</title>
</head>
<body>
<!-- ①标签不能交叉嵌套 -->
正确：<div><span>早安，晚风</span></div>
错误：<div><span>早安，晚风</div></span>
<hr />
<!-- ②标签必须正确关闭(闭合) -->
<!-- i.有文本内容的标签： -->
正确：<div>早安，晚风</div>
错误：<div>早安，晚风
<hr />
<!-- ii.没有文本内容的标签： -->
正确：<br />1
错误：<br >2
<hr />
<!-- ③属性必须有值，属性值必须加引号 -->
正确：<font color="blue">早安，晚风</font>
错误：<font color=blue>早安，晚风</font>
错误：<font color>早安，晚风</font>
<hr />
<!-- ④注释不能嵌套 -->
正确：<!-- 注释内容 --> <br/>
错误：<!-- 注释内容 <!-- 注释内容 -->-->
<hr />
</body>
</html> 
The result of the operation is as follows:
Why is it still running after an error is reported?
The html code is not very strict. Sometimes the tag is not closed, and no error will be reported.
8. Commonly used label introduction document: w3cschool.CHM
Link: https://pan.baidu.com/s/1OVTtW48XwO6qqosJujzeUQ?pwd=0000
Extraction code: 0000
8.1, font font label
Question 1: Display the I am font label on the webpage, and modify the font to Arial and the color to red.
The font tag is a font tag, which can be used to modify the font, color, size (size) of the text. The color attribute modifies the color. The face attribute modifies the font size attribute modifies the text size.
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.font标签.html</title>
</head>
<body>
<!-- 字体标签
需求1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。
font标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
color属性修改颜色
face属性修改字体
size属性修改文本大小
-->
<font color="red" face="宋体" size="7">我是字体标签</font>
</body>
</html>The result of the operation is as follows:
8.2. Special characters
Question 1: Convert the newline tag into text and convert it into characters to display the list of commonly used special characters on the page:
Commonly used special character table:
Table of other special characters:
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.特殊字符.html</title>
</head>
<body>
<!-- 特殊字符
需求1：把 <br> 换行标签 变成文本 转换成字符显示在页面上
常用的特殊字符:
< ===>>>> <
> ===>>>> >
空格 ===>>>>
-->
我是<br>标签<br/>
海内 存知己
</body>
</html>The result of the operation is as follows:
Note: space
Whitespace is the most common character entity in HTML.
Normally, HTML trims whitespace from documents. If you enter 10 consecutive spaces in the document, HTML will remove 9 of them. If you use , you can add spaces to your document.
For example:
The result of the operation is as follows:
8.3, title tag
Heading tags are h1 to h6
Question 1: Demo Headings 1 through 6
h1 - h6 are title tags h1 largest h6 smallest align attribute is the alignment attribute left left alignment (default) center right right alignment in the play
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.标题标签.html</title>
</head>
<body>
<!-- 标题标签
需求1：演示标题1到 标题6的
h1 - h6 都是标题标签
h1 最大
h6 最小
align 属性是对齐属性
left 左对齐(默认)
center 剧中
right 右对齐
-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<h7>标题7</h7>
</body>
</html>operation result:
8.4, hyperlinks ( * important, must master * )
All content that can be jumped after clicking on the web page is a hyperlink
Problem 1: Normal hyperlinks.
a tag is a hyperlink
href attribute sets the address of the connection
target attribute sets which target to jump to
_self means the current page (default value)
_blank means to open a new page to jump
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.超链接.html</title>
</head>
<body>
<!-- a标签是 超链接
href属性设置连接的地址
target属性设置哪个目标进行跳转
_self 表示当前页面(默认值)
_blank 表示打开新页面来进行跳转
-->
<a href="http://localhost:8080">百度</a><br/>
<a href="http://localhost:8080" target="_self">百度_self</a><br/>
<a href="http://localhost:8080" target="_blank">百度_blank</a><br/>
</body>
</html>The result of the operation is as follows:
1: Jump on the current page
2: Open a new page to jump
8.5, list label
unordered list, ordered list
Question 1: Use unordered and list methods to display Northeast F4, Zhao Si, Liu Neng, Xiaoshenyang, and Song Xiaobao
ul is an unordered list
type attribute can modify the symbol in front of the list item
li is the list item
ol ordered
The following is an example of code:
One: unordered label:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求1：使用无序，列表方式，把东北F4，赵四，刘能，小沈阳，宋小宝，展示出来
ul 是无序列表
type属性可以修改列表项前面的符号
li 是列表项
ol 有序
-->
<ul>
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ul>
</body>
</html>The result of the operation is as follows:
We can add the type="none" attribute to hide the dot in front of the text
Two: Ordered labels
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求1：使用无序，列表方式，把东北F4，赵四，刘能，小沈阳，宋小宝，展示出来
ul 是无序列表
type属性可以修改列表项前面的符号
li 是列表项
ol 有序
-->
<!-- <ul type="none">-->
<!-- <li>赵四</li>-->
<!-- <li>刘能</li>-->
<!-- <li>小沈阳</li>-->
<!-- <li>宋小宝</li>-->
<!-- </ul>-->
<ol>
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ol>
</body>
</html>The result of the operation is as follows:
8.6, img tag
The img tag can display images on html pages.
Question 1: Use the img tag to display a photo of a beautiful woman. And modify the width, height, and border properties
The img tag is an image tag, which is used to display the image.
The src attribute can set the path of the image.
The width attribute can set the width of the image.
The height attribute can set the height of the image.
The border attribute
can set the size of the border of the image. The displayed text content
In JavaSE, the path is also divided into relative path and absolute path.
Relative path: count from the project name
Absolute path: drive letter: / directory / file name
In the web, the path is divided into relative path and absolute path
. Path:
. Indicates the directory where the current file is located
.. Indicates the upper level directory where
the current file is located. The file name indicates the file in the directory where the current file is located, which is equivalent to ./filename./ Can be omitted
Absolute path:
The correct format is: http:/ /ip:port/project name/resource path
The wrong format is: drive letter:/directory/file name
Example:
First look at the file location:
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.img标签.html</title>
</head>
<body>
<!--需求1：使用img标签显示一张美女的照片。并修改宽高，和边框属性
img标签是图片标签,用来显示图片
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置图片边框大小
alt属性设置当指定路径找不到图片时,用来代替显示的文本内容
在JavaSE中路径也分为相对路径和绝对路径.
相对路径:从工程名开始算
绝对路径:盘符:/目录/文件名
在web中路径分为相对路径和绝对路径两种
相对路径:
. 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略
绝对路径:
正确格式是: http://ip:port/工程名/资源路径
错误格式是: 盘符:/目录/文件名
-->
<img src="1.jpg" width="200" height="260" border="1" alt="美女找不到"/>
<img src="../../2.jpg" width="200" height="260" />
<img src="../imgs/3.jpg" width="200" height="260" />
<img src="../imgs/4.jpg" width="200" height="260" />
<img src="../imgs/5.jpg" width="200" height="260" />
<img src="../imgs/6.jpg" width="200" height="260" />
</body>
</html>The result of the operation is as follows:
8.7. Table label ( *key point, must be mastered* )
Question 1: Make a table with a header, three rows and three columns, and display the border
Question 2: Modify the width, height, alignment of the table, and cell spacing of the table.
The table tag is the table tag border Set the table tag width Set the table width height Set the table height align Set the alignment of the table relative to the page cellspacing Set the cell spacing tr is the row label th is the header label td is the cell label align Set the cell text Alignment b is bold label
code show as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格标签</title>
</head>
<body>
<!--
需求1：做一个 带表头的 ，三行，三列的表格，并显示边框
需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距。
table 标签是表格标签
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式
b 是加粗标签
-->
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
</html>The result of the operation is as follows:
8. 8. Cross-row and cross-column tables (*second key point, must be mastered*)
Question 1: Create a table with five rows and five columns. The cells in the first row and the first column span two columns, the cells in the second row and the first column span two rows, and the cells in the fourth row and fourth column span two rows and two columns
The colspan property sets across columns and the rowspan property sets across rows
code show as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>7.表格的跨行跨列</title>
</head>
<body>
<!-- 需求1：
新建一个五行，五列的表格，
第一行，第一列的单元格要跨两列，
第二行第一列的单元格跨两行，
第四行第四列的单元格跨两行两列。
colspan 属性设置跨列
rowspan 属性设置跨行
-->
<table width="500" height="500" cellspacing="0" border="1">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
</body>
</html>The result of the operation is as follows:
8.9. Understanding iframe frame tags (embedded windows)
ifarme tag It can open a small window on an html page to load a separate page.
The ifarme tag can open up a small area on the page to display a separate page.
Steps for the combination of ifarme and a tag:
1 Use the name attribute in the iframe tag to define a name
2 Set the iframe's name attribute value on the target attribute of the a tag
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.iframe标签.html</title>
</head>
<body>
我是一个单独的完整的页面<br/><br/>
<!--ifarme标签可以在页面上开辟一个小区域显示一个单独的页面
ifarme和a标签组合使用的步骤:
1 在iframe标签中使用name属性定义一个名称
2 在a标签的target属性上设置iframe的name的属性值
-->
<iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe>
<br/>
<ul>
<li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li>
<li><a href="1.font标签.html" target="abc">1.font标签.html</a></li>
<li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
</ul>
</body>
</html>The result of the operation is as follows:
When we click on the first hyperlink
The following two hyperlinks are the same
8.10. Form label (***** key point, must be mastered*)
What is a form?
A form is a collection of all elements used to collect user information in an html page, and then send the information to the server.
Let's make the following chart as an example:
Requirement: Create a form interface for personal information registration. Contains username, password, confirm password. Gender (single choice), hobbies (multiple choices), nationality (drop-down list). Hidden field, self-assessment (multiline text field). Reset, submit.
The form tag is the form
input type=text is the file input box value setting the default display content
input type=password is the password input box value setting the default display content
input type=radio is the radio box name attribute can be grouped checked="checked" Indicates that
the input type=checkbox is selected by default. Checked="checked" indicates that
the input type=reset is selected by default. The value attribute of the reset button is used to modify the text on the button. input type=submit is the value attribute of the submit button to modify the text
input type
on the button. =button is the button value attribute to modify the text on the button
input type=file is the file upload field
input type=hidden is the hidden field when we want to send some information, and this information does not require user participation, you can use the hidden field (submit The
select tag is the drop-down list box
and the option tag is the option in the drop-down list box selected="selected" is set by default to select
textarea to indicate a multi-line text input box (the content in the start tag and end tag is the default value )
The rows attribute setting can display the height of several rows
The cols attribute sets how many characters width each line can display
One: The display of the form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
</head>
<body>
<form>
用户名称：<input type="text" value="默认值"/><br/>
用户密码：<input type="password" value="abc"/><br/>
确认密码：<input type="password" value="abc"/><br/>
性别：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br/>
兴趣爱好：<input type="checkbox" checked="checked" />Java<input type="checkbox" />JavaScript<input
type="checkbox" />C++<br/>
国籍：<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>小日本</option>
</select><br/>
自我评价：<textarea rows="10" cols="20">我才是默认值</textarea><br/>
<input type="reset" value="abc" />
<input type="submit"/>
</form>
</body>
</html>The result of the operation is as follows:
Two: Form formatting:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的显示</title>
</head>
<body>
<!--需求1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。
隐藏域，自我评价（多行文本域）。重置，提交。-->
<!--
form标签就是表单
input type=text 是文件输入框 value设置默认显示内容
input type=password 是密码输入框 value设置默认显示内容
input type=radio 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
input type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value属性修改按钮上的文本
input type=submit 是提交按钮 value属性修改按钮上的文本
input type=button 是按钮 value属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
-->
<form>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td> 用户名称：</td>
<td>
<input type="text" value="默认值"/>
</td>
</tr>
<tr>
<td> 用户密码：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex"/>男
<input type="radio" name="sex" checked="checked" />女
</td>
</tr>
<tr>
<td> 兴趣爱好：</td>
<td>
<input type="checkbox" checked="checked" />Java
<input type="checkbox" />JavaScript
<input type="checkbox" />C++
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea rows="10" cols="20">我才是默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body>
</html>The result of the operation is as follows:
Three: form submission details
The form tag is the form tag
action attribute sets the submitted server address and
the method attribute sets the submission method GET (default value) or POST
When the form is submitted, the data is not sent to the server in three situations:
1. The form item does not have a name attribute value
2. Single choice and multi-selection (option tags in the drop-down list) need to add a value attribute in order to send it
to
the
server action attribute[+?+request parameter]
The format of the request parameter is: name=value&name=value
2. It is not safe
3. It has a limit on data length.
The characteristics of POST requests are:
1. There is only action attribute value in the browser address bar
2 , Safer than GET requests
3, Theoretically, there is no data length limit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的显示</title>
</head>
<body>
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td> 用户名称：</td>
<td>
<input type="text" name="username" value="默认值"/>
</td>
</tr>
<tr>
<td> 用户密码：</td>
<td><input type="password" name="password" value="abc"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" checked="checked" value="girl" />女
</td>
</tr>
<tr>
<td> 兴趣爱好：</td>
<td>
<input name="hobby" type="checkbox" checked="checked" value="java"/>Java
<input name="hobby" type="checkbox" value="js"/>JavaScript
<input name="hobby" type="checkbox" value="cpp"/>C++
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select name="country">
<option value="none">--请选择国籍--</option>
<option value="cn" selected="selected">中国</option>
<option value="usa">美国</option>
<option value="jp">小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body>
</html>Here we pay attention to a small detail
Run the result and submit the default data:
We changed "post" to get
Run and commit defaults:
8.11 Other labels
1: Demonstration of div, span, p tags
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他标签</title>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p段落标签1</p>
<p>p段落标签2</p>
</body>
</html>The result of the operation is as follows:
The div tag occupies one line by default and the length of the span tag is the length of the encapsulated data. By default, a paragraph tag will leave a line above or below the paragraph (if it already exists, it will no longer be empty)
=================CSS============================
9. CSS Technical Documentation: CSS2.0.chm
9.1. Introduction to CSS technology
CSS is "Cascading Style Sheets". is a markup language for (enhanced) control of the style of a web page and allows the separation of style information from the content of the web page.
9.2. CSS syntax rules:
Selectors : Browsers use "selectors" to determine which HTML elements (tags) are affected by CSS styles.
The properties are the names of the styles you want to change, and each property has a value. Attributes and values are separated by colons and surrounded by curly braces, thus forming a complete style declaration (declaration), for example: p {color: blue}
Multiple declarations: If you want to define more than one declaration, you need to separate each declaration with a semicolon. Although there is no need to add a semicolon at the end of the last statement (but try to add a semicolon at the end of each statement)
For example:
p{
color:red;
font-size:30px;
}
Note: Generally, only one attribute is described per line
CSS comment: /* comment content */
9.3. Combination of CSS and HTML
9.3.1. The first type:
Set "key:value value;" on the style attribute of the label to modify the label style.
Requirement 1: Define two div and span tags separately, and modify the style of each div tag to: 1 pixel border, solid line, red.
<div>div tag 1</div>
<div>div tag</2div>
<span>span tag 1</span>
Before <span>span tag 2</span> :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。-->
<div style="border: 1px solid red;">div 标签 1</div>
<div style="border: 1px solid red;">div 标签 2</div>
<span style="border: 1px solid red;">span 标签 1</span>
<span style="border: 1px solid red;">span 标签 2</span>
</body>
</html>Question: What are the disadvantages of this approach?
1. If there are too many labels. There are many styles. The amount of code is very large.
2. The readability is very poor.
3. There is no reusability of Css code.
9.3.2. The second type:
In the head tag, use the style tag to define various css styles you need. The format is as follows:
xxx {
Key : value value;
}
Requirement 1: Define two div and span tags separately, and modify the style of each div tag to: 1 pixel border, solid line, red.
<div>div tag 1</div>
<div>div tag 2</div>
<span>span tag 1</span>
<span>span tag 2</span>
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style标签专门用来定义css样式代码-->
<style type="text/css">
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>Note: Css comment /* This is the code comment for css */
Problem: The downside of this approach.
1. The code can only be reused in the same page, and the css code cannot be reused in multiple pages.
2. It is inconvenient to maintain. There will be thousands of pages in the actual project, and it is necessary to modify each page. The workload is too much.
9.3.3. The third type:
Write the css style as a separate css file, and then import it through the link tag to reuse it.
Import the css style file using the lower part of the html tag.
<link rel="stylesheet" type="text/css" href="./styles.css" />1. css file content:
div{
border: 1px solid yellow;
}
span{
border: 1px solid red;2. HTML file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link标签专门用来引入css样式代码-->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>9.4. CSS selectors
9.4.1. Tag name selector
The format of the tag name selector is:
tagname {
property: value;
}
The tag name selector can determine which tags use this style passively.
<div>div tag 1</div>
<div>div tag 2</div>
<span>span tag 1</span>
<span>span tag 2</span>
Requirement 1: Change the font color to blue on all div tags, and the font size to 30 pixels. The border is a 1-pixel solid yellow line. And change the font color of all span tags to yellow and the font size to 20 pixels. The border is a 5 pixel blue dashed line.
For the convenience of observation, I will write the css code into html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border: 5px dashed blue;
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
The result of the operation is as follows:
9.4.2, id selector
The format of the id selector is:
#id attribute value {
property: value;
}
The id selector allows us to selectively use this style through the id attribute.
Requirement 1: Define two div tags respectively, the first div tag defines the id as id001, and then defines the css style according to the id attribute to modify the font color to blue and the font size to 30 pixels. The border is a 1-pixel solid yellow line. The second div tag defines the id as id002, and then defines the css style according to the id attribute to change the font color to red and the font size to 20 pixels. The border is a 5 pixel blue dotted line.
<div id="id001">div label 1</div>
<div id="id002">div label 2</div>
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dotted ;
}
</style>
</head>
<body>
<div id="id002">div标签1</div>
<div id="id001">div标签2</div>
</body>
</html>
The result of the operation is as follows:
9.4.3, class selector (class selector)
The format of a class type selector is:
.class attribute value {
property: value;
}
The class type selector can effectively selectively use this style through the class attribute.
Requirement 1: Modify the span or div tag whose class attribute value is class01, the font color is blue, and the font size is 30 pixels. The border is a 1-pixel solid yellow line.
Requirement 2: Modify the div tag whose class attribute value is class02, the font color is gray, and the font size is 26 pixels. The border is a solid red line of 1 pixel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
.class02{
color: grey;
font-size: 26px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="class02">div标签class01</div>
<div class="class02">div标签</div>
<span class="class02">span标签class01</span>
<span>span标签2</span>
</body>
</html>
The result of the operation is as follows:
9.4.4. Combined selectors
The format of a combined selector is:
selector1, selector2, selectorn{
property: value;
}
Combining selectors allows multiple selectors to share the same css style code.
Requirement 1: Modify the div tags of class="class01" and all the span tags of id="id01", the font color is blue, and the font size is 20 pixels. The border is a solid yellow line of 1 pixel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style type="text/css">
.class01 , #id01{
color: blue;
font-size: 20px;
border: yellow 1px solid;
}
</style>
</head>
<body>
<div id="id01">div标签class01</div> <br />
<span>span 标签</span> <br />
<div>div标签</div> <br />
<div>div标签id01</div> <br />
</body>
</html>
The result of the operation is as follows:
9.5. Common styles:
1. Font color
color：red；
Color can write color names such as: black, blue, red, green, etc. Colors can also write rgb values and hexadecimal representation values: such as rgb(255,0,0), #00F6DE, if writing hexadecimal values must add#
2. Width
width:19px;
Width can write pixel value: 19px; also can write percentage value: 20%;
3. Height
height:20px;
Height can write pixel value: 19px; also can write percentage value: 20%;
4. Background color
background-color:#0F2D4C
5. Font style:
color: #FF0000; font color red
font-size: 20px; font size
6. Red 1 pixel solid border
border：1px solid red;
7. DIV is centered
margin-left: auto; margin-right: auto;
8. Center the text:
text-align: center;
9. Remove underscores from hyperlinks
text-decoration: none;
10. Table thin lines
table { border: 1px solid black; /*set border*/
border-collapse: collapse; /* merge borders*/
}
td,th { border: 1px solid black; /*set the border*/
}
11. List removal modification
ul {
list-style: none;
}
The above points illustrate
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css常用样式.html</title>
<style type="text/css">
div{
color: red;
border: 1px yellow solid;
width: 300px;
height: 300px;
background-color: green;
font-size: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
table{
border: 1px red solid;
border-collapse: collapse;
}
td{
border: 1px red solid;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
</ul>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<a href="http://www.baidu.com">百度</a>
<div>我是div标签</div>
</body>
</html>The result of the operation is as follows:
thanks for watching! ! !