vs2022保存html项目时，偶尔会有死机，只得强行关闭重新打开。
一、CSS简介
CSS(Cascading Style Sheet)层叠样式表。能让网页制作者有效的定制，改善网页的效果。
CSS是对Html的补充，它很好地控制了网页的显示效果。并实现网页内容与效果彻底分离。
学习前准备。开始准备用 vs2022进行asp.net。
1）安装环境：如果没有在vs2022中安装asp.net，那么打开vs2022,上在面菜单 工具->获取工具
和功能 ，弹出Visual Studio Install，经过程序检查后。在左侧选中ASP.NET和Web开发（
复选框)，对应的，右侧会出现复选，直接傻瓜式全选。然后安装。约30分钟安装后重启电脑.
2）打开vs2022,选择创建新项目后，新窗体的右侧上面选择C#,windows,web对项目进行过滤。
在最上面搜索框中，填入空网站。就会搜索出结果，第一个："ASP.NET空网站",选择它，
下一步，项目名称随便，这里不更改，直接创建。
3）进入WebSite1项目后，对解决方案中的项目WebSite1右击->添加->HTML页。或者右击->
添加->新建项->HTML页。双击HtmL项进行我们要用的网页设计。
此时，可以按住Ctrl+鼠标滚轮，对编程界面文字进行放大可缩小显示。
二、CSS的几种设置方式
即通过怎样的方式向Html页面中写入CSS的代码。
三种方式：
1、内联样式表
（在标签内设置元素的样式）
<p style="background:teal;font-size:xx-large">朝参暮礼常如此，在处皆通极乐城。</p>
优点：灵活，随意。
缺点：如果很多标签要添加，每个都得设置style，麻烦！
2、嵌入样式表
（需要在Head标签内写)
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p {
background-color: teal;
font-size: xx-small;
}
</style>
</head>
注意：上面是对p标签的全部设置，body内如果另有style的则遵其设置。
说明内联样式表的优先级高于嵌入样式表。
3、外部样式表 link
利用一个设置好的样式表文件直接使用。
样式表的创建：
在解决方案中，右击项目，添加->样式表；或者右击后，添加->新项目,弹出的窗体中
去找：样式表（C#) 这里取名为Test.css
1)打开上面的样式表Test.css，删除所有，创建下面代码：
tt{
background-color:lightskyblue;
font-size:xx-large;
}
2)上面是描述tt标签的，在HTML页的body创建tt标签，并写上内容：
<tt>
一读二读尘念消，三读四读染情薄。<br/>
读至十百千万遍，此身已向莲华托。<br/>
亦愿后来读诵者，同予毕竟生极乐。<br/>
</tt>
3)上面两步，还没有关联，无法生效。代码切换到Html页，把项目中的Test.css用鼠标
拖动到html中（不限位置），推荐用在head标签内.自动生成下面代码：
<link href="Test.css" rel="stylesheet" />
或者在head内手动添加也可：
<link href="Test.css" rel="stylesheet" type="text/css" />
如果在Test.css中再对p标签设置
tt{
background-color:lightskyblue;
font-size:xx-large;
}
p{
background-color:gray;
}
运行时会发现，对P标签不生效了。
因为它的优先级低于嵌入与和内联。
优先级高低：内联样式表>嵌入样式表>外部样式表
三、选择器
一般不使用内联式，而使用嵌入表或外部样式表。但嵌入式又难以确定某个标签，这时就可
以使用选择器。
样式规则的选择器:通过怎样的途径来获得页面上要设置样式的元素）
1）HTML select
2）Class Selector（需要给要设置样式的元素的class属性赋值）
3）ID Selector（需要给设置样式的元素的ID属性赋值）
4）关联选择器 P EM{background-Color:Yellow}
5）组合选择器 <table></table>
6）伪元素选择器
伪元素选择器
是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。例如，对于
超链接标签（<a></a>）的正常状态（没有任何动作前）、访问过的状态、选择状态、光标移
到超链接文本上的状态，对于段落的首字母和首行，都可以使用伪元素选择器来定义。
伪元素的几种情况：
A:active 选中超链接时的状态；
A:hover 光标移动到超链接上的状态
A:link 超链接的正常状态
A:visited 访问过程超链接状态
P:first-line 段落中的第一行文本
P:first-letter 段落中的第一个字母
1）前面就是通过HTML select来指定元素p,tt等。
2）下面类选择器,是通过人为规定某些标题里的class来确定指明的标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p.p1 {
background-color: yellow;
}
p.p2 {
background-color: teal;
font-size:xx-large;
}
</style>
</head>
<body>
<p class="p1">怒发冲冠，凭栏处、潇潇雨歇。</p>
<p class="p2">抬望眼、仰天长啸，壮怀激烈。</p>
<p class="p1">三十功名尘与土，八千里路云和月。</p>
<p class="p2"> 莫等闲、白了少年头，空悲切。</p>
</body>
</html>
3）同时，通过设置标签的ID，来确定哪些标签的样式更改。
注意：class是“某些”标签，来表示是同一类别。多个。
id是“某个”标签，表示某个标签。具有唯一性。单个。
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1 {
background-color: gray;
}
#p2 {
background-color: aqua;
font-size: xx-large;
}
</style>
</head>
<body>
<p id="p1">怒发冲冠，凭栏处、潇潇雨歇。</p>
<p id="p1">抬望眼、仰天长啸，壮怀激烈。</p>
<p id="p2">三十功名尘与土，八千里路云和月。</p>
<p id="p2"> 莫等闲、白了少年头，空悲切。</p>
</body>
4）关联选择器，不是某个标签，是多个标签一起时才进行确定该位置样式。下面对p或em不会
生效。但是，在p与em同时存在时就会生效。
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p em {
background-color: gold;
}
</style>
</head>
<body>
<p><em>怒发冲冠，凭栏处、潇潇雨歇。</em></p>
<em>抬望眼、仰天长啸，壮怀激烈。</em>
<em>三十功名尘与土，八千里路云和月。</em>
<p> 莫等闲、白了少年头，空悲切。</p>
</body>
5）组合选择器，把多个有相同设置的标签，用逗号组合在一起设置，简单明了。
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h1, h2, h3, h4, h5, h6, td {
background-color: hotpink;
}
</style>
</head>
<body>
<h1>万里长城永不倒</h1>
<h2>万里长城永不倒</h2>
<h3>万里长城永不倒</h3>
<h4>万里长城永不倒</h4>
<h5>万里长城永不倒</h5>
<h6>万里长城永不倒</h6>
<table border="1" cellpadding="4">
<tr>
<td>万里</td>
<td>万里</td>
<td>万里</td>
<td>万里</td>
</tr>
<tr>
<td>长城</td>
<td>长城</td>
<td>长城</td>
<td>长城</td>
</tr>
</table>
</body>
6）伪元素
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a:active {
text-decoration: none;
}
a:hover {
font-size: xx-large;
}
P::first-letter {
font-size: xx-large;
}
P::first-line {
font-size: xx-small;
}
</style>
</head>
<body>
<p>
床前明月光<br />
疑是地上霜<br />
举头望明月<br />
</p>
<a href="#">超链接</a> <br />
<a href="#">超链接</a> <br />
<a href="#">超链接</a> <br />
<a href="#">超链接</a> <br />
</body>
四、CSS当中的样式属性详解
Css 当中的属性非常多，大体上可以分为以下几类: 字体、背景、文本、位置、布局、边缘、列表。
1、字体
字体的属性主要包括文字的字体、大小、颜色、显示效果等基本样式，下面是各种字体属性的详细
介绍。
Font-family:该属性用于设置字体系列。如宋体，仿宋，黑体等
Font-size:该属性定义文字的大小，可以使用度量单位来设置字体的大小，也可以使用一个相对
的字体大小。还可以使用绝对的大小标记符。
绝对大小的设置：xx-small,x-small,small,medium,large,x-large,xx-large(小到大)
font-style 该属性用于定义字体样式,有：Normal、Italic 或者 Oblique(斜体)。
text-decoration 该属性用于在文本中条件下划线、上划线、中划线。
font-weight 该属性用于设置粗体字的磅值该属性的值有:
normal、bold、bolder、lighter、100~900
练习：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1 {
font-family: '田英章楷书 英章楷书';
}
#p2 {
font-size: xx-large;
}
p.p3 {
font-style: italic;
border-top: dashed;
border-left: dotted;
border-bottom: double;
}
p.p4 {
font-weight: 800
}
</style>
</head>
<body>
<p id="p1">几回梦到法王家，来去分明路不差。</p>
<p id="p2">出水珠幢如日月，排空宝盖似云霞。</p>
<p class="p3">鸳鸯对浴金池水，鹦鹉双衔玉树花。</p>
<p class="p4">睡美不知谁唤醒，一垆香散夕阳斜。</p>
</body>
2、背景
背景包括背景颜色，背景图像，以及背景图像的控制。
Background-color:设置背景色. transparent表示透明的背景色。
Background-image：设置元素的背景图像。
Background-repeat:确定背景图像是否以及如何重复。
这个属性的取值no-repeat:表示背景图像只在元素的显示区域中出现一遍。
Repeat: 在水平和垂直方向上垂直。Repeat-x和Repeat-y分别在水平或垂直方向上的重复。
Background-attachment:确定背景图像是否跟随内容滚动。
设置为fixed时，表示固定背景图像；为Scroll时，表示图像跟随内容移动而移动。
Background-position:指定背景图像的水平位置和垂直位置。
水平位置的取值可以是left,center,right,也可以是数值。
垂直的取值可以是top,center,bottom。也可以是数值。
文档流：文档在排列元素时会按照从上到下，从左到右，依次时行排列，不会有重复。
一个层只有一个元素。
例如：下面红绿蓝只能从上到下排列：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
height: 90px;
width: 90px;
}
div.div1 {
background-color: red;
}
div.div2 {
background-color: green;
}
div.div3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
但有时，设计多个元素在同一位置层叠显示，就必须脱离文档流的控制。
试图指明红绿蓝三个位置，修改style如下：
<style type="text/css">
div {
height: 90px;
width: 90px;
}
div.div1 {
background-color: red;
top: 30px;
left: 30px;
}
div.div2 {
background-color: green;
top: 50px;
left: 50px;
}
div.div3 {
background-color: blue;
top: 70px;
left: 70px;
}
</style>
但是，并没有层叠效果，这里就需要脱离文档流的控制，用position进行控制:
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
height: 90px;
width: 90px;
}
div.div1 {
background-color: red;
top: 30px;
left: 30px;
position: absolute; /*绝对定位*/
z-index: 3; /*上下层*/
}
div.div2 {
background-color: green;
top: 50px;
left: 50px;
position: absolute;
z-index: 2;
}
div.div3 {
background-color: blue;
top: 70px;
left: 70px;
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
例子，网页右下角弹出提示，可以用div及最上层显示出来。
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div.div1 {
height: 90px;
width: 90px;
right: 0px;
bottom: 0px;
background-color: teal;
position: absolute;
}
</style>
</head>
<body>
<div class="div1">右下角广告</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
上面还有一个小bug，拉动垂直滚动条向下，div会上跑。只需要把上面的绝对位置改成固定位置。
即修改为：position:fixed;
3、文本
文本的属性包括：文字间距，对齐方式，上下标，排列方式，首先缩进。
Word-spacing：设置单词之间的间距。
Letter-spacing:设置字符之间的间距
Text-align：设置文本的水平对齐为方式，取值可以是let,right,center,justfy
Text-index：设置第一行文本的缩进值。
Line-height：设置文本所在行的高度。
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.p1 {
word-spacing: 20px; /*单词间距*/
letter-spacing: 20px; /*各字符含汉字间距*/
}
.p2 {
text-align: left;
text-indent: 15px;
line-height: 20px;
background-color: green;
}
</style>
</head>
<body>
<p class="p1">Css就是Cascading Style Sheet单词的缩写也即层叠样式表</p>
<p class="p2">一念代万念，如如不动</p>
</body>
4、位置
位置属性就是制定元素的位置。
Position：设置对象的定位方式。
有三种取值：absolute(绝对定位),relative(相对定位)，static(无特殊定位)
默认为static
Left：设置元素左边的水平位置
Top：设置元素顶部的垂直位置。
Width：设置元素显示的宽度。
Height:设置元素显示的高度。
Z-index：使用定位后。 元素的上下层次。
5、边缘
Margin类用于设置元素的边界与其它元素的空隙大小。
Margin-top:设置元素的上边界与其它元素之间的空隙大小。
Margin-right:设置元素的右边界与其它元素之间的空隙大小。
Margin-bottom:设置元素的下边界与其它元素之间的空隙大小。
标准盒子模型：
一个盒子就一个Div
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin-left: 0px;
}
/*所有网页元素*/
div.div1 {
height: 150px;
width: 300px;
background-color: red;
padding: 10px;
}
p.p1 {
height: 30px;
background-color: teal;
padding: 20px;
}
</style>
</head>
<body>
<div class="div1"><p class="p1">黄河之水天上来，奔流到海不复返。</p></div>
</body>
常用盒子模型来布局网页。例如网页常居中显示，两侧空白。可用div居中。
设置网页，先布局，再填内容。布局用div,为了区分每个div都用背景色，开发完后拆除背景色.
下面设置一个整体div，首部挂个横着的div，第二排的div分成左右两部分。
<head>
<meta charset="utf-8" />
<title></title>
<link href="Test.css" rel="stylesheet" type="text/css" />
<style type="text/css">
div.divIndex {
width: 800px;
height: 900px;
background-color: gray;
margin: 0px auto;
}
div.divLogo {
width: 800px;
height: 60px;
background-color: green;
}
div.divContent {
width: 800px;
height: 100px;
background-color: yellow;
}
div.divPicture {
width: 300px;
height: 100px;
top: 60px;
background-color: aqua;
float: left;
}
div.divArtical {
width: 500px;
height: 100px;
top: 60px;
left: 300px;
background-color: navy;
float: left;
}
</style>
</head>
<body>
<div class="divIndex">
<div class="divLogo">
<img src="2.jpg" height="60" />
</div>
<div class="divContent">
<div class="divPicture">
图片
</div>
<div class="divArtical">
文章
</div>
</div>
</div>"
</body>
margin: 0px auto;是上下为0，左右自动，即居中。
上面的第二排图片与文章，不能用position:absolute进行绝对定位，因为居中并不知道
它的左边距是多少，所以用一float漂浮，两个float漂浮排列成一行。
综合例子：
制作界面：
分析：
整体div分成上下两部分。上面一个div,下部分为一个table，为两列，主要有四类：班级类，
开班类, 预约红色类，爆满蓝色类。
测量一下高宽290*380。整个漂浮float,文本颜色设置color,对字体padding可以设置位置。
字体加粗font-weight, 对单元格padding可以设置行高.
虚线border-bottom:1px dashed #000000；字体对齐text-align,
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0px;
font-size: 12px;
}
div.divIndex {
float: right;
background-color: aliceblue
}
div.logo {
width: 290px;
height: 28px;
background-color: steelblue;
color: white;
}
#textLogo {
font-size: 15px;
padding: 2px;
font-weight: bold;
}
#table {
padding: 10px;
}
td.td1 {
font-weight: bold;
}
td.td2 {
color: dodgerblue;
border-bottom: 1px dotted lightsteelblue;
}
td.td3 {
color: red;
font-weight: bold;
text-align: right;
border-bottom: 1px dotted lightsteelblue;
}
td.td4 {
color: blue;
font-weight: bold;
text-align: right;
border-bottom: 1px dotted lightsteelblue;
}
</style>
</head>
<body>
<div class="divIndex">
<div class="logo">
<p id="textLogo">.Net培训开班信息</p>
</div>
<table width="290" height="340" id="table">
<tr>
<td class="td1">.Net基础班</td>
</tr>
<tr>
<td class="td2">北京-2014年5月6号</td>
<td class="td3">预约报名中</td>
</tr>
<tr>
<td class="td2">北京-2014年5月6号</td>
<td class="td4">预约报名中</td>
</tr>
<tr ">
<td class="td2">北京-2014年5月6号</td>
<td class="td3">预约报名中</td>
</tr>
<tr ">
<td class="td2">北京-2014年5月6号</td>
<td class="td4">预约报名中</td>
</tr>
<tr>
<td class="td1">.Net就业班</td>
</tr>
<tr>
<td class="td2">北京-2014年5月6号</td>
<td class="td3">预约报名中</td>
</tr>
<tr>
<td class="td2">北京-2014年5月6号</td>
<td class="td4">预约报名中</td>
</tr>
<tr>
<td class="td2">北京-2014年5月6号</td>
<td class="td3">预约报名中</td>
</tr>
<tr>
<td class="td2">北京-2014年5月6号</td>
<td class="td4">预约报名中</td>
</tr>
<tr>
<td class="td1">.Net远程班</td>
</tr>
<tr>
<td class="td2">北京-2014年5月6号</td>
<td class="td3">预约报名中</td>
</tr>
<tr>
<td class="td2">北京-2014年5月6号</td>
<td class="td3">预约报名中</td>
</tr>
</table>
</div>
</body>
注意：这里面的css比较长，影响整个html，可以另建css，用外部样式表的方式进行操作。
例子：用列表制作导航。
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0px auto;
}
div.divIndex {
height: 1200px;
width: 800px;
background-color: yellow;
}
div.divLogo {
height: 110px;
width: 800px;
background-color: aqua;
}
div.divNav {
height: 30px;
width: 800px;
background-color: lightpink;
}
ul li {
float: left;
width: 120px;
list-style: none;
font-size: 18px;
line-height: 30px;
}
a:hover {
font-size: 20px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="divIndex">
<div class="divLogo"></div>
<div class="divNav">
<ul>
<li><a href="#">企业简介</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">荣誉奖章</a></li>
<li><a href="#">长远规划</a></li>
<li><a href="#">售后服务</a></li>
</ul>
</div>
</div>
</body>
40
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
