(19)C#传智:CSS,选择器,样式（第19天)
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、内联样式表
（在标签内设置元素的样式）
朝参暮礼常如此，在处皆通极乐城。
优点：灵活，随意。
缺点：如果很多标签要添加，每个都得设置style，麻烦！
2、嵌入样式表
（需要在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标签，并写上内容：
一读二读尘念消，三读四读染情薄。
读至十百千万遍，此身已向莲华托。
亦愿后来读诵者，同予毕竟生极乐。
3)上面两步，还没有关联，无法生效。代码切换到Html页，把项目中的Test.css用鼠标
拖动到html中（不限位置），推荐用在head标签内.自动生成下面代码：
或者在head内手动添加也可：
如果在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）组合选择器
6）伪元素选择器
伪元素选择器
是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。例如，对于
超链接标签（）的正常状态（没有任何动作前）、访问过的状态、选择状态、光标移
到超链接文本上的状态，对于段落的首字母和首行，都可以使用伪元素选择器来定义。
伪元素的几种情况：
A:active 选中超链接时的状态；
A:hover 光标移动到超链接上的状态
A:link 超链接的正常状态
A:visited 访问过程超链接状态
P:first-line 段落中的第一行文本
P:first-letter 段落中的第一个字母
1）前面就是通过HTML select来指定元素p,tt等。
2）下面类选择器,是通过人为规定某些标题里的class来确定指明的标签。
怒发冲冠，凭栏处、潇潇雨歇。
抬望眼、仰天长啸，壮怀激烈。
三十功名尘与土，八千里路云和月。
莫等闲、白了少年头，空悲切。
3）同时，通过设置标签的ID，来确定哪些标签的样式更改。
注意：class是“某些”标签，来表示是同一类别。多个。
id是“某个”标签，表示某个标签。具有唯一性。单个。
怒发冲冠，凭栏处、潇潇雨歇。
抬望眼、仰天长啸，壮怀激烈。
三十功名尘与土，八千里路云和月。
莫等闲、白了少年头，空悲切。
4）关联选择器，不是某个标签，是多个标签一起时才进行确定该位置样式。下面对p或em不会
生效。但是，在p与em同时存在时就会生效。
怒发冲冠，凭栏处、潇潇雨歇。
抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。 莫等闲、白了少年头，空悲切。
5）组合选择器，把多个有相同设置的标签，用逗号组合在一起设置，简单明了。
万里长城永不倒
万里长城永不倒
万里长城永不倒
万里长城永不倒
万里长城永不倒
万里长城永不倒
万里 万里 万里 万里 长城 长城 长城 长城
6）伪元素
床前明月光
疑是地上霜
举头望明月
超链接
超链接
超链接
超链接
四、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
练习：
几回梦到法王家，来去分明路不差。
出水珠幢如日月，排空宝盖似云霞。
鸳鸯对浴金池水，鹦鹉双衔玉树花。
睡美不知谁唤醒，一垆香散夕阳斜。
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。也可以是数值。
文档流：文档在排列元素时会按照从上到下，从左到右，依次时行排列，不会有重复。
一个层只有一个元素。
例如：下面红绿蓝只能从上到下排列：
但有时，设计多个元素在同一位置层叠显示，就必须脱离文档流的控制。
试图指明红绿蓝三个位置，修改style如下：
但是，并没有层叠效果，这里就需要脱离文档流的控制，用position进行控制:
例子，网页右下角弹出提示，可以用div及最上层显示出来。
上面还有一个小bug，拉动垂直滚动条向下，div会上跑。只需要把上面的绝对位置改成固定位置。
即修改为：position:fixed;
3、文本
文本的属性包括：文字间距，对齐方式，上下标，排列方式，首先缩进。
Word-spacing：设置单词之间的间距。
Letter-spacing:设置字符之间的间距
Text-align：设置文本的水平对齐为方式，取值可以是let,right,center,justfy
Text-index：设置第一行文本的缩进值。
Line-height：设置文本所在行的高度。
Css就是Cascading Style Sheet单词的缩写也即层叠样式表
一念代万念，如如不动
4、位置
位置属性就是制定元素的位置。
Position：设置对象的定位方式。
有三种取值：absolute(绝对定位),relative(相对定位)，static(无特殊定位)
默认为static
Left：设置元素左边的水平位置
Top：设置元素顶部的垂直位置。
Width：设置元素显示的宽度。
Height:设置元素显示的高度。
Z-index：使用定位后。 元素的上下层次。
5、边缘
Margin类用于设置元素的边界与其它元素的空隙大小。
Margin-top:设置元素的上边界与其它元素之间的空隙大小。
Margin-right:设置元素的右边界与其它元素之间的空隙大小。
Margin-bottom:设置元素的下边界与其它元素之间的空隙大小。
标准盒子模型：
一个盒子就一个Div
黄河之水天上来，奔流到海不复返。
常用盒子模型来布局网页。例如网页常居中显示，两侧空白。可用div居中。
设置网页，先布局，再填内容。布局用div,为了区分每个div都用背景色，开发完后拆除背景色.
下面设置一个整体div，首部挂个横着的div，第二排的div分成左右两部分。
![]()
图片文章"
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,
.Net培训开班信息
.Net基础班 北京-2014年5月6号 预约报名中 北京-2014年5月6号 预约报名中 北京-2014年5月6号 预约报名中 北京-2014年5月6号 预约报名中 .Net就业班 北京-2014年5月6号 预约报名中 北京-2014年5月6号 预约报名中 北京-2014年5月6号 预约报名中 北京-2014年5月6号 预约报名中 .Net远程班 北京-2014年5月6号 预约报名中 北京-2014年5月6号 预约报名中
注意：这里面的css比较长，影响整个html，可以另建css，用外部样式表的方式进行操作。例子：用列表制作导航。