Web前端学习第二周
嵌套列表
ep:
<ul>
<li>广东省`<ul>
<li>珠海市<li>
<ul><li>
<ul>
表格标签
<table>
(表格的最外层容器)<tr>
(定义表格行)<th>
(定义表头)<td>
(定义表格单元)<caption>
(定义表格标题)
语义化标签:<tHead>、 <tBody>、 <tFoot>
`(有利于引擎优化,团队协作)
表格属性
- border:表格边框
- cellpadding:单元格内的空间
- cellspacing:单元格之间的空间
- rowspan:合并行
- colspan:合并列
- align:左右对齐方式(含left、center、right三个值)(靠哪)
- valign:上下对齐方式(含top、middle、bottom三个值)
表单表格组合
ep:
<!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>
</head>
<body>
<form action="">
<table border="1" cellpadding="30"></table>
<tbody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="center">
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr align="center">
<tr>
<td>密码:</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr align="center">
<tr>
<td colspan="2"></td>
<input type="submit">
<input type="reset">
</tr>
</form>
</body>
</html>
效果展示
<div
> 与<span>
标签
div(块):分区网页,相当于一块区域容器,可嵌套多层
span(内嵌):用来修饰文字
CSS语法格式
格式:
选择器{属性1:值1;属性2:值2}
长度单位:
px->像素(pixel)
%–>百分比
基本样式:
width:宽
height:高
background-color:背景色
CSS注释:
/*注释内容*/
内联样式与内部样式
内联(行内,行间)样式
在html标签上添加style属性
<body>
<div style="width: 100px;height: 100px;background-color: blue;">BLUE</div>
<div style="width: 100px;height: 100px;background-color: blue;">BLUEDY</div>
</body>
内部样式
在<style>
标签内添加的样式
<style>
div{width: 100px;height: 100px;background-color: :blue;}
</style>
</head>
<div>
BLUE</div><siv>BLUEDY
</siv>
</body>
优点:可以复用代码
区别:
内部样式的代码可以复用、复合W3C的规模标准,进行让结构和样式分开处理。
外部样式
引入一个单独的CSS文件,name.css
<link>
标签(引入外部资源)
real属性:指定资源页面关系
href属性:资源的地址
CSS中的颜色表达
1.单词表示法: red, blue, green…
2.十六进制表示法:#000000
0 1 2 3 4 5 6 7 8 9 a b c d e f
3.rgb三原色表示法:rgb(255,255,255)
取值范围(0,255)
CSS背景样式
background-color :背景颜色
background-image: 背景图片
background-repeat: 背景图片平铺方式
background-position: 背景图片位置
background-attachment: 背景图片随滚动条的移动方式
CSS边框样式
border-style:边框的样式
solid:实线
dshed:虚线
dotted:点线
border-width:边框的大小
px…
border-color:边框的颜色
red #f00
<style>
div{width: 300px;height: 300px;border-style: dashed;border-color: blue;border-width: 3px;}
</style>
</head>
<body>
<div></div>
</body>
效果展示
注:针对某一条边进行单独设置:border-left-style:中间是方向(left,right,top,bottom)
颜色:透明颜色:transparent
练习:实现三角形边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{ background-color:green;}
div{ width:0px; height:0px;
border-top-color: transparent;
border-top-style:solid;
border-top-width:30px;;
border-right-color: red;
border-right-style:solid;
border-right-width:30px;;
border-bottom-color: transparent;
border-bottom-style:solid;
border-bottom-width:30px;;
border-left-color: transparent;
border-left-style:solid;
border-left-width:30px;;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/6d4a0293d6ff4ffc92e0d1940ca75039.png#pic_center)
效果展示
font-family:字体类型
英文字体:Arial,Times new roman
中午字体:微软雅黑,宋体(simsun)
<style>
div{font-family: SimSun;}
</style>
</head>
<body>
<div>字体测试</div>
</body>
注意点:
1.多个字体类型设置目的
2.引号添加的原因
front-size:字体大小
默认:16px
写法:number(px) | 单词(small large…不推荐去)
font-weight:字体粗细
模式:
正常(normal)
加粗(bold)
写法:number(100 200…900,100到500为正常,600到900是加粗的)
font-style:字体样式
模式:
正常(normal)
斜体(italic)
写法:单词(normal,italic)
CSS段落样式
text-decoration:文本装饰
下划线 :underline
删除线 :line-through
上划线 :overline
无:none
text-transform:文本大小
小写:lowercase
大写: uppercase
只针对首字母大写:capitalize
text-indent: 文本缩进(首行缩进)
p{text-indent:2em;font-size:16px;}
em单位:相对单位,len永远跟字体大小相同
line-height: 定义行高
p{line-height:1;}
默认行高不是固定值,随字体大小改变
取值1.number(px) | scale(比例值跟文字大小成比例)
letter-spacing: 定义字间距
p{letter-spacing:10px;}
word-spacing: 定义词间距(针对英文)
p{word-spacing:10px;}
英文和数字不自动折行问题:
1.word-break:break-all;(非常强烈的折行)
<style>
div{width: 300px;height: 300px;border: 1px solid grey;word-break: break-all;}
</style>
</head>
<body>
<div>THE ANTS were spending a fine winter's day drying grain collected in the summertime. A Grasshopper, perishing with famine, passed by and earnestly begged for a little food. The Ants inquired of him, " Why did you not treasure up food during the summer?' He replied, "I had not leisure enough. I passed the days in singing." They then said in derision: "If you were foolish enough to sing all the summer, you must dance supperless to bed in the winter."
</div>
</body>
效果展示
2.word-wrap:break-word:(较弱的折行,会产生一些空白区域
)
<style>
div{width: 300px;height: 300px;border: 1px solid grey;word-wrap: break-word;}
</style>
</head>
<body>
<div>THE ANTS were spending a fine winter's day drying grain collected in the summertime. A Grasshopper, perishing with famine, passed by and earnestly begged for a little food. The Ants inquired of him, " Why did you not treasure up food during the summer?' He replied, "I had not leisure enough. I passed the days in singing." They then said in derision: "If you were foolish enough to sing all the summer, you must dance supperless to bed in the winter."
</div>
</body>
效果展示
CSS复合样式
通过空格方式实现
1.background:red url()repeat 0 0;
2.border: lpx red solid;
3.font(最少要有两个值 size family,family在后)
注:尽量不要混写,如果非要混写,则需先写复合样式再写单一样式。
CSS选择器
ID选择器
css:#elem{}
html:id=“elem”
注:
1.在一个页面中,ID值是唯一的
2.命名规范,字母_-数字(命名第一位不能有数字)
3.命名方式:
驼峰式:searchbuttom(小驼峰)
下划线:search_small_buttom
短线式:search-samll-buttom
<style>
#div1{width: 100px;height: 100px;background: rgb(79, 196, 36);}
#div2{width: 100px;height: 100px;background: gray;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
效果展示
CLASS选择器
.elem{}
注:
1.可以1复用
2.可以添加多个class样式
3.多个样式的时候,样式的优先级根据css决定,而不是class树形中的顺序
<body>
<style>
.box{width: 100px;height: 100px;background-color: rgb(0, 255, 76);}
.content{font-size: 30px;}
</style>
</head>
<body>
<p class="box"></p>
<p class="box content">有字</p>
</body>
效果展示