1) 认识表格:
表格table(会使用),存在即是合理的,表格现在还是一种较为常用的一种标签,常见处理、显示表格式数据
① 表格中提供了HTML中定义表格式数据的方法
② 表格中由行中的单元格组成
③ 表格中没有列元素,列的个数取决于行的单元格个数
④ 表格不要纠结与外观,那是css的作用
表格的学习要求:能手写表格结构,并且能合并单元格
创建表格:在HTML网页中,要想创建表格,就需要使用表格相应的标签。创建表格基本的语法格式如下:
<table>
<tr>
<td>单元格内的文字</td>
…
</tr>
</table>
其中table是用来定义一个表格的,tr用于定义表格中的一行,必须嵌套在table标签中,在table中包含几对tr就有几行标签(td和th也必须在嵌套在tr标签中)。
练习的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第二天课程学习—创建表格元素1</title>
</head>
<body>
<table width="500px" border="2px">
<tr>
<th align="center">姓名</th>
<th align="center">性别</th>
<th align="center">电话</th>
<th align="center">是否单身</th>
</tr>
<tr>
<td align="center">王宝龙</td>
<td align="center">男</td>
<td align="center">110</td>
<td align="center">否</td>
</tr>
<tr>
<td align="center">崔鹏翔</td>
<td align="center">男</td>
<td align="center">119</td>
<td align="center">是</td>
</tr>
<tr>
<td align="center">刘崇煦</td>
<td align="center">不男不女</td>
<td align="center">120</td>
<td align="center">万年单身</td>
</tr>
<tr>
<td align="center">周培熠</td>
<td align="center">男</td>
<td align="center">520</td>
<td align="center">凭实力目前单身</td>
</tr>
</table>
</body>
</html>
上面的代码可以更简便一点(直接给tr标签里添加align = “center”)
截图效果是:
几个属性:
<table border = “1” align = “center” cellspacing = “10” cellpadding = “10”>
Cellspacing表示单元格和单元格之间的距离
Cellpading表示单元格内容距离单元格边框的距离
(三参为0:border、cellspacing、cellpadding)
表格标题和表头单元格:
表头标签:表头单元格一半位于表格的第一行或者是第一列,其文本加粗居中,设置表头标签替代相应的单元格标签就可以了
表格结构:
表格标题:caption(只存在表格里面)
<table>
<caption>我是表格标题</caption>
</table>
(caption标签必须紧跟table标签之后,您只能对每一个表格定义一个标题,通常这个标题会被居中于表格之上)
合并单元格:(跨行合并:rowspan 跨列合并 colspan)
合并单元格的思想:
将多个内容合并的时候,就会有多余的东西,把它删除,例如:3个td合并成一个,就会多余两个,需要删除)
公式:删除的个数=合并的个数-1
合并的顺序:先上 先左
4) 今日小说排行:
要做出这样的表格:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第二天今日小说排行练习</title>
<base target="_blank" />
</head>
<body>
<table align="center" border="2px" cellspacing="0px" cellpadding="0px">
<caption>今日小说排行版</caption>
<tr align="center">
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr align="center">
<td>1</td>
<td>鬼吹灯</td>
<td>↓</td>
<td>345</td>
<td>123</td>
<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_cO80-ybFCoB8H944ue7vSwF8tNVuEy7QSjTGThVaG5Nc."/>贴吧</a>
<a href="https://img03.sogoucdn.com/v2/thumb/resize/w/120/h/90/zi/on/iw/90.0/ih/67.5?t=2&url=http%3A%2F%2Fpic.baike.soso.com%2Fugc%2Fbaikepic2%2F3403%2F20160718220919-1980820896.jpg%2F300&appid=200524&referer=http://baike.sogou.com/v69083.htm?fromTitle=%E9%AC%BC%E5%90%B9%E7%81%AF"/>图片</a>
<a href="https://www.sogou.com/link?url=DOb0bgH2eKjRiy6S-EyBciCDFRTZxEJgMTznynMASKNVy6JvJfJZBvCJC-1zdrX6txDnxrDoWzVT-MgowryYvIOJ16amVS5LA4mtMjbBg0vVabgTa8qmDl0iaKTkyWbh">百度百科</a></td>
</tr>
<tr align="center">
<td>2</td>
<td>盗墓笔记</td>
<td>↓</td>
<td>124</td>
<td>675672</td>
<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_cS2QE3vdfxrFD8eQbOOxUa-Pjf5RWoLIHxN7Cm3n0P6E."/>贴吧</a>
<a href="https://img03.sogoucdn.com/v2/thumb/resize/w/120/h/135/zi/on/iw/90.0/ih/101.25?t=2&url=http%3A%2F%2Fpic.baike.soso.com%2Fugc%2Fbaikepic2%2F17792%2Fcut-20180821143239-1691699826_jpg_346_433_24500.jpg%2F300&appid=200524&referer=http://baike.sogou.com/v156838.htm?fromTitle=%E3%80%8A%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0%E3%80%8B"/>图片</a>
<a href="https://baike.baidu.com/item/%E5%90%B4%E9%82%AA/5577022">百度百科</a></td>
</tr>
<tr align="center">
<td>3</td>
<td>西游记</td>
<td>↑</td>
<td>7654</td>
<td>123</td>
<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_cFVvxthplykjnKFW_7sziyxaTF6Nre3fB"/>贴吧</a>
<a href="https://img01.sogoucdn.com/v2/thumb/resize/w/120/h/135/zi/on/iw/90.0/ih/101.25?t=2&url=http%3A%2F%2Fpic.baike.soso.com%2Fugc%2Fbaikepic2%2F754%2F20170916103925-56299110_png_438_600_389918.jpg%2F300&appid=200524&referer=http://baike.sogou.com/v81050709.htm?fromTitle=%E8%A5%BF%E6%B8%B8%E8%AE%B0"/>图片</a>
<a href="https://www.sogou.com/link?url=DSOYnZeCC_rZXVZCtvPXjmRFzFBIhMTsfXXJy1_j20oyrvlWdHJtSq3mlRzfPLR2">百度百科</a></td>
</tr>
<tr align="center">
<td>4</td>
<td>东游记</td>
<td>↑</td>
<td>23</td>
<td>75645</td>
<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_cdyGov71-aBt701bh8v6f3Xv0AMyDAyon9FYHLs1EHfI."/>贴吧</a>
<a href="https://img02.sogoucdn.com/net/a/04/link?&url=https%3A%2F%2Fgss3.bdstatic.com%2F84oSdTum2Q5BphGlnYG%2Ftimg%3Fwapp%26quality%3D80%26size%3Db150_150%26subsize%3D20480%26cut_x%3D0%26cut_w%3D0%26cut_y%3D0%26cut_h%3D0%26sec%3D1369815402%26srctrace%26di%3D0930992c20caa1559236e2b005c8c78f%26wh_rate%3Dnull%26src%3Dhttp%253A%252F%252Fimgsrc.baidu.com%252Fforum%252Fpic%252Fitem%252F4bed2e738bd4b31c908e5bf886d6277f9f2ff8c7.jpg&appid=100520103&referer=http://tieba.baidu.com/f?kw=%E4%B8%9C%E6%B8%B8%E8%AE%B0"/>图片</a>
<a href="https://www.sogou.com/link?url=DOb0bgH2eKjWdIrIu0k581wbbYQ3LWL42sYbOXuUgml701bh8v6f3Xv0AMyDAyonSytOou8Q6qzr3fg2LzbHEq3mlRzfPLR2">百度百科</a></td>
</tr>
<tr align="center">
<td>5</td>
<td>甄嬛传</td>
<td>↓</td>
<td>121</td>
<td>7676</td>
<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_c0DyN8llOjAC-MRfJK9m2DGsIEVBqxC7LsEqvT3uqrKUAr0gZzabzVA.."/>贴吧</a>
<a href="https://img01.sogoucdn.com/net/a/04/link?&url=https%3A%2F%2Fgss3.bdstatic.com%2F84oSdTum2Q5BphGlnYG%2Ftimg%3Fwapp%26quality%3D80%26size%3Db150_150%26subsize%3D20480%26cut_x%3D0%26cut_w%3D0%26cut_y%3D0%26cut_h%3D0%26sec%3D1369815402%26srctrace%26di%3D4c1ad55e7add12c152a8c174450ed194%26wh_rate%3Dnull%26src%3Dhttp%253A%252F%252Fimgsrc.baidu.com%252Fforum%252Fpic%252Fitem%252F4bed2e738bd4b31c47edf03886d6277f9f2ff864.jpg&appid=100520103&referer=http://tieba.baidu.com/f?kw=%BA%F3%B9%AC%D5%E7%8B%D6%B4%AB"/>图片</a>
<a href="https://baike.baidu.com/item/%E7%94%84%E5%AC%9B/8230404">百度百科</a></td>
</tr>
<tr align="center">
<td>6</td>
<td>水浒传</td>
<td>↑</td>
<td>576576</td>
<td>1231421</td>
<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_cDo7bPywBcrWhMGWTgYhho0FHnLoQIIlgXaVyuZCWUK8."/>贴吧</a>
<a href="https://img02.sogoucdn.com/net/a/04/link?&url=https%3A%2F%2Fgss3.bdstatic.com%2F84oSdTum2Q5BphGlnYG%2Ftimg%3Fwapp%26quality%3D80%26size%3Db150_150%26subsize%3D20480%26cut_x%3D0%26cut_w%3D0%26cut_y%3D0%26cut_h%3D0%26sec%3D1369815402%26srctrace%26di%3Da137549118fd2a68585e72f007a7b091%26wh_rate%3Dnull%26src%3Dhttp%253A%252F%252Fimgsrc.baidu.com%252Fforum%252Fpic%252Fitem%252Ffd039245d688d43fad6e007a7c1ed21b0ff43b76.jpg&appid=100520103&referer=http://tieba.baidu.com/f?kw=%D0%C2%CB%AE%E4%B0%B4%AB"/>图片</a>
<a href="https://www.sogou.com/link?url=DOb0bgH2eKjRiy6S-EyBciCDFRTZxEJg3azFCUQOYK6uCsIPhglAiq72NCRS-NvQsY_dFrdXDlkUXDwtitygldJIZCHleyBHVZxwfOT2sSWt7zahKn5a3g..">百度百科</a></td>
</tr>
<tr align="center">
<td>7</td>
<td>三国演义</td>
<td>↑</td>
<td>234</td>
<td>7686</td>
<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_cdyGov71-aBvfgOX8Gw_qhbWniCdqOfcTTmnNv3A13uvYHljPMCQe_63mlRzfPLR2"/>贴吧</a>
<a href="https://img04.sogoucdn.com/v2/thumb/resize/w/120/h/135/zi/on/iw/90.0/ih/101.25?t=2&url=http%3A%2F%2Fpic.baike.soso.com%2Fugc%2Fbaikepic2%2F9706%2F20141204011040-1442824385.jpg%2F300&appid=200524&referer=http://baike.sogou.com/v84585057.htm?fromTitle=%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%3A"/>图片</a>
<a href="https://www.sogou.com/link?url=DOb0bgH2eKjRiy6S-EyBciCDFRTZxEJgAZWhGyBBaMpVy6JvJfJZBvCJC-1zdrX6ylF-6UlxLHLuNHiuHkTlqzBWXXZzW6TAudFPsRSaJXstVS6jOvw1AA..">百度百科</a></td>
</tr>
</table>
</body>
</html>
基本代码是这样,实现的效果图是:
要是觉得太窄的话还是可以在table中加上width标签,至于剩下的那个颜色是css和js的事情了)
还可以加上表头好表身等标签,在第一行单元格中加上thead,后面则可以加上tbody,紧接着可以加上tfoot,这样结构就会更清晰
5) 合并单元格:
Rowspan和colspan先上后下先左后右,所以在哪合并就在哪个td里面加上colspan,至于合并的对象所在的单元格可以删掉了
先确认跨行还是跨列
找到目标单元格
先上后下 先左后右
看是否是第几行第几个(表格里面是没有列元素的)
删除的个数等于合并的个数减去1
6) 表单标签:目的是收集用户信息,在网页中,也需要跟用户进行交互,收集用户资料,此时也需要表单,在HTML中,一个完整的表单通常由(表单控件)也叫表单元素、提示信息和表单域三个部分构成
Input控件:标签是单标签,type属性是基本的属性,取值不同,用于多种不同的控件类型。(表示输入信息)
Type说明属于哪种文档类型,password是密码输入框,radio是单选按钮(如果是一组,我们必须给它们命名相同的名字name,这样就可以多个选其中一个,这样就不至于同时选多项)CheckBox复选框,可以实现多组选择,image图像形式的提交按钮
File表示文件type = “file”,checked表示被选择的,不能更改,maxlength是最大长度限制(后面通过正则表达式使用)
这个图片真的是重点
7) 下拉表单和文本域
Label标签:为input元素定义标注(标签)
作用:用于绑定一个表单元素,当点击label元素的时候,被绑定的表单元素就会获得输入焦点(可以把input标签包裹在里面)
For属性规定label与哪个表单元素绑定
<label for=”male”>Male</label>
<input type = “radio” name = “sex” id = “male” value = “male”>
Textarea控件(文本域)
Text文本框只能写一行,textarea支持复文本
文本内容
下拉表单(可以节约空间,使用select控件)
<
select>
<option>选项1</option>
<option>选项2</option>
…
</select>
注意:中至少包含一对,在option中定义select=“selected”时,当前项即为默认选中项
⑧ 表单域
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>世纪佳缘,你在我也在~~</title>
</head>
<body>
<table width="600px" align="center" border="0px"
cellspacing="0px" cellpadding="0px">
<caption align="center"><h4>青春不常在,赶紧谈恋爱!</h4></caption>
<tr align="center">
<td>性别</td>
<td>
<input type="radio" name="a"/>男 <img src="男_wps图片.png" />
<input type="radio" name="a"/>女<img src="女_wps图片.png" />
<!--需要注意的是这个radio表示的是单选按钮,其中为了让这选按钮起作用,必须规定同一组要有相同的名字,用name = ""来实现-->
</td>
</tr>
<br />
<tr align="center">
<td>生日</td>
<td>
<select>
<option selected="selected">请选择年</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
<select>
<option selected="selected">请选择月</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</td>
</tr>
<br />
<tr align="center">
<td>居住地区</td>
<td><input type="text" value="北京东城"/></td>
</tr>
<br />
<tr align="center">
<td>婚姻状况</td>
<td>
<input type="radio" name="x" />已婚
<input type="radio" name="x" />离异
<input type="radio" name="x"/>未婚
<input type="radio" name="x" />丧偶
</td>
</tr>
<br />
<tr align="center">
<td>学历</td>
<td>
<select>
<option>高中</option>
<option selected="selected">本科</option>
<option>初中</option>
<option>小学</option>
<option>专科</option>
<option>研究生</option>
<option>博士生</option>
</select>
</td>
</tr>
<br />
<tr align ="center">
<td>月薪</td>
<td>
<input type="text" value="3000——5000"/>
</td>
</tr>
<br />
<tr align="center">
<td>手机号</td>
<td>
<input type="password" />
</td>
</tr>
<br />
<tr align="center">
<td>昵称</td>
<td>
<input type="text" />
</td>
</tr>
<br />
<tr align="center">
<td>喜欢的类型</td>
<td>
<input type="checkbox" />妩媚
<input type="checkbox" />柔美
<input type="checkbox" />可爱
<input type="checkbox" />小鲜肉
<input type="checkbox" />型男
<input type="checkbox" />气质
</td>
</tr>
<br />
<tr align="center">
<td >自我介绍</td>
<td>
<textarea rows="10" cols="50"></textarea>
</td>
</tr>
<br />
<tr>
<td>
<input type="image" img src="注册.png" />
</td>
</tr>
<tr align="center">
<td width="200" height="20">
<input type="radio" />我同意注册条款和会员加入标准
</td>
</tr>
<tr align="center">
<td><a href="www.taobao.com">我是会员,立即登录</a>
</tr>
</table>
<ul >
<p>我承诺:</p>
<li>我已年满18周岁</li>
<li>我将保持着严肃的态度加入到这个社区</li>
<li>本人的一切情况属实</li>
</ul>
</body>
</html>
截图如下(好丑)
我是真的不知道这个到底怎么对齐了(在立即注册后面)
8) 查文档:
W3C: https://www.w3school.com.cn/(是一个公益的网站,里面可能有错误)
MDN: https://developer.mozilla.org.zh-CN/(国外的网站)
9) 行内样式表:
CSS初识:美化样式
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图像的外形(身高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制以及整体的排版等,而且还可以针对不同的浏览器设置不同的样式
引入CSS样式表(按照书写位置来区分)
① 内部样式表:内嵌式是将代码集中写在HTML文档的head头部标签中,并且用style标签定义:
<head>
<style type = “text/CSS”>
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
</head>
之前小说代码里面可以在前面加上这个
<style type="text/css">
th
{
color: deepskyblue;
}
</style>
<!--选择器{属性:值;}-->
这样的结果就是我们的th一栏颜色变成了蓝色(当然也是可以把字体的大小变成14px)
td
{
font-size: 14px;
}
② 行内样式表(内联样式)
内联样式(行内样式、行间样式、内嵌样式)通过标签的style样式来设置行内式,语法中的style是标签的属性,实际上任何一个HTML标签都有style属性,用来设置行内式。其中属性和值的书写规范,行内式只针对其所在的标签及嵌套在其中的子标签起作用
<标签名 style = “属性1:属性值1;属性2:属性值2;属性3:属性值3;”>内容</标签名>
先来练习一下《忆江南》
忆江南(1)
唐.白居易
江南好,风景旧曾谙。(2) 日出江花红胜火,春来江水绿如蓝,(3) 能不忆江南。
作者介绍
白居易(772-846) ,字乐天,太原(今属山西)人。唐德宗朝进士,元和三年(808)拜左拾遗,后贬江州(今属江西)司马,移忠州(今属四川)刺史,又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳,自号醉吟先生、香山居士。其诗政治倾向鲜明,重讽喻,尚坦易,为中唐大家。也是早期词人中的佼佼者,所作对后世影响甚大。
注释
(1)据《乐府杂录》,此词又名《谢秋娘》,系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字,双凋五十四字,皆平韵。(2)谙(音安):熟悉。(3)蓝:蓝草,其叶可制青绿染料。
品评
此词写江南春色,首句“江南好”,以一个既浅切又圆活的“好”字,摄尽江南春色的种种佳处,而作者的赞颂之意与向往之情也尽寓其中。同时,唯因“好”之已甚,方能“忆”之不休,因此,此句又已暗逗结句“能不忆江南”,并与之相关阖。次句“风景旧曾谙”,点明江南风景之“好”,并非得之传闻,而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字,又照应了“忆”字,不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 行形象化的演绎,突出渲染江花、江水红绿相映的明艳色彩,给人以光彩夺目的强烈印象。其中,既有同色间的相互烘托,又有异色间的相互映衬,充分显示了作者善于著色的技巧。篇末,以“能不忆江南”收束全词,既托出身在洛阳的作者对江南春色的无限赞叹与怀念,又造成一种悠远而又深长的韵味,把读者带入余情摇漾的境界中。
写的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>忆江南</title>
<!--必须要加上style,来修改样式-->
<style type="text/css">
h4
{
color: pink;
}
p
{
color: #048
}
</style>
</head>
<body>
<h3 style="color: lawngreen;">忆江南(1)</h3>
<div style="color: yellow;">唐.白居易</div>
<p>江南好,风景旧曾谙。 日出江花红胜火,春来江水绿如蓝, 能不忆江南。</p>
<h4>作者介绍</h4>
<p>白居易(772-846) ,字乐天,太原(今属山西)人。唐德宗朝进士,元和三年(808)拜左拾遗,后贬江州(今属江西)司马,移忠州(今属四川)刺史,又为苏州(今属江苏)、同州(今属陕西大荔)刺史。
晚居洛阳,自号醉吟先生、香山居士。其诗政治倾向鲜明,重讽喻,尚坦易,为中唐大家。也是早期词人中的佼佼者,所作对后世影响甚大。
</p>
<h4>注释</h4>
<p>(1)据《乐府杂录》,此词又名《谢秋娘》,系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。单调、双调两体。单调二十七字,双凋五十四字,皆平韵。
(2)谙(音安):熟悉。(3)蓝:蓝草,其叶可制青绿染料。
</p>
<h4>品评</h4>
<p>此词写江南春色,首句“江南好”,以一个既浅切又圆活的“好”字,摄尽江南春色的种种佳处,而作者的赞颂之意与向往之情也尽寓其中。
同时,唯因“好”之已甚,方能“忆”之不休,因此,此句又已暗逗结句“能不忆江南”,并与之相关阖。
次句“风景旧曾谙”,点明江南风景之“好”,并非得之传闻,而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字,又照应了“忆”字,不失为勾通一篇意脉的精彩笔墨。
三、四两句对江南之“好”进 行形象化的演绎,突出渲染江花、江水红绿相映的明艳色彩,给人以光彩夺目的强烈印象。
其中,既有同色间的相互烘托,又有异色间的相互映衬,充分显示了作者善于著色的技巧。
篇末,以“能不忆江南”收束全词,既托出身在洛阳的作者对江南春色的无限赞叹与怀念,又造成一种悠远而又深长的韵味,把读者带入余情摇漾的境界中。
</p>
</body>
</html>
③ 外部样式表(外链式)
嵌入式是将所有的样式放在一个或多个以CSS为拓展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中
<head>
<link href = “CSS文件的路径” type =”text/CSS” rel = “stylesheet”/>
</head>
(link标签必须放在head头部标签中,而且必须指出link标签的三个属性)
12)2个小问题总结:
14)类选择器:
选择器(重点)
要想将CSS样式应用于特定的HTML元素,首先需要找到目标元素,在CSS中,执行者一任务的样式规则部分被称为选择器
CSS基础选择器
① 标签选择器(元素选择器):之前写的都是标签选择器
标签选择器是指用HTML标签名作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式
标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3}
或者元素名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
标签选择器的最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能差异化样式
② 类选择器:使用“.”(英文点号)进行标识,后面1紧跟其类名,其基本语法格式如下:
类名{属性1:属性值1;属性2:属性值2:;属性3:属性值3;}
标签调用的时候用class“类名”即可
类选择器最大的优势是可以为元素对象定义单独或相同的样式
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
/*div 标签选择器 把所有的div选择改为红色*/
/*div
{
color: red;
}*/
/*上面点申明,下面class调用*/
/*Ctrl+shift+/就可以快速进行注释了*/
.suibian
{
color: deepskyblue;
}
.one
{
color: dodgerblue;
}
.two
{
color: red;
}
.three
{
color: yellow;
}
.four
{
color: limegreen;
}
</style>
</head>
<body>
<div>我是选择器</div>
<div>我是选择器</div>
<div class="suibian">我是选择器</div>
<p>下面要做一个谷歌的课堂里子</p>
<span class="one">G</span>
<span class="two">o</span>
<span class="three">o</span>
<span class="one">g</span>
<span class="four">l</span>
<span class="two">e</span>
</body>
</html>
老师的实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google实例</title>
<style>/*千万别忘了它*/
span
{/*这是标签选择器:让所有的span都变成150像素*/
font-size: 150px;
}
.g
{
color: skyblueblue;
}
.o
{
color: red;
}
.oo
{
color: orange;
}
.l
{
color: green;
}
</style>
</head>
<body>
<span class="g">G</span>
<span class="o">o</span>
<span class="oo">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="oo">e</span>
</body>
</html>
类选择器可以使用多个选择器,可以多个页面使用