zoukankan      html  css  js  c++  java
  • css之属性及剩余的选择符

    今天的课程加速了,比平时快了些,但觉得很不错。nice~

    属性选择符

    E[att]       选择具有att属性的E元素。

    input[type]{color: #red;}
    <input type="radio">

    E[att="val"]      选择具有att属性且属性值等于val的E元素。

    input[type="radio"]{color: #red;}

    <input type="radio">

    E[att~="val"]     选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。

    a[class~="ht"]{font-size: 16px;}
    <a href="www.baidu.com" class="ht sss"></a>

    E[att^="val"]    选择具有att属性且属性值为以val开头的字符串的E元素。

    a[href^="www"]{font-size: 16px;}

    <a href="www.baidu.com"></a>

    E[att$="val"]     选择具有att属性且属性值为以val结尾的字符串的E元素。

    input[type$="o"]{color: red;}
    
    <input type="radio">

    E[att*="val"]      选择具有att属性且属性值为包含val的字符串的E元素。

    input[type*="ad"]{color: red;}
    
    <input type="radio">

    E[att|="val"]      选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

    input[class|="te"]{color: red;}
    
    <input type="radio" class="te-ss">

    E:first-letter/E::first-letter       设置对象内的第一个字符的样式。

    就是匹配的到的元素的第一个字。

    E:first-line/E::first-line       设置对象内的第一行的样式。

    E:before/E::before          设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

    E:after/E::after              设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

    E::placeholder               设置对象文字占位符的样式。

    E::selection                 设置对象被选择时的颜色。

    <p class="t1">测试css的伪对象选择符,天气晴朗,阳光明媚!</p>

    p.t1{100px;border:1px solid black;} /* CSS3的语法改成 ::,原本是: */

    p.t1::first-letter {font-size:20px;font-weight:bold;}/*第一个字符*/

    p.t1::first-line {color:blue;}/* 第一行 */

    
    

    css: .t2::before{content:'123';}

    .t2::after{content:'123';}

    兼容:

    html:<input type="search" placeholder="测试">
    css: 
       input::-webkit-input-placeholder {
        color: green;}
    
       input:-ms-input-placeholder { // IE10+
        color: green;}
    
       input:-moz-placeholder { // Firefox4-18
        color: green;}
    
       input::-moz-placeholder { // Firefox19+
        color: green;}
     <h3>请使用鼠标选取我</h3>
     <p>请使用鼠标选取我</p>
    
    p::-moz-selection{ background-color:#E13300; color: white;}
    p::selection{ background-color: #E13300; color: white; }

    css的样式

    font-family    设置文字名称,可以使用多个名称,或者使用逗号 分隔,浏览器则按照先后顺序依次使用可用字体。

    p { font-family:‘宋体','黑体', 'Arial’ }

    font-size       设置文字的尺寸

    注:如果用百分比作为单位,则是基于父元素字体的大小

    p { font-size:14px;}    

    font-weight       控制字体粗细

    p { font-weight:bold;}

    font-style       控制字体是否倾斜

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

    font(字体样式缩写)

    font : font-style || font-variant || font-weight || font-size || / line-height || font-family
    
    
    p { font:italic bold 14px/22px 宋体}

    color     控制文本的字体颜色

    p{
        color:#FF0000;
    }

    text-decoration(文本装饰线条)      控制文本装饰线条

    text-decoration : none || underline || blink || overline || line-through 
    
    p { text-decoration:overline;}
    
    p { text-decoration:underline;}
    
    p { text-decoration:line-through;}

    text-shadow(文字阴影)     控制文字的阴影部分。

    text-shadow: h-shadow v-shadow blur color;
    
    h-shadow         必需。水平阴影的位置。允许负值。
    v-shadow         必需。垂直阴影的位置。允许负值。
    blur                   可选。模糊的距离。
    color                 可选。阴影的颜色。 
    
    h1{
        text-shadow: 2px 2px #ff0000;
    }

    width   宽度

    width : auto | length     
    
    p { 300px;}
    
    div { 50%;}

    height    高度

    height : auto | length 
    
    img { height:200px;}
    
    div { height:100px;}

    margin     外边距

    margin : auto | length 
    
    margin-top         设置上边的外边距
    margin-bottom         设置下边的外边距
    margin-left        设置左边的外边距
    margin-right        设置右边的外边距
    
    div { 300px; height:100px; margin:10px;}
    
    div { 300px; height:100px; margin:0 auto;}
    
    缩写型式:
    
    margin: 上边距  右边距  下边距  左边距
    
    margin: 上下边距    左右边距
    
    margin: 上边距  左右边距  下边距    

    padding      内边距

    padding : length
    
    div { 300px; height:100px; padding:10px;}
    
    
    padding-top         设置上边的内边距
    padding-bottom     设置下边的内边距
    padding-left        设置左边的内边距
    padding-right        设置右边的内边距
    
    
    缩写型式:
    
    padding: 上边距  右边距  下边距  左边距
    
    padding : 上下边距    左右边距
    
    padding : 上边距  左右边距  下边距    

    补充知识:

    padding内边距

    当一个盒子设置了背景图像后,默认情况下背景图像覆盖的范围是padding和内容组成的范

    围,并以padding的左上角为基准点平铺背景图像。

    border边框

    border边框里在IE并不显示背景图像的内容,在Firefox则显示背景图像的内容。

    因为边框是介于内边距和外边距之间的,当边框设置为虚线时,在IE中,虚线空白的地方露

    出来的是padding部分的背景,而在Firefox中,虚线空白的地方露出来的是margin部分的背景。

    margin外边距

    body是个特殊的盒子,它的背景色会延伸到margin的部分,而其他盒子的背景色只会覆盖“padding+内容
    部分”(IE浏览器中)或者“border+padding+内容”部分(Firefox浏览器中)

    margin用于控制块与块之间的距离。

    倘若将盒子模型比作展览馆里展出的一幅幅画,那么content就是画面本身,padding就是画面与画框之间的留白,

    border就是画框,而margin就是画与画之间的距离。

  • 相关阅读:
    ClickOnce發布經驗
    reporting Server組件不全引起的致命錯誤
    異步調用
    Usercontrol Hosted in IE
    MATLAB命令大全(转载)
    一种保护眼睛的好方法
    关于oracle自动编号
    An Algorithm Summary of Programming Collective Intelligence (1)
    An Algorithm Summary of Programming Collective Intelligence (3)
    An Algorithm Summary of Programming Collective Intelligence (4)
  • 原文地址:https://www.cnblogs.com/zhangzhicheng/p/5759285.html
Copyright © 2011-2022 走看看