html和css基础

一、HTML5基础

1,基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>   #表示文档的类型,html类型
<html>
<head> #网页头部
<meta charset="utf-8" /> # 网页字符编码
<title>第一个页面</title>
</head>
<body> #主体部分
yichen is a good man
</body>
</html>


<html>....</html>标签标记着html文档的开始和结束

<meta/>标签 定义其他的说明
<meta name="keywords" content="逸尘秀"/> #内容描述
<meta name="description" content="分享日常工作笔记"/>

2,基本语法

1、 <常规标签>

1
<标签 属性= "属性值" 属性="属性值"></标记>

2、空标签

1
2
3
4
5
6
	<标签 属性="属性值"/>
说明:
1.写在<>中的第一个单词叫做标记,标签,元素。这3个名字都是指的一个
2.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在""号内。
3.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。
4.空标签没有结束标签,用"/"代替。

3,网页基本标签

1, 注释标签

1
ctrl + /  <!--注释  -->

2,标题标签<h1-6>

1
2
3
4
5
6
<h1>.....</h1>      <h1>一级标题</h1>
<h2>.....</h2> <h2>二级标题</h2>
<h3>.....</h3> <h3>三级标题</h3>
<h4>.....</h4> <h4>四级标题</h4>
<h5>......</h5> <h5>五级标题</h5>
<h6>......</h6> <h6>六级标题</h6>

3,换行标签<br />

1
2
<!-- 换行标签 -->
当今世界正处于百年未有之大变局”,<br />习近平总书记的这一重大论断再次得到印证。人类21世纪的第三个十年,启幕之时因为新冠疫情被摁下“暂停键”。

4, 段落标签 <p>段落标签</p>

1
文章的段落一般用<p>标签包起来

5,水平线标签<hr/>

1
显示效果就是一条水平线

6,字体样式标签<strong>

1
2
3
4
5
6
7

<strong>yichen is a good man </strong><br /> <!--加粗-->
<b>yichen is a nice man </b> <!--加粗,语气加强 -->

<!-- 倾斜 -->
<em>yichen is a good man</em> <br>
<i>yichen is a cool man</i>

7,特殊符号&nbsp 空格符

1
2
3
4
5
6
7
<!-- 特殊符号 -->
<p>yichen&nbsp &nbsp is a nice man</p> <!--空格符 -->

<p>></p> <!--&gt大于符号 > -->
<p><</p> <!--&lt小于符号 < -->
<p>"</p> <!--&quot引号 " -->
<p>&copy;</p> <!--&copy版权符号 © -->

8,图像标签<img>

1
2
3
4
常见的格式 jpg gif png bmp

<!-- src="图片的路径" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" -->
<img src="img/ding17.gif" alt="背景图" title="大背景图" width="160" height="160" />

9,链接标签<a href=””>

1
2
3
4
5
6
7
8
9
10
11
12
1.<!-- 链接标签 -->
<hr/> _self在本窗口打开,_blank新窗口打开
<!--href="链接路径" target="目标窗口位置",常用值_self,_blank -->
<a href="https://yichenxiu.com" target="_blank">逸尘秀</a>
<!--链接图片也可以-->
<a href="img/ding9.jpg" target="_blank">背景图</a>
<!-- 在链接标签内部还可以链接图片标签 -->
<a href="https://yichenxiu.com" target="_blank"><img src="img/ding9.jpg" width="160" height="160" ></a>
2.锚点
<a href="#mao1">跳转锚点</a>
<!-- 锚点 -->
<a name="mao1">这是锚点</a>

10.列表<ul><li>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
列表的分类: 无序列表 有序列表 定义列表 
<!-- 无序列表 -->
<ul>
<li type="disc"><a href="https://yichenxiu.com">逸尘秀1</a></li>
<li type="square"><a href="https://yichenxiu.com">逸尘秀2</a></li>
<li type="circle"><a href="https://yichenxiu.com">逸尘秀3</a></li>
<li type="circle"> yichen is a good man </li>
</ul>
<ul type="square">
<li ><a href="https://yichenxiu.com">逸尘秀1</a></li>
<li ><a href="https://yichenxiu.com">逸尘秀2</a></li>
<li ><a href="https://yichenxiu.com">逸尘秀3</a></li>
<li > yichen is a good man </li>
</ul>
无序列表的类型
disc 项目符号显示为实体圆心,默认值
square 项目符号显示为实体方心
circle 项目符号显示为空心圆

