CSS、外观、主题.docVIP

样式、外观、主题 一、样式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)块级元素：