zoukankan      html  css  js  c++  java
  • div+css的属性


    div+css的属性

    gCascading Style Sheet 层叠式样式表 ==> 层叠样式表
    Internal Style Sheet 内部样式表
    External Style Sheet 外部样式表
    inheritance 继承
    em 斜体
    Strong粗体
    descendent selector 派生选择器
    universal selector 通用选择器 ==> 通配选择器
    Inline Style 行内样式表


    设置图层的透明度:
    filter: alpha(opacity=70);
    opacity: 0.7;


    点到那里就跳点到那里
    1.首先给元素起个名字
    2到连接的元素上上输入超链接 <a href="#元素名"></a>

    居中设置:
    1、单行垂直居中文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!
    2、层水平居中设置div的宽度小于父div的宽度,设置 margin:0 auto;,即可让div居中。
    3、层中的文字水平居中:在childdiv的css加上text-align:center;


    display属性
    基本上分为inline,block,和none。
      inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
      block元素前后换行。标题和段落元素是块元素。
      none,意思不显示元素,在可用性上可以实现漂亮的效果,交替样式或hover效果的高级运用。
    list-item列表项目,就像期待HTML里的li元素。它们需要嵌套在元素里面显示。
    run-in元素的表现形式由它的父元素决定。IE和Mozilla都不支持。
      compat根据上下阿文决定表现形式,同样IE和Mozilla都不支持。
      maker仅仅使用在:before和:after伪元素,设定content属性的表现。content属性默认表现就是maker,所以它只有在覆盖原来属性 时才有用。
      content属性,它的默认就是maker,所以只有在覆盖原来属性时使用。


    clera:both;清除

    属性单位

    em(比如font-size: 2em)是一个大致与一个字符高度相同的单位。
    px(font-size: 12px)是一个像素的单位。
    pt(font-size: 12pt)是一个磅的单位。
    %(font-size: 80%)是百分比。
    其他单位还包括pc(活字),cm(厘米),mm(毫米)和in(英寸)。
    不想要边界,可以这样设置:border: 0 。

    margin是隔开元素与外边,


    margin 边距 |段落之间的间距(元素与元素之间的距离)

    top margin 上边距
    bottom margin 下边距
    left margin 左边距
    right margin 右边距
    (margin-top, margin-right, margin-bottom,
    margin-left, padding-top, padding-right, padding-bottom and padding-left)

    padding 填充(位于content和border之间。层的边框到层的内容之间的空白)padding是隔开元素里边。

    top padding 上方填充
    bottom padding 下方填充
    left padding 左侧填充
    right padding 右侧填充

    border 边框(元素的最外围)

    border color 边框颜色
    border style 边框样式 (none 没有 hidden 不明显的 dotted 点 dashed虚线 solid 固double两倍 groove压线 ridge脊insent coutset)
    border width 边框宽度 (thin medium(默认2px) thick length )
    anchor 锚 (FrontPage里叫书签,Dreamweaver里叫命名锚记)

    定位

    float 浮动

    float属性:left right none relative fixed
    z-index属性为整数z-index值较大的元素将叠加在z-index值较小的元素之上。

    position:static absolute (绝对定位)

    Positioning 定位
      positon属性可以指定元素为absolute,relative,static或是fixed。
      static是元素默认属性,按HTML出现的先后顺序。
      relative比较像static,但元素可以使用top,right,bottom和left设定初始属性。在正常文档流中偏移位置
      absolute把元素从HTML里面拉出,一切由它自己决定,在这里,绝对定位元素可以使用top,right,bottom,left定位在任何地方。
      fixed行为像absolute,但它绝对定位的元素参照浏览器窗口与网页没有关系。所以,理论上,fixed元素可以固定在屏幕上当页面滚动时。为什么说是理论上的?因为IE7以下的浏览器不支持。


    bulleted list 无序列表
    numbered list 有序列表
    non-numbered 非编号
    quirks mode 宽松模式 | 怪癖模式 ==> 怪异模式
    hack 不译,也不译成补丁、黑客
    meta元标签content(必须的)、名称属性name和http-equiv属性。
    http-equiv属性取替名称name属性会产生HTTP数据头,它将会发送页面拥有的信息给服务器。随后内容属性content可以是content-type(类型)、expires(时效)、refresh(刷新,多长时间页面会自动刷新一次)以及set-cookie(设置cookie)。
    dfn是定义术语
    address应该用于地址。ins元素一般显示下划线,而del元素则一般显示删除线。

    超链接设置方式:<a href="#moss">Go to moss</a>,/绝对或者是相对的地址/
    插入图像:<img (src="http://www.yourdomain.com/logo.gif" )图像的地址width="88" height="31" alt="mysite logo" />

    文字样式


    margin:0 auto:居中
    text-decoration:underline 下划线
    text-decoration:overline 顶划线
    text-decoration:line-through 删除线
    text-decoration:blink 闪烁


    text-transform: capitalize ,让每个字的第一个字母大写。
    text-transform: uppercase ,所有大写。
    text-transform: lowercase,所有小写。
    text-transform: none; ,这个属性不起作用。
    letter-spacing和word-spacing属性的意思是字母和文字之间的间隔。值可以是长度或normal。
    line-height属性设定元素的行高,比如一个段落,没有调准字体的大小。它可以是数字(字体大小的倍数),长度,百分比或normal。
    text-align设定元素位置,left,right,center或justify。
    text-indent属性缩进段落的首行。


    list-style-type:+属性
    disc 实心圆
    circle 空心圆
    square 正方形
    decimal 1,2,3,4,5,……
    upper-alpha A,B,C,D,E,……
    lower-alpha a,b,c,d,e,f……
    uper-roman | ||
    lower-roman i ii
    none 无符号
    list-stype-image:url(图片符号名称)
    clear:both;清除以上样式

    背景的显示background :

    background-color:(transparent)默认   color 颜色  
    background-image :(none)默认   url 图像
    background-repeat:repeat 重复铺满整个背景   no-repeat 无铺排   repeat-x 横向铺排   repeat-y 纵向铺排
    background-attachment:scroll是背景图像随对像内容滚动,fixed”则是背景图像固定。
    background-position:而另一种方式则是使用lefgth(数值)来定位,有两个数就是纵横向的
    来定位背景图像位置:
    * 水平
    left: 左
    center: 中
    right: 右
    * 垂直
    top: 上
    center: 中
    bottom: 下
    * 垂直与水平的组合
    x-% y-%
    x-pos y-pos

    初始值: 0% 0%
    继承性: 否
    适用于: 所有元素
    background:背景.position:位置.


    表单的样式

    optgroup标签用于在一个层叠式选择菜单为选项分类
    form:有行为属性action提交的时候将内容发往何处选择的方法属性method怎样发送数据有get和post(常用)两种和属性
    textarea:多行文本输入框标签textarea基本上就是一个比较大的文本框。它必须有行属性rows和列属性cols
    选定标签select与选项标签option一起可以制作一个下拉选框


    input:
     <input type="text" />是标准的文本框。它可以有一个值属性value,用来设置文本框里的默认文本。
     <input type="password" /> 像文本框一样,但是会以星号代替用户所输入的实际字符。
     <input type="checkbox" />是复选框,用户可以快速的选择或者不选一个条目。它可以有一个预选属性checked,像这样的格式<input type="checkbox" checked="checked" />.
     <input type="radio" /> 与复选框相似,但是用户只可在一个组中选择一个单选按钮。它也有一个预选属性checked,使用方法跟复选框一样。
     <input type="file" /> 是展示你电脑上的文件的一个区域,就像你在一个软件中打开或者保存一个文档一样。
     <input type="submit" /> 是一个被点击后提交表单的按钮。你可以用值属性value来控制按钮上显示的文本(下面的button和reset类型也可以这样,稍后介绍),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
     <input type="image" />以图像代替按钮文本,src属性是必须的,像img标签一样。
     <input type="button" />是一个如果没有其他代码的话什么都不做的按钮。
     <input type="reset" /> 是一个点击后会重置表单内容的按钮。
     <input type="hidden" /> 不会显示任何东西,它用来传输诸如用户正在用的页面的名字或者Email地址等表单


    <table>表格的格式:(cellpadding 填充和cellspacing间距)
    tr 是标准的数据单元格的行
    td 是标准的数据单元格,
    th 是单元格表头
    colspan 列跨越
    rowspan 跨越行
    thead 表头
    tfoot 表注
    tbody 表格主体

    position:absolute(绝对),relative(相对),static(静态),或者fixed(固定)。
    使用方法: position: absolute; top: 0; left: 0; 10em;


    media type 媒体类型
    media媒体类型可以是:
    all—每一个太阳下、上、周围、里面的所有媒体类型。
    aural──语音合成器。
    handheld──手持设备。
    print──打印机。
    projection──投影仪。
    screen──电脑屏幕。
    还可以使用braille(布莱叶点字)、embossed(压印)、tty(终端)和tv(电视)。


    自定义列表:
    ul:ol:dl:li;类别属性 inventory 的无序列表
    dt(definition term,定义术语)元素来代替li元素,其后跟随dd(definition description,定义描述)元素。(可以跟多个)


    Javascript事件(少用)

    应用列子:<a href="#top" onclick="alert ('wow. Javascript.')">Click me</a>

    onblur(使用在表单元素中,当元素失去焦点的时候执行)
    onchange(使用在表单元素中,当某些东西改变是执行)
    onclick(鼠标点击一个元素时执行)
    ondblclick(鼠标双击一个元素时执行)
    onfocus(使用在表单元素中,当元素获得焦点时执行)
    onkeydown (按下某个按键时执行)
    onkeypress(按下和释放某个按键时执行)
    onkeyup(释放某个按键时执行)
    onload(在body标签中使用,载入页面的时候执行)
    onmousedown(按下鼠标按键时执行)
    onmousemove(鼠标光标在元素上移动时执行)
    onmouseout(鼠标光标移开元素时执行)
    onmouseover(鼠标光标移到元素上时执行)
    onmouseup(当释放鼠标按键时执行)
    onreset(用在表单元素中,当表单重置时执行)
    onselect(用在表单元素中,当元素被选择时执行)
    onsubmit(用在表单元素中,当表单提交时执行)
    onunload(用在body标签中,当关闭页面时执行)

    标签

    b 可以用来产生粗体元素。使用strong(意味着强烈强调)代替更有意义,或者用CSS来完成这项工作,增加font-weight: bold的规则,用来表明粗体元素。
    i可以用来产生斜体元素。使用em(表示强调),这也更有意义。或者可以用CSS来表现斜体:font-style: italic
    big可以产生更大字体。使用标题(如h1,h2等,当文本本来就是一个标题时)代替,增加了意义,或简单地在CSS中使用font-size属性,获取更多的控制权。
    small 可以产生小字体。CSS(font-size)再一次取得更多的控制权。
    hr 可用用来展现一条水平线。在CSS中用hr设计很少见,CSS的border-top,border-bottom属性或者朴素的图像做这个效果会更好。
    上述的标签与最新的HTML标准尽管都兼容,但对内容却没有任何好标签应有的意义。
    u可以为元素产生下划线。它提醒着下划线文本还很多连接关联。这就是这个标签死了很久的原因——你不必给非连接文本下划线。
    center可以用来居中在元素内部的元素。CSS属性text-align允许不仅仅是center,还有left、righft和justify。
    menu用来创建菜单列表。它并没有ul做的完美,在因为无序列表更通用,ul高高地站在menu的尸体上。
    layer和div元素相似,都由CSS绝顶位置。这仅仅能在老版本的Netscape中工作,所以再也没有什么用。
    blink或者marquee。大声说不!它们应该像本身意义一样被期待,但有着十分有限的支持,只会产生非常,非常恶心的笑话。
    font,可以用来定义元素的字体名称,尺寸和颜色,在标签世界中理所当然地获得了臭名昭著标签之王荣誉称号。旧的网站(甚至新的也有)像满世界的瘟疫之蚁一样布满整个页面。大部分的font标签激增是从网页制作软件带来的,把font标签包括颜色和尺寸用在每一个元素。font标签被滥用到出现在当前的每一个重复元素的(如,每次你使用p元素),而CSS,则可以用一条简短的代码来应用重复元素,甚至控制整个网站。使用CSS方法,不仅可以使页面比被大量font标签寄生的更苗条,而且更容易维护因为你所需要做得只是改变CSS文件中的一行,而不是逐一修改每一个font标签。这也增加了维护一个一直保持设计风格一致的网站的可能性。font标签和不恰当的表格使用是两个产生网页不必要臃肿的主要原因。

    属性
    css浏览器特效(注意顺序)
    a:link:普通
    a:visited:点击过
    a:hover:经过
    a:ative:当前激活
    链接的多个状态样式:正确的顺序是::link :visited :hover :active。抽取第一个字母是"LVHA",你可以记忆成"LoVe HAte"(喜欢讨厌。 聚焦元素focus)。
    name用来为一个元素指定一个名字,它在如input的表单元素中完全被接受,但在其它地方,name的工作已经被id属性取代。
    text和bgcolor可以在body起始标签中定义页面的基本文本颜色和背景颜色。CSS的color和background-color属性在应用到body选择符时也可以做到。
    background可以在body标签中指定一个背景图画。CSS会做得更好,用如background-image的属性来处理背景图片。
    link、alink、vlink在body标签中用来指定连接(未访问,激活和已访问)。CSS宝贝── :link、:active和:visited会做这项工作。
    align可以用来对齐某个元素的内容(比如 <div align="center">Stuff</div>),但是,像center标签,CSS的text-align属性是新的老板。
    target可以用不同的方式打开一个连接,最常用的是打开新窗口(比如<a href="wherever.html" target="_blank">Help me</a>)。看起来不错,但你不要对你的网站这样做。 用户并不预期不可思议的东西(比如新窗口)出现,而且最常用的浏览工具是浏览器的后退按钮,如果你打开新窗口,这将不可用。它是非法和不易用的。


    CSS 定位属性
     CSS 定位属性允许你对元素进行定位。
       属性 描述
      position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
      top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
      right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
      bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
      left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
      overflow 设置当元素的内容溢出其区域时发生的事情。
      clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
      z-align 设置元素的垂直对齐方式。
      z-index 设置元素的堆叠顺序。(大上小下)

    注意:
    1、单一的元素,或需要程序、JS控制的东西,需要用id定义;重复使用的元素、类别,用class定义。
    2、ID是唯一的并是父级的,CLASS是可以重复的并是子级的。大结构一定是用id。
    3、css样式的border的距离是:上 右 下 左。如果有两个值:第一个值包括顶部和底部,第二个值包括左右。
    技巧:
    1、清除浮动.clearfloat{clear:both;height:0;ofnt-size:1px;line-height:0px;
    2、设置图片浮动效果:#sub img {float:left;}
    3、设置等宽字符(包括等宽空格)即可。综合起来,就是这样 font-family: '宋体', Simsun; white-space: pre;

    常用的符号代码:
    &copy;版权符号?
    &reg;注册商标?
    &#8482;tm
    br强制换行 不想换行的标记上加入样式nowrap
    一条线:<div style="height:26px; border-bottom:2px solid #2788da;"></div>
    解决外补倍丁:在for的属性中加入:margin:0px(form {margin:0px;})
    解决ie6的双边框:display:inline


    END
    ---------------------------------------------------------------------------------------------
    欢迎关注 我的微博@疯狂的迈步 我的github@junhey
  • 相关阅读:
    玩具数据库
    数据库中可能会出现的表
    SqlDbHelper
    重写 覆盖 虚方法
    页面标签的初始化
    如何将UTF8转换为UTF8n
    小软件项目开发的管理(转)
    SCRUM软件开发过程(转)
    在.Net如何制作自定义的快捷方式
    What Is a Leader
  • 原文地址:https://www.cnblogs.com/junhey/p/3625819.html
Copyright © 2011-2022 走看看