<!-- 有序列表 -->
<ol type="A">
<li ><a href="https://yichenxiu.com">逸尘秀1</a></li>
<li ><a href="https://yichenxiu.com">逸尘秀2</a></li>
<li ><a href="https://yichenxiu.com">逸尘秀3</a></li>
<li > yichen is a good man </li>
</ol>
有序列表的类型
1 使用数字作为项目符号
A/a 使用大写/小写字母作为项目符号
I/i 使用大写/小写罗马数字作为项目符号

<!-- 定义列表 -->

<dl>
<dt>学院1</dt>
<dd>电子信息工程1</dd>
<dd>电子信息工程111</dd>
<dt>学院2</dt>
<dd>电子信息工程2</dd>
</dl>
dl 声明定义列表 dt声明的列表项 标题 dd 表示定义列表项内容

4, 表格

1.表格的基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<table align="center">    表格标签
<table align="center" border="1" cellspacing="0" cellpadding="1">
<tr>
<th>头部</th> #th代表头部
<th>姓名</th>
<th>学生</th>

</tr>
<tr> 行标签
<td>第1行第一列</td> 单元格标签
<td>第1行第二列</td>
<td>第1行第三列</td>
</tr>
第2行
<tr>
<td>第2行第一列</td>
<td>第2行第二列</td>
<td>第2行第三列</td>
</tr>
第3行
<tr>
<td>第3行第一列</td>
<td>第3行第二列</td>
<td>第3行第三列</td>
</tr>
</table>

<tr> 定义表格的行
<th> 定义表格的头部 需要被<tr>包裹
<td> 定义表格的单元,需要被<tr>包裹

<thead> 定义表格的页眉,表格分组标签,可将表格分割
<tfoot> 定义表格的页脚,表格分组标签,可将表格分割
<tbody> 定义表格的主体,表格分组标签,可将表格分割
如果你使用thead,tfoot以及tbody元素,你就必须使用全部的元素,他们的出现次序是: thead、tfoot、tbody,这样浏览器就可以收获所有的数据

<caption> 定义表格标题

对齐方式
表格对齐方式
默认对齐、居中对齐、左对齐、右对齐
单元格对齐方式
水平对齐方式、垂直对齐方式

属性 值 说明
left 左对齐
center 居中对齐
align right 右对齐
水平对齐方式

top 顶端对齐
vailgn middle 居中对齐
垂直对齐方式 bottom 底端对齐
baseline 基线对齐

border="2" 代表行与行之间的间距,数字越大间距越宽
cellspacing="4" 单元表格之间的空白
cellpadding="3" 代表文字与表格的间距,数字越大间距越宽
colspan ="value" 合拼列
rowspan ="value" 合并行

2,表格的跨行和跨列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
<tr> 行

<td colspan="2">第一行第一列</td> 2代表占用2列
<td>第一行第二列</td>

</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td rowspan="2">第二行第三列</td> 2代表2行
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<!-- <td>第三行第三列</td> -->
</tr>
</table>

colspan ="value" 合拼列
rowspan ="value" 合并行

二、CSS基础

1,css简介

1
2
3
CSS:Cascaang Style Sheets 层叠样式表,WEB标准中表现标准语言,主要对网页信息的显示进行控制
(修饰网页信息的显示样式)
css1 1996年 css2 1998年 css2.1 2004年 css3.0 2010年

2,CSS样式

1
2
3
1, 内部样式表
2, 外部样式表
3,内联样式表(行内样式、嵌入式样式)

1,内部样式表

1
2
3
4
5
6
语法:
<style type="text/css">
/* CSS语句 */
</style>

#注意:使用style标签创建样式时,最好将标记写在<heas> </head>;之间

2,外部样式表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(1),创建外部样式表
创建css目录,
新建文件: xxx.css
@charset "utf-8"; 头一行这样写,现在也可以不用写了,默认的就是utf-8

(2),导入外部样式表
方法1:
<link rel="stylesheet" type="text/css" href="css/style.css> <!-- herf=""后面填写目标文件路径及文件名全称 -->

