zoukankan      html  css  js  c++  java
  • DIV+CSS笔记(一)

    CSS层叠样式表

      1.在HTML中放置CSS的几种方式  

        1>内联样式表  

    1 <p style="color:red;font-family:serif">这是内联样式表</p>

        2>嵌入样式表 

    1 <head>
    2     <style type="text/css">
    3            body{
    4                  background-color:red;
    5            }
    6     </style>
    7 </head>    

        3>链接到外部样式表

    1 <link rel="stylesheet" href="style.css" type="text/css" />

    样式表优先级(就近原则):内联 > 内嵌 > 外链

      2.CSS选择器

        1>HTML选择器

    1 h1{color:red}

        2>类选择器

    1 .class1{font-size:small}

        3>ID选择器

    1 #id1{text-indent:3em}

        4>关联选择器

    1 table a{color:red}

        5>组合选择器

    1 h1,h2,h3,h4,h5,h6{color:green}

        6>伪元素选择器

    1 a:link{color:red;}
    2 a:hover{color:yellow;font-size:125%}
    3 a:active{color:blue;font-size:125%}
    4 a:visited{color:green;font-size:85%}

    选择器优先级: 关联选择器 > ID选择器 > 类选择器 > HTML选择器

      3.CSS常见属性

        1>字体属性

          font-family、font-size、font-style、font-weight、font-variant

        组合  font:[<字体风格>||<字体变形>||<字体加粗>]?<字体大小>[/<行高>]?<字体族科>

        2>颜色属性

           color:blue;  color:#000080;  color:#0c0;

        3>背景属性

           background-color、background-image、background-repeat、background-attachment、background-position

        组合  background:<背景颜色>||<背景图像>||<背景重复>||<背景附件>||<背景位置>

        4>文本属性

           letter-spacing、word-spacing、text-decoration、text-align、text-indent、line-height

        5>边框属性

           border-style:none(无边框)dotted(点线)dashed(破折线)solid(实线)double(双框线)groove(槽线)ridge(脊线)inset(内嵌效果)outset(突起效果)

           border-width边框宽度

           border-color边框颜色

        组合  border:5px solid red;

        6>鼠标光标属性

           cursor属性: hand(小手)crosshair(交叉十字)text(文本选择器号)wait(Windows沙漏)help(问号鼠标)

        7>列表属性

           list-style-type、list-style-image、list-style-position

  • 相关阅读:
    .NET实现Excel文件的读写 未测试
    权限管理设计
    struts1中配置应用
    POJ 2139 Six Degrees of Cowvin Bacon(floyd)
    POJ 1751 Highways
    POJ 1698 Alice's Chance
    POJ 1018 Communication System
    POJ 1050 To the Max
    POJ 1002 4873279
    POJ 3084 Panic Room
  • 原文地址:https://www.cnblogs.com/yexiang520/p/5535760.html
Copyright © 2011-2022 走看看