zoukankan      html  css  js  c++  java
  • CSS之第三天总结

    一、属性选择器:

    HTML:

    <p class="a">测试数据1</p>
    <p class="qq">测试数据2</p>
    <p class="xyz abc">测试数据3</p>
    <p class="aa123">测试数据4</p>
    <p class="test-abc">测试数据5</p>
    <p class="hello-z-world">测试数据6</p>
    <p class="y-1">测试数据7</p>
    <p class="y-2">测试数据7</p>

    CSS(解析):

    p[class]{color:green;}
    /*选择具有属性class的p元素;*/
    p[class="qq"]{color:red;} 
    /*选择具有class属性且属性值等于qq的p元素;*/    
    p[class~="abc"]{color:blue;}
    /*选择具有class属性且属性值为一空格分割的字词列表,其中一个等于abc的p元素;*/
    p[class^="aa"]{color:yellow;}
    /*选择具有class属性且属性值为以aa开头的字符串的p元素;*/       
    p[class$="abc"]{color:black;}
    /*选择具有class属性且属性值为以abc结尾的字符串的p元素;*/
    p[class*="z"]{color:orange;}
    /*选择具有class是属性且属性值包含z的字符串的p元素;*/
    p[class|="y"]{color:#ccc;}
    /*选择具有class属性且属性值为以y开头并用连接符”-”分割的字符串的p元素。*/

    二、字体样式:

    1.font-family(字体名称):

    例:P{font-family:’宋体’,’微软雅黑’,’Arial’}

    2. font-size(字体大小)

    例:p { font-size:14px;}   

    3. font-weight(字体加粗)

    例:p { font-weight:bold;}

    4. font-style(字体斜体)

    例:p { font-style: normal; }

    p { font-style: italic; }
    p { font-style: oblique; }

    5. font(字体样式缩写)

    例:

    p{

    font-style:italic;

    font-weight:bold;

    font-size:14px;

    line-height:22px;

    font-family:宋体;

    }

    缩写后:p { font:italic bold 14px/22px 宋体}

    在行高处用/分开

    6. color(字体颜色)

    说明:

    颜色属性值分三种值的格式

    1. 英文单词,比如 red , yellow ,green …
    2. 十六进制表示方式,#开头,6个十六进制的字符或数字 组合。比如:#FFFFFF,#000000,#CCCAAA,#22BCAD。十六进制: 0-9 和 a-f
    3. RGB模式,红 0-255,绿 0-255,蓝 0-255。比如: RGB(120,33,234)

    RGBA(255,0,0,.5)   RGBA模式,最后的A表示透明度50%

    例:

    p{

           color:#FF0000;

    }

    7. text-decoration(文本装饰线条)

    例:p { text-decoration:underline;}

    8. text-shadow(文字阴影)

    例:h1{

           text-shadow: 2px 2px #ff0000;

    }

    三、元素样式    

    1.宽度width

    例:p { 300px;}

    div { 50%;}

    即既可以用像素也可以用百分比。

    2.高度height

    例:div { height:200px;}

    3.外边距margin :

    margin-top               设置上边的外边距

    margin-bottom        设置下边的外边距

    margin-left         设置左边的外边距

    margin-right              设置右边的外边距

    缩写型式:

    margin: 上边距  右边距  下边距  左边距

    margin: 上下边距    左右边距

    margin: 上边距  左右边距  下边距

    例: div { 300px; height:100px; margin:10px;}

    4.内边距padding :

    padding-top               设置上边的内边距

    padding-bottom        设置下边的内边距

    padding-left               设置左边的内边距

    padding-right             设置右边的内边距

    缩写型式:

    padding: 上边距  右边距  下边距  左边距

    padding : 上下边距  左右边距

    padding : 上边距  左右边距  下边距

    例:div { 300px; height:100px; padding:10px;}

  • 相关阅读:
    树链剖分 (模板) 洛谷3384
    ST表 (模板) 洛谷3865
    IOI 2005 River (洛谷 3354)
    IOI 2005 River (洛谷 3354)
    poj1094 Sorting It All Out
    poj1094 Sorting It All Out
    spfa(模板)
    HAOI 2006 受欢迎的牛 (洛谷2341)
    HAOI 2006 受欢迎的牛 (洛谷2341)
    洛谷1850(NOIp2016) 换教室——期望dp
  • 原文地址:https://www.cnblogs.com/han201388/p/5760543.html
Copyright © 2011-2022 走看看