说明:使用link标签导入外部样式表时,需要将该元素写在文档的头部,即<head>与</head>中

方法2: 现在很少用这种方法了
<style type="text/css">
@import url("./css/style.css");
</style>

说明: @和import之间没有空格, url和小括号之间也没有空格;必须结尾以分号结束;

3,内联样式表(行内样式)

1
2
3
4
5
语法:
<标签 style="属性: 属性值 属性: 属性值"> </标签>
或者:
<标签 style="属性: 属性值 属性: 属性值"/>
<p style="color: blue;">yichen is a nice man </p>

4,样式的优先级

1
2
3
4
5
6
7
8
9
内联(行内)样式表优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高
<!-- css内部样式 -->
<style type="text/css">
/* CSS语句 */
</style>

<!-- css外部样式调用 -->
<link rel="stylesheet" type="text/css" href="css/style.css"/> 这个在后面,优先级就比前面的高,

3,CSS语法

0,CSS盒子模型

所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model):

a0pWJe.gif

不同部分的说明:

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度,你需要知道的盒模型是如何工作的。

元素的宽度和高度

a0pIsI.gif重要: 当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和边距。

下面的例子中的元素的总宽度为300px:

实例

1
2
3
4
5
6
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}

让我们自己算算:
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px

最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的:

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

1,语法

1
2
3
4
5
6
7
8
9
10
语法:
selector {property:value;property:value;}
selector表示选择器 property表示声明(属性和值)

说明:
(1)每个css样式由3个部分组成, 选择器,属性 和值。
(2)属性必须放在{}花括号中,属性和属性值用冒号连接。
(3)每条声明用;分号结束。
(4)当一个属性有多个属性值的时候,属性值与属性值不分先后顺序。
(5)在书写样式过程中,空格,换行等操作不影响属性显示

2,简单属性的使用

其他属性参考css属性汇总

