资源描述
样式、外观、主题
一、样式CSS
1、HTML标签的外观
(1)通过HTML标签的属性
(2)使用CSS样式表
2、在HTML中引入CSS的方法
(1)行内式：在标记的style属性中设定CSS样式。
(2)嵌入式：将页面中各种元素的设置集中写在<head>标签中，
(3)导入式与链接式：将一个独立的CSS文件引入HTML文件中。
导入式：<style type=”text/css”>@impor “css文件路径”;</style>，在页面装载完成之后。
链接式：<link href=”css文件路径” rel=”stylesheet” type=”text/css” />，在装入页面主体部分之前装载CSS文件。
采取就近和后定义的起作用的原则。如果前后对一个控件定义了相同的CSS，那么后面的定义将起作用而忽略前面的定义。
如果设置了<head Runat=”server”>，则将自动引用主题中的CSS文件。
3、选择器
(1)标记选择器：使用HTML标记的名称来做为标记选择器的名称。CSS标记选择器用来声明哪些标记采用哪种CSS样式。
HTML标记
{ 属性名:属性值;
属性名：属性值;
…
}
(2)类别选择器
格式：.类别选择器名{属性1：属性值;属性2：属性值;…}
在HTML标记中通过class属性来引用。
Web服务器控件：使用CssClass属性进行引用
(3)ID选择器：选中Html标签相同的Id
格式：#ID选择器名{属性1：属性值;属性2：属性值;…}
(4)级联
格式1：选择器1.选择器2…{属性1：属性值;属性2：属性值;…}
格式2：选择器1 选择器2 …{属性1：属性值;属性2：属性值;…}
格式3：选择器1>选择器2>…{属性1：属性值;属性2：属性值;…}
选中：选择器1下的选择器2,…{属性1：属性值;属性2：属性值;…}
(5)多个Css同时声明
格式：选择器1,选择器2,…{属性1：属性值;属性2：属性值;…}
4、标签元素的CSS分类
(1)块级元素：以一个块的形式表现出来，与同级的兄弟块依次竖直排列，左右排撑满。
(2)行内元素：为占有独立的区域。
(3)设置元素类型：disiplay：block(块)、inline(行内)，可以通过设置此元素，来改变元素的类型。
5、CSS的盒子模型
(1)边框
Border-style
Border-width
Border-color
border-top
border-top-style
border-top- width
border-top-color
border-right
border-right-style
border-right- width
border-right-color
border-bottom
border-bottom-style
border-bottom-width
border-bottom-color
border-left
border-left-style
border-left- width
border-left-color
(2)方框
内边距：pandding、padding-left、padding-botton、padding-right、padding-top
外边距：margin、margin-left、margin-botton、margin-right、margin-top
(3)内容：
宽：width 高：height
6、元素
(1)行内元素
占用空间的宽度：
内容宽度+margin-left+margin-right+padding-left+padding-right+border-left+border-right，如果在一行中空间不够，自动换行。
占用空间的高度：由内容来决定。
上下框的显示可能超出一行，但超出的部分不占用流式布局的空间，对其它元素没有影响。margin-top、margin-bottom无效。padding-top、padding-bottom是相对内容所占有的行为基准，即上、下边框扩展了，内容还是在原来的行内。
方框内的Background覆盖整个方框。
Position：有效，此时margin-top、margin-bottom对计算位置是有效的，由于是浮动的，所以对其它元素没有影响。relative ：相对定位,元素仍占用原来的空间区域，对显示的新区域无任何影响。Absolute：处于浮动状态，元素不占用原来的空间区域，对显示的新区域无任何影响。Fixed在IE不对。
Float：进行左右排列，将变成一个块元素，相关的所有块属性都有效。
(2)块级元素：
占用空间的宽度：整行。内容显示的宽度，由width决定。如果内容超出行宽度，自动换行在方框内的内容区域显示。Width的值不会改变。
占用空间的高度：height+margin-top+margin-bottom+padding-top+padding-bottom
+border-top+border-bottom。当height的值不能满足内容区域的高度时，自动扩展高度，此时height就不正确了。
relative ：相对定位,元素仍占用原来的空间区域，对显示的新区域无任何影响。
Absolute：处于浮动状态，元素不占用原来的空间区域，对显示的新区域无任何影响。Fixed在IE6不支持。
7、流式布局
(1)行内元素间距：margin-right+margin-left，当一行容不下时，自动转到下行排列。
(2)块级元素：相邻元素之间的上下间距为：margin-botton与margin-top中较大者，称为“塌陷”。每个元素占一行。
(3)父子：子块的margin将以父块content为参考。
1)行内元素：父padding：父padding+子margin+子padding。
子元素：见行内元素。
做postion无意义：乱。
2)块级元素：
注1：如果子元素的高度超过父元素的height值：
IE会自动扩大，保持子元素的margin-bottom的空间以及父元素自身的padding-bottom。
Firefox：保证父元素的Height高度完全吻合，子元素将超过父元素的范围。
注2：如果margin为负值
7、浮动(float)布局和定位(position)
布局：float：元素会向父元素的左侧或右侧靠紧，盒子的宽度不再伸展。在IE和FF中不相同。解决办法：都设置float属性。建议：在使用float为非none时，兄弟节点都设置其此属性。
5、字体
字体
font-family
粗细
Font-weitht
字体变形
Font-variant
大小
font-size
字形
Font-style
颜色
Color
大小写转换
Text-transform
装饰效果：text-decoration
下划线
Underline
顶划线
overline
删除线
Line-through
闪烁
Blink
无
None
6、块
行高：line-height
垂直对齐：Vertical-align
水平对齐：text-align
段首缩进：text-indent
空白：white-space
文字间隔：Word-spacing
字母间隔：Letter-spacing
7、背景
背景颜色：Background-color
背景图片：background-image
背景重复：background-repeat
背景附件：background-attachment，背景附件属性决定指定的背景图象是跟随内容滚动，还是被看作油画固定不动。
background-position：图象位置属性给出指定背景图象的最初位置。这个属性只能应用于块级元素和替换元素。
………….
8、用户注册页面
(1)设置文本框的CSS
(2)验证失败的CSS
9、查看订单、订单明细的表格样式
2、控件外观：Skin
定义Web服务器控件的外观。
(1)默认外观：没有”SkinID”属性。自动应用于同一类型的所有控件。
(2)命名外观：外观文件中设置SkinID属性。不会自动按类型应用于控件，而是通过设置控件的SkinID属性将命名外观应用于要定义的控件。
3、主题：
存放在特殊文件夹App_Themes中，它属于系统文件夹。
(1)在网页中使用主题：设置网页的Theme属性为主题名称。
(2)在整个应用程序使用主题：在web.config里设置：
<system..web>
<pages theme=”主题名” />
</system.web>
如果应用程序或页都有Theme属性，则进行合并。
如果主题和控件定义了控件的属性，则主题中的控件属性设置将重写控件中的设置。
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
