1、样式表 css
CSS 层叠样式表是用来美化页面用的,简单说CSS可以描述控件的精细设置,通过元素的style属性来展示。
CSS主要有元素内联,页面嵌入和外部引用3种使用方法。
元素内联:即在一个标签内部直接定义该元素的样式,一般用于不复用的场合。
页面嵌入:在<head>标签内定义一个<style type="text/css">标签,在<style>标签内可以定义需要的样式,格式为
元素类型{样式},比如 input{ background-color:ReD}
当<body>标签使用input元素时,会自动引用<head>标签内的对应元素的样式。将背景色变成红色
页面嵌入的方式主要用于单个页面内标签样式的统一。
外部文件:将css文件单独写在一个文件中,在<head>标签内通过<link type="text/css" rel="Stylesheet" href="文件路劲
">引用该文件。这种方式用于多个页面共享同一个CSS文件。
他们3者的关系式,元素内联>页面嵌入>外部文件
2、常见的样式
css计量单位:px(像素),百分比,em(相对单位)等。通常格式如 width:20px 这表示元素控件的宽度为20个像素
background-color:背景颜色
color 文本颜色
border-style 边框的风格, border-color 边框颜色 border-width 边框宽度,默认为0 这三个样式通常配对使
用
display 元素是否显示,可选值包括none(不显示),block(显示为块级,元素前后会带换行符)inline(显示为内联元
素,元素前后没有换行符)
curson 元素对应的光标图标
3、样式选择器
用于描述非内联元素的样式的选择,有3种,标签选择器,class选择器,和id选择器
标签选择:其实标签选择器和上面的页面嵌入方式是一样的,他们是通过标签的名来确定样式的
class选择器:在定义样式时给样式取一个名字,然后在我们的元素的class属性中选择样式名字来确定元素的样式。
如 在<head>标签内定义了一个样式 .hignlight{font-size:20;cursor:help}
.lowerlight{font-color:red;cursor:help}
当我们的某一元素需要使用这个样式的时候, 只需将class属性的值设置为hignlight即可
<p class=“hignlight”> aaaa </p>
注意,在给样式取名字的时候,前面必须加一个“.”
一个元素可以同时设定多个class,只需在给class属性赋值时将两个样式名字用空格分开
<p class=“hignlight lowerlight”> aaaa </p>
标签+class选择器 : 主要用于实现不同的标签,同样的样式名有不同的样式,申明格式如下
标签名.样式名{样式}
如 input.hignlight{font-size:20;cursor:help;}
label.hignlight{font-size:30;cursor:point;}
这样,当我们在label标签中使用hignlight样式时字体大小是30,而在input标签中使用hignlight样式时
字体大小是20
id选择器: 对指定ID应用样式 格式如下
#username{ }
这个样式表明对于id为username的元素应用样式,这样在元素内不用书写任何代码来设置样式。
关联选择器: P Strong { }表示p标签内的strong标签的样式
组合选择器:同时为多个标签设定样式 如H1,H2,input{} 表示3个标签都使用同一样式,
Windows Phone 7手机开发、 .Net培训、期待与您交流!