1
2
3
4
5
6
7
8
9
10
11
1. color: 颜色
规定颜色值为颜色单词名称列如(red)或者十六进制的颜色列如(#ff0000)或者为rgb值的颜色列如(red(255,0,0))
2. width: 宽度
设置标签的宽度值,值为数字:单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动,通过浏览器自动计算出宽度值单位为像素)
像素在浏览器中的概念:
像素数决定标签或文字在浏览器中显示的大小或位置,页面中的最小计量单位为1px,即1一个像素,
3. height: 高度
设置标签的宽度值,值为数字:单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动,通过浏览器自动计算出宽度值单位为像素)
4. background-color: 背景颜色
背景颜色:规定背景颜色值为单词的名称列如(red)或者十六进制的颜色列如(#ff0000)或者为rgb值的颜色列如(red(255,0,0))。
可以为所有的标签设置背景色,这包括 body 一直到em和a等行内标签。

4,标签(元素)分类

1
2
3
4
标签从表面上分为单标签和双标签,单标签功能单一,不能嵌套,双标签功能多样化,可以嵌套。标签又分为块级元素和内联元素(行内元素),
(1) 块级元素(block-levelelements) p标签,div标签,独占一行或几行
(2) 内联元素(行内元素、inlineelements)
(3) 内联块级元素(inline-block)

1,块级元素

1
2
3
4
5
6
7
8
9
10
11
12
13
1.块级元素在网页中就是(元素显示为矩形区域)的形式显示。
常用的块元素: div、dl、dt、dd、ol、ul、li、fieldset、(h1-h6)、p、form、hr、colgroup、col、table、 tr、td等。

2.默认情况,块状元素都会占一行,通俗的说,两个相邻的块元素不会出现并列显示的现象;默认情况下,块状元素会按照顺序自上而下排列。

3. 块状元素都可以定义自己的宽度和高度,不设置宽度的时候,默认与父级元素一样宽。

4.块状元素一般都作为其他元素的容器,他可以容纳其他内联元素和其他块元素,我们可以把这种容器比喻为一个盒子。


<p>为段落标签,一般能用于装载段落文字,并且<p>标签中不可以包含块级标签。
h1-h6
<div>为最常用的结构标签,常能用于分割页面区域,以及功能模块。

(1),块级元素汇总

块级元素有:

  • address - 地址
  • blockquote - 块引用
  • center - 举中对齐块
  • dir - 目录列表
  • div - 常用块级容易,也是 css layout 的主要标签
  • dl - 定义列表
  • fieldset - form控制组
  • form - 交互表单
  • h1-大标题
  • h4 - 副标题
  • h3 - 3级标题
  • h4 - 4级标题
  • h5 - 5级标题
  • h6 - 6级标题
  • hr - 水平分隔线
  • isindex - input prompt
  • menu - 菜单列表
  • noframes - frames可选内容,(对于不支持 frame 的浏览器显示此区块内容
  • noscript - )可选脚本内容(对于不支持 script 的浏览器显示此内容)
  • ol - 排序表单
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表

2,内联元素(行内元素)

1
2
3
4
5
6
7
1.行内元素(内联元素)具有以下特点:

和其他元素都在一行上,直到一行排不下才会换行,宽度随元素内容变化;
高,行高及外边距和内边距不可改变;(设置宽度width无效,高度height无效,但可以设置line-height,设置margin只有左右有效,上下无效,设置padding左右有效,上下无效)
宽度就是他的文字或图片的宽度,不可改变;
内联元素只能容纳文本或者其他内联元素;
行内元素大多为描述性标记;

(1),内联元素汇总

行内元素有:

  • a - 锚点
  • abbr - 缩写
  • acronym - 首字
  • b - 粗体 ( 不推荐 )
  • bdo - bidi override
  • big - 大字体
  • br - 换行
  • cite - 引用
  • code - 计算机代码 ( 在引用源码的时候需要 )
  • dfn - 定义字段
  • em - 强调
  • font - 字体设定 ( 不推荐 )
  • i - 斜体
  • img - 图片
  • input - 输入框
  • kbd - 定义键盘文本
  • label - 表格标签
  • q - 短引用
  • s - 中划线 ( 不推荐 )
  • samp - 定义范例计算机代码
  • select - 项目选择
  • small - 小字体文本
  • span - 常用内联容器,定义文本内区块
  • strike - 中划线
  • strong - 粗体强调
  • sub - 下标
  • sup - 上标
  • textarea - 多行文本输入框
  • tt - 电传文本
  • u - 下划线
  • var - 定义变量

3,内联块级元素

1
2
3
4
5
1、内联块(行内块)级元素是块级元素和内联元素的混合体,inline-block元素设置宽度和高度,
2、内联快级元素属于内联元素,不会独占一行,而是会和其他inline元素和inline-block元素在同一行按左至右的顺序显示
3、常见的内联块级元素: img、textarea、input、select、iframe等。

内联块级元素的使用场合: 导航菜单

4,元素类型转换

1
2
3
4
5
display 属性
display: none; -- 让标签消失(隐藏元素并脱离文档流)
display: inline; -- 内联元素(内联表签)元素前后没有换行符
display: block; -- 块级元素(块级标签)
display: inline-block; -- 既有inline的属性也有block属性

5,行内块级元素案例 导航栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>导航栏</title>
<style type="text/css">
li{
display: inline-block;
width: 100px;
height: 30px;
background-color: #ff8888;
font: 12px; /*设置字体的大小*/
text-align: center; /*设置字体对齐方式*/
line-height: 30px;/* 等于li的高度,可以让字体垂直居中*/
}
a{
color: cornsilk;
text-decoration: none; /*去线*/
}
</style>
</head>
<body>
<ul>
<li><a href="https://www.yichenxiu.com"> 导航1</a></li>
<li><a href="https://yichenxiu.com"> 导航2</a></li>
<li><a href="#"> 导航3</a></li>
<li><a href="#"> 导航4</a></li>
<li><a href="#"> 导航5</a></li>
<li><a href="#"> 导航6</a></li>
<li><a href="#"> 导航7</a></li>
<li><a href="#"> 导航8</a></li>
</ul>
</body>
</html>

下面是显示效果:

a0pbo8.png

5,页面布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>页面布局</title>
<style type="text/css">
/* *表示通配 */
*{
padding: 0;
margin: 0;
}
#box{
width: 700px;

/* background-color: red; */
margin: 0 auto;
}
#logo1{
height: 100px;
background-color: yellow;
}
#nav{
height: 26px;
background-color: red;
}
#main{
height: 600px;

}
/* #leftMain{
display: inline-block;
width: 350px;
height: 600px;
background-color: blue;
}
#rifhtMain{
display: inline-block;
width: 350px;
height: 600px;
float: right; 不写这个也行,但是左右div的宽度加起来不能刚好等于700px
background-color: pink;
} */
#leftMain{
display: inline-block;
width: 350px;
height: 600px;
background-color: blue;
}
#rifhtMain{
display: inline-block;
width: 345px;
height: 600px;
/* float: right; */
background-color: pink;
}
#footer{
height: 43px;
background-color: deeppink;
}
</style>
</head>
<body>
<!-- box -->
<div id="box">
<!-- logo部分 -->
<div id="logo1">

