web学习第五天:9-29

(一)用CSS美化html个人简历

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<!--表格开始-->
<table border="1" cellspacing="0" width="800px" height="100%" align="center">
	<tr style="height: 80px" >
		<th>
		<h1>我的简历</h1>
		</th>
	</tr>
	<tr style="height: 50px">
		<th width="130px">姓名</th>
		<td width="130px">
			<input type="text" name="x1" value="填写姓名"/>
		</td>
		<th width="130px">性别</th>
		<td width="130px">
			<select >
				<option value="男生">男生</option>
				<option value="女生">女生</option>				
			</select>
		</td>
table tr th h1 {
	color: #000000;
	font-size: 30px;
	text-align: center;
}
input[type="text"]
{
	color: #BEBEBE;
	border:0;
}
input[type="file"]
{
	width: 120px;
	height: 0px
}
select{
	width: 160px;
	height: 40px
}

table tr th{
	background-color: #C2C2C2;
	color: #282828;
}


table tr th input {
	width: 60px;
	height: 80px;
}
table tr th textarea{
	width: 650px;
}

(二)用CSS美化框架锚点文章

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		p {
			color:#2B2B2B;
			}
		h1 {
			color:#B22222;
			text-align:center
		}
		img {
			width: 800px;
		}
	</style>
</head>
<body>
<a name="_p0"><h1>全球九座唯美餐厅</h1>
	<a name="_p1"><h2>1、西班牙餐厅 El Celler de Can Roca</h2>
	<p>
		El Celler de Can Roca餐厅的菜肴被米其林指南誉为“融合了超现实主义的传统菜肴”。这家餐厅由Roca兄弟三人共同经营,三兄弟赋予西加泰罗尼亚菜肴全新的色彩组合和创意搭配,成为餐厅最大的亮点。<br>
		<p align="center">
			<img src="http://5b0988e595225.cdn.sohucs.com/images/20180621/02b20ce36227495ea1505d0f148ab212.jpeg" ><br>
			<img src="http://5b0988e595225.cdn.sohucs.com/images/20180621/d35f95eedea04a98a21f5ef0c89c6602.jpeg" ><br>
			<img src="http://5b0988e595225.cdn.sohucs.com/images/20180621/ca86a077271644dca4fe8abca8ed4eb5.jpeg" >
		</p>

(三)回答问题

1 css的版本进化历史

CSS1.0:CSS1指CSS(层叠样式表)的第一个版本,它于1996年12月17日成为W3C推荐标准 [1] ,为哈肯·维姆·莱(Håkon Wium Lie)和伯特·波斯(Bert Bos)共同设计而成 [2] 。该版本中提供了有关文字、颜色、位置和文本属性等基本信息.
CSS2:是一套全新的样式表结构,是由W3C推行的,同以往的CSS1完全不一样,CSS2推荐的是一套内容和表现效果分离的方式,HTML元素可以通过CSS2的样式控制显示效果,可完全不使用以往HTML中的table和td来定位表单的外观和样式,只需使用div和li此类HTML标签来分割元素,之后即可通过CSS2样式来定义表单界面的外观.
CSS3:SS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 [1] 。
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性,这也让跨浏览器开发变得复杂

2 css有哪些选择器,其定义语法分别是什么

a 派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。

li strong {
    font-style: italic;
    font-weight: normal;
  }

b id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 “#” 来定义。

#red {color:red;}
#green {color:green;}


<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

c 类选择器
在 CSS 中,类选择器以一个点号显示

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

d 属性选择器
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

[title]
{
color:red;
}

3 html和CSS有什么关系,为什么会有CSS技术的出现?

HTML是框架,CSS是样式
HTML进行布局,CSS进行页面的美化

把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

(三)今日学习总结

CSS有点难

猜你喜欢

转载自blog.csdn.net/lemon_SIR/article/details/82904633