css层叠样式小记

 

•

常见的样式

 

css计量单位：css中表示宽度、距离时有多种计量单位：px（像素）、30%（百分比）、em（相对单位）等。width:20px。

•background-color:Red;背景颜色；color：文本颜色

•复合样式 background border

•border-style:solid;边框风格，实线solid（默认是没有），还有dotted(点)等值；border-color：边框颜色；border-width：边框宽度(默认是0)。例子：style="border-color:Red;border-width:1px;border-style:dotted;"

•display：元素是否显示，可选值none（不显示,不占地儿）、block（显示为块级元素，此元素前后会带有换行符。）、inline（显示为内联元素，元素前后没有换行符）等。

•cursor，鼠标在元素上时显示的光标图标，可选值：cursor（默认光标）、pointer（超链接上的手）、text（输入Bean）、wait（忙沙漏）、help（帮助）等。还可以通过cursor:url(dinosau2.ani)使用ani、cur格式的自定义光标图片。

•LI不显示圆点：LIST-STYLE-TYPE: none;一般设在li或者ul上

•应用：图片：不显示边框，见备注

 

 

样式选择器

 

 

•对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合于哪些元素，三种：标签选择器、class选择器和id选择器。

•标签选择器 input{border-color:Yellow;color:Red;}，对于指定的标签采用统一的样式

•class选择器，以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格

–样式名称开头加“.”

–       .warning{background:Yellow;}

–       .highlight{font-size:xx-large;cursor:help;}

–<table><tr><td class="highlight">aaa</td><td class="warning">bb</td><td class="highlight warning">ccc</td></tr></table>

 

标签+class选择器

 

•class选择器也可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。

–input.accountno{text-align:right;color:Red;}

–label.accountno{font-style:italic;}

–<input class="accountno" type="text"value="111111111111111" />

–<labelclass="accountno">333333333333333333</label>

 

id选择器

 

 

 

•为指定id的元素设定样式，id前加#

•       #username

•       {

•       font-size:xx-large;

•       }

•<input id="username" type="text" value="aaaaaaaaaaaa"/>

•style、class可以同时组合使用

•<input id="username" class="accountno" style="font-size:xx-large" type="text" value="aaaaaaaaaaaa" />

 

 

•伪选择器：为标签的不同状态设定不同的样式：

•A:visited：超链接点击过的样式；A:active：选中超链接时的样式；A:link：超链接未被访问时的状态；A:hover：鼠标移到超链接时的状态。

•A:visited {TEXT-DECORATION: none}

•A:active {TEXT-DECORATION: none}

•A:link {TEXT-DECORATION: none}

•A:hover {TEXT-DECORATION: underline}

•说明：TEXT-DECORATION: none表示超链接不显示下划线。

 

精通DIV + CSS

Meta

1、div span
2、三种样式表
 内联样式(行内样式)
 嵌入样式
 外部样式

 就近原则
3、常见样式
 复合样式background  border
 css单位  %  px  em
 background-color
 color
 border-style
 border-width
 border-color
 display:none、block块、inline内嵌
 cursor
 list-style-type:none
 float
 clear 清除浮动
 margin 间距
 padding 填充
 position 相对 绝对  固定
 帮助
4、样式选择器
 标签选择器 input
 类选择器 .class
 id选择器 #wrap
 标签+类选择器
 * 包含选择器 p strong
 * 组合选择器 h1,h2,input{}
 伪选择器  为标签的不同状态设定样式
5、表格的细边框
6、ul 做菜单
7、布局
 表格布局
 框架布局
 div+css布局
  

 /* 强制英文换行 word-break:break-all; */
 /* 溢出后显示滚动条 */
 overflow:auto;

作业：
表格细边框
ul做菜单
div+css做布局

让导航显示到右边
三栏的布局