</div>
<!-- nav导航 -->
<div id="nav">

</div>
<!-- 广告 -->
<div id="guanggao">

</div>

<!-- 主体 -->
<div id="main">
<div id="leftMain">


</div>
<div id="rifhtMain">


</div>

</div>

<!-- 底部 -->
<div id="footer">

</div>

</div>

</body>
</html>

6,注释

1
2
3
4
5
6
7
html注释

<!--注释内容-->

css注释

/*注释内容*/

三、选择器的运用

1、css选择器

1
2
3
4
5
6
7
8
9
10
常用的:
(1)、元素选择器/标签选择器(element选择器)
(2)、id选择器
(3)、class选择器
(4)、*通配符(全局选择器)
(5)、交集选择器
(6)、并级选择器(群组选择器)
(7)、后代选择器(包含选择器)
(8)、子选择器
(9)、伪类选择器

1,标签选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
语法:
元素(标签)名称{属性: 属性值;
属性2: 属性值;
}
列如: p{
cocor: red;
background-color: pink;
}
说明:
(1)标签选择器:以文档语言对象类型作为选择器,即使用结构中元素名称作为选择器,列如 body、div、p、img、em、strong、span等等
(2)所有的页面元素都可以作为选择器

用法:
(1)如果想改变某个元素的默认样式时,可以使用元素选择器
(2)统一文档的某个元素显示效果是,可以使用元素选择器

2,id选择器

1
2
3
4
5
6
7
8
9
10
11
12
语法:
#id名{
属性: 属性值;
属性2: 属性值;
}

说明:
(1)使用id选择器时,应该为元素定义id属性,如<div id="top"> </div>。
(2)id选择器的语法格式:"#"加上自定义的is名称。
(3)id名命名取英文名,不能使用关键字(所有的标记和属性都是关键字)如:head、body等标记。
(4)一个id名称只能对应文档中的一个具体的元素对象。因为id只能定义页面中的某一个唯一的元素对象。
(5)id选择器最大的用处:创建网页的外围结构。

3,class选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
语法:
.class类名{
属性: 属性值;
属性2: 属性值;
}
说明:
(1)使用类选择器是,应该先为每一个元素定义一个类名称。
(2)类选择器的语法格式是:
<div class="top"> </div>
.top{
width: 200px;
height: 500px;
}
用法:
class选择器更适合定义一类样式

注意:
类名的第一个字符不能使用数字。它无法再Mozila或Firefox浏览器中起作用

*4,通配符(全局选择器)**

1
2
3
4
5
6
7
8
9
10
11
12
13
语法:
*{
属性: 属性值;
属性2: 属性值;
}
说明:
通配符的写法是"*",其含义就是所有元素/标签。

用法:
常用来重置样式

示例:
*{padding:0px ; margin: 0} #0可以不用写px。

5,交集选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
语法:
选择器1选择器2{
属性: 属性值;
属性2: 属性值;
}

说明:
用于选择同时有多个选择器匹配的元素
第一种格式类似于:
h1.center{
color: red; text-align:center;
}
这种格式有标签选择器和类选择器组成。
第二种格式类似于:
h1#center{
color:red;
text-align:center;
}
两个选择器之间不能有空格,必须连续书写。
以上两种格式组成的选择器,也就是前者所定义的标签类型和后者的类或者id的元素,称之为交集选择器

6,并集选择器

1
2
3
4
5
6
7
语法:
选择器1,选择器2,选择器3{
属性: 属性值;
属性2: 属性值;
}
说明:
当有多个选择器应用同样的样式时,可以将选择器用"," 分隔,合并为一组。

