1.net培训-cssdiv.ppt

Sovo助理.NET培训 ——CSS 群号 刘赵阳 层(div) 块（span） 层：div/div将内容放到层中，就以将这些内容当成一个整体进行处理，比如整体隐藏、整体移动等。Div非常强大和常用。类似于WinForm的Panel Span:div 是讲内容放到一个矩形的区块中，会影响布局，而span只是一段内容定义成一个整体进行操作，但不会影响布局、显示。 样式表（css） Css(层叠样式表)是用来美化页面用的，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等。Css主要有元素内联、页面嵌入和外部引用三种使用方式。 元素内联：直接将样式写入元素的style属性中，input type=“text” readonly=“readonly” style=“background-color”:#ffoff” / 使用于样式没有可复用性的场合。 页面潜入：在head中加入 style type=“text/css” Input{border-color:yellow,color.red) /style 外部引用 Textarea{background:yellow} 然后在页面中引用 在head中加入 link type=“text/css” rel=“Stylesheel” href=“s1.css” / 适合于多个页面共享css 常见样式 Css计量单位： css中表示宽度、局里时有多种计量单位：px(像素)、30%（百分比） 、 em(相对单位)等、width:20px Background-color:red; 背景颜色； color:文本颜色 Border-style:solid;边框风格，实线，还有dotted（点）等值；border-color:边框颜色：border-width:边框宽度。例子：style=“border-color:red;border-width:1px border-style:dotted;” Display: 元素是否显示，可选值none(不显示)、block(显示为块级元素，此元素前后会带有换行符。)、inline(显示为内联元素，元素前后没有换行符)等 常见样式 Cursor,鼠标在元素上时显示的光标图标，可选值：cursor（默认光标）、pointer(超链接上的手)、text(输入bean)、wait(忙沙漏)、help(帮助)等。 LI不显示圆点：list-style-type:none;一般设在li或者ul上 引用：图片：不显示边框 样式选择器 对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合哪些元素，三种：标签选择器，class选择器和id选择器。 标签选择器 input{border-color:red; color:Red},对于指定的标签采用统一的样式 Class选择器，以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class,名称之间加空格 样式名称开头加“.” .a{background:yellow} .h{font-size;xx-large;cursor:help;} tabletrtd calss=”h”aaa/td td class=“a”bbbbb/td/tr/table ID选择器 为指定id的元素设定样式，id前加# #user { Font-size:xx-large; } input id =“user” type=“text” value=“aaa” / Style、class可以同时组合使用 input id=“user” class=“accountno” style=“font-size:xx-lagre” type =“text” value =“aaaaaa” / 更多选择器（*） 关联选择器： P strong{background-color:yellow} 表示P标签内的strong标签内的内容使用的样式 strongsssss/strong pstrongcccccccc/strong/p 组合选择器,同时为多个标签设定一个样式 H1.H2.input{background-color:green} h1sdfa/h1 input type=“text” value=“test” / 伪选择器 伪选择器：为标签的不同状态设定不同的样式； A：visited; 超链接点击过的样式； A:active:选中超连接时的样式； A：link; 超链接未被访问时的状态；A：hover;鼠标移到超链接时的状态。 A：visited{text-decoration:none} A:activ