7,后代选择器

1
2
3
4
5
6
7
语法:
选择器1 选择器2{
属性: 属性值;
属性2: 属性值;
}
说明:
选择器1和选择器2用空格隔开,含义就是选择器1中包含的所有选择器2;

8,子选择器

1
2
3
4
5
6
7
语法:
选择器1>选择器2{
属性: 属性值;
属性2: 属性值;
}
说明:
选择器1和选择器2用>连接,含义就是选择器1中的所有子一级选择器2

9,伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
语法:
a:link{color: red;} 超链接的初始状态;没有被访问过的超链接

a:visited{color: yellow;} 超链接被访问后的状态;

a:hover{color:blue;} 鼠标划过超链接时的状态;

a:active{color: pink;} 超链接激活时的状态,即鼠标按下时超链接的状态;

说明:
(1) 当这4个超链接伪类选择器联合使用时,应注意他们的顺序,正常的顺序为: a:link、a:visited、a:hover、a:active;错误的顺序有时会使超链接的样式失效;
(2) 为了简化代码,可以把伪类选择符中相同声明提出来放在a选择符中;
例如: a{color:red;} a:hover{color:green;} 表示超链接的三种状态相同,只有鼠标划过时变颜色。

2、选择器的权重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
说明:
在CSS中,会根据选择器的特殊性来觉定所定义的样式规则次序,具有更特殊的选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。
CSS中用四位数字表示权重,权重的表达方式为如: 0,0,0,0,

元素选择器/标签选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100 #这个权重比上面两个高
属性选择器的权重为0010
伪类选择器的权重为0010
伪元素选择器的权重为0010
包含选择器的权重:为包含选择器的权重之和
子选择器的权重为0000
群组选择器的权重为0000
继承样式的权重为0000
行内样式的权重为1000 #这个权重最高

比较时从高位到低位(A到D)分别比较,高位相同才需要比较低位

3、css3新增的选择器

1
2
3
4
1、属性选择器
2、结构伪类选择器
3、UI伪类选择器
4、其他选择器(兄弟元素选择器、否定伪类选择器、目标伪类选择器)

四、列表

1、列表css声明

CSS列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
1
2
3
4
5
6
7
8
<style type="text/css">
li{
/* list-style: none url(img/favicon.ico) inside; */ 这种写法更简单
list-style: none;
list-style-image: url(img/favicon.ico);
list-style-position: inside;
}
</style>

1.1 定义列表符号样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
通过取不同的list-style-type属性值,我们可以得到不同的项目符号。

例:

ul { list-style-type:disc;} /*实心圆*/

ul { list-style-type:circle;} /*空心圆*/

ul { list-style-type:square;} /*实心方块*/

ul { list-style-type:none;} /*不显示项目符号*/

ol { list-style-type:decimal;} /*阿拉伯数字*/

ol { list-style-type:lower-roman;} /*小写罗马数字*/

ol { list-style-type:upper-alpha;} /*大写英文字母*/

2、背景的css声明

属性 描述 CSS
background 在一个声明中设置所有的背景属性。 1
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
background-color 设置元素的背景颜色。 1
background-image 设置元素的背景图像。 1
background-position 设置背景图像的开始位置。 1
background-repeat 设置是否及如何重复背景图像。 1
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
1. 背景颜色
语法:
选择器{background-color: 颜色值;}

2. 背景图片
语法:
选择器{background-image: url(图片的路径及全称);}
说明:
网页上图片有两种形式。也就是结构
背景图:属于网页的表现,背景图上可以显示文字,插入图片,表格等,

3. 背景图片的显示原则和平铺属性
背景图片显示原则:
(1) 容器尺寸等于图片尺寸,背景图片正好显示在容器中;
(2) 容器尺寸大于图片尺寸,背景图片将默认平铺,直到铺满元素;
(3) 容器尺寸小于图片尺寸,只显示元素范围内的背景图;

语法:
选择器{
background-repeat:no-repeat|repeat|repeat-x|repeat-y;
}

no-repeat 不平铺
repeat 平铺
repeat-x 横向平铺
repeat-y 纵向平铺

4.背景图片的固定
语法:
选择器{ background-attachment: fixed;}
fixed
inherit
initial
scroll
unset
local
这些是属性值,很少用

5.设置背景图像的开始位置。
选择器{background-position}
值有 水平方向上的对齐方式(left/center/rifht)
垂直方向的对齐方式(top/center/bottom)

3、内容的显示和隐藏

(1),display:none 隐藏元素,该方式隐藏在页面不占位

(2), visibility: hidden,隐藏元素,改方式隐藏的元素在页面中占位

(3),border-radius: 100px; 以多少半径话圆

五、文本属性

1、文本css声明

1
2
3
4
5
6
7
8
9
10
11
12
1,文本样式的font属性
文本大小:font-size
文本字体:font-family
文本粗细:font-weight
文本倾斜: font-style
文本行高: line-height
文字属性font简写

2,文本样式的text属性

3,文本样式修饰的运用规范
4,文本添加阴影

六、表单

表单作用:收集用户信息

表单组成:

​ 1.表单域

​ 2.表单控件

​ 3.提示信息

1,表单域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
语法:
<form 属性名称="值">
</form>

常用的属性:
1, name = "值" :规定表单的名称
2, action="值" :提交表格的url
3, method="get/post" :提交方式,一般用post
4,enctype = "值" :规定在发送表单数据之前进行的编码
可能的值: "applivation/x-wwww-from-urlercoded" ,"mutpart/from-data", "text/plain"
5,target="_black/_self/_parent/_top" 打开表单URL

H5新增属性
1, autoconmplete = "on/off" :是否启动表单自动完成
2, novalidate = "novalidate" 不验证表单

2,表单控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
1,文本框
<input type="text" value="默认值">

2,密码框
<input type="password" placeholder="密码" />

3,提交按钮
<input type="submit" value="提交" />

4, 重置按钮
<input type="reset" value="重置"/>

5, 单选框/单选按钮
<input type="radio" name="dan" checked="checked" value="power"/> 单选框里面name的值需要一样
<input type="radio" name="dan" checked="checked" value="money" />

6, 按钮
<input type="button" value="按钮内容" />

7, 复选框
<!-- 复选框 disabled表示禁用-->
<input type="checkbox" name="fu" disabled="disabled" value="money1"/>
<input type="checkbox" name="fu" disabled="disabled" value="money2" />
<input type="checkbox" name="fu" value="money3" />
<input type="checkbox" name="fu" value="money4" />

8, 下拉菜单
<select>
<option value ="">北京</option>
<option value ="上海">上海</option>
<option value ="深圳">深圳</option>
</select>

9, 多行文本
<textarea rows="5" cols="20">

</textarea>

3,表单高级

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
1,表单字位焦
<fieldset id="">
<legend>信息页面</legend>


</fieldset>
功能:相当于一个方框,在字段中可以包含文本和其他元素,该元素用于对表单中的元素进行分组并在文档中区别标出文本,fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象

2, 字段级标题
<legend>信息页面</legend>
功能: legend元素可以在fieldset对象控制的方框内插入一个标题,legend元素必须是fieldset内的第一个元素

3, 表单元素
(1) 上传文件框(文件域)
<!-- 上传文件框 multiple 表示上传多个文件-->
<input type="file" name="" value="选择文件" multiple="multiple" />

(2) 图像域
<input type="image" width="100" height="100" value="" src="./img/favicon.ico" />

(3) 提示信息标签
<label for="ti1">信息</label>
<input type="text" name="name" id="ti1" value="" placeholder="请输入信息"/>
功能: label 元素用来定义标签,为页面上的其他元素指定提示信息,要将label元素绑定到其他的控件上,可以将label元素的for属性设置为与该控件的id属性值相同。
label元素不会向用户呈现任何效果,不过,他为鼠标用户改进了可用性,如果在label元素内点击文本,就会触发此控件,就是说,当用户选择标签时,浏览器就会自动将焦点转到和标签相关的表达控件上。

(4)时间
<!-- 时间标签 -->
<input type="date" name="" />

<!-- 颜色 -->
<input type="color" name="" />
电话号码
<input type="tel" name="" id="" value="" />

等等还有很多,

评论


:D 一言句子获取中...

加载中,最新评论有1分钟缓存...