两千人站长交流群:462137404 / VIP用户交流群:462197261 收藏本站哈站网 zhan.ha.cn 精品建站资源第一站,让建站变得更加容易!
业务咨询:78895949 联系电话:13402647354
  • 当前位置:
  • 浅谈css之属性及剩余的选择符

    DIV+CSS教程2018年05月30日关键词:

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

    属性选择符

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

    XML/HTML Code复制内容到剪贴板
    1. input[type]{color: #red;}<input type="radio">  

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

    XML/HTML Code复制内容到剪贴板
    1. input[type="radio"]{color: #red;}   
    2. <input type="radio">  

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

    XML/HTML Code复制内容到剪贴板
    1. a[class~="ht"]{font-size: 16px;}   
    2. <a href="www.jb51.net" class="ht sss"></a>  

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

    XML/HTML Code复制内容到剪贴板
    1. a[href^="www"]{font-size: 16px;}<a href="www.jb51.net"></a>  

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

    XML/HTML Code复制内容到剪贴板
    1. input[type$="o"]{color: red;}   
    2.   
    3. <input type="radio">  

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

    XML/HTML Code复制内容到剪贴板
    1. input[type*="ad"]{color: red;}   
    2.   
    3. <input type="radio">  

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

    XML/HTML Code复制内容到剪贴板
    1. input[class|="te"]{color: red;}   
    2.   
    3. <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                 设置对象被选择时的颜色。

    XML/HTML Code复制内容到剪贴板
    1. <p class="t1">测试css的伪对象选择符,天气晴朗,阳光明媚!</p>  
    2. p.t1{width:100px;border:1px solid black;} /* CSS3的语法改成 ::,原本是: */   
    3. p.t1::first-letter {font-size:20px;font-weight:bold;}/*第一个字符*/   
    4. p.t1::first-line {color:blue;}/* 第一行 */   
    5. css: .t2::before{content:’123′;}   
    6. .t2::after{content:’123′;}  

    兼容:

    CSS Code复制内容到剪贴板
    1. html:<input type="search" placeholder="测试">   
    2. css:    
    3.    input::-webkit-input-placeholder {   
    4.     colorgreen;}   
    5.   
    6.    input:-ms-input-placeholder { // IE10+   
    7.     colorgreen;}   
    8.   
    9.    input:-moz-placeholder { // Firefox4-18   
    10.     colorgreen;}   
    11.   
    12.    input::-moz-placeholder { // Firefox19+   
    13.     colorgreen;}  
    CSS Code复制内容到剪贴板
    1. <h3>请使用鼠标选取我</h3>   
    2.  <p>请使用鼠标选取我</p>   
    3.   
    4. p::-moz-selection{ background-color:#E13300colorwhite;}   
    5. p::selection{ background-color#E13300colorwhite; }  

    css的样式

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

    XML/HTML Code复制内容到剪贴板
    1. p { font-family:‘宋体’,’黑体’, ‘Arial’ }  

    font-size       设置文字的尺寸

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

    XML/HTML Code复制内容到剪贴板
    1. p { font-size:14px;}      

    font-weight       控制字体粗细

    CSS Code复制内容到剪贴板
    1. p { font-weight:bold;}  

    font-style       控制字体是否倾斜

    XML/HTML Code复制内容到剪贴板
    1. p { font-style: normal; }    
    2. p { font-style: italic; }   
    3. p { font-style: oblique; }   

    font(字体样式缩写)

    XML/HTML Code复制内容到剪贴板
    1. font : font-style || font-variant || font-weight || font-size || / line-height || font-family   
    2. p { font:italic bold 14px/22px 宋体}  

    color     控制文本的字体颜色

    XML/HTML Code复制内容到剪贴板
    1. p{   
    2.     color:#FF0000;   
    3. }  

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

    XML/HTML Code复制内容到剪贴板
    1. text-decoration : none || underline || blink || overline || line-through    
    2.   
    3. p { text-decoration:overline;}   
    4.   
    5. p { text-decoration:underline;}   
    6.   
    7. p { text-decoration:line-through;}  

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

    XML/HTML Code复制内容到剪贴板
    1. text-shadow: h-shadow v-shadow blur color;   
    2.   
    3. h-shadow         必需。水平阴影的位置。允许负值。   
    4. v-shadow         必需。垂直阴影的位置。允许负值。   
    5. blur                   可选。模糊的距离。   
    6. color                 可选。阴影的颜色。    
    7.   
    8. h1{   
    9.     text-shadow: 2px 2px #ff0000;   
    10. }  

    width   宽度

    XML/HTML Code复制内容到剪贴板
    1. width : auto | length        
    2.   
    3. p { width:300px;}   
    4.   
    5. div { width:50%;}  

    height    高度

    CSS Code复制内容到剪贴板
    1. height : auto | length    
    2.   
    3. img { height:200px;}   
    4.   
    5. div { height:100px;}  

    margin     外边距

    CSS Code复制内容到剪贴板
    1. margin : auto | length    
    2.   
    3. margin-top         设置上边的外边距   
    4. margin-bottom         设置下边的外边距   
    5. margin-left        设置左边的外边距   
    6. margin-right        设置右边的外边距   
    7.   
    8. div { width:300pxheight:100pxmargin:10px;}   
    9.   
    10. div { width:300pxheight:100pxmargin:0 auto;}   
    11.   
    12. 缩写型式:   
    13.   
    14. margin: 上边距  右边距  下边距  左边距   
    15.   
    16. margin: 上下边距    左右边距   
    17.   
    18. margin: 上边距  左右边距  下边距  

    padding      内边距

    CSS Code复制内容到剪贴板
    1. padding : length   
    2.   
    3. div { width:300pxheight:100pxpadding:10px;}   
    4.   
    5.   
    6. padding-top         设置上边的内边距   
    7. padding-bottom     设置下边的内边距   
    8. padding-left        设置左边的内边距   
    9. padding-right        设置右边的内边距   
    10.   
    11.   
    12. 缩写型式:   
    13.   
    14. padding: 上边距  右边距  下边距  左边距   
    15.   
    16. padding : 上下边距    左右边距   
    17.   
    18. 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就是画与画之间的距离。

    以上这篇浅谈css之属性及剩余的选择符就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    其他网友正在看:
    CSS margin全面了解

    一、margin可以为负值在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DOM结构的流体布局。此demo与CSS f···

    2018-05-30关键词:

    css让容器水平垂直居中的7种方式

    这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下。这种方法比较多,本文只总结其中的几种,以便加深印象。效果图都为这个:方法一:position加marginXML/HTML Code复制内容到剪贴板<div class="wrap">···

    2018-05-30关键词:

    10个CSS简写/优化技巧整理

    CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS 简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。 下面介绍常见的CSS简写规则: 一、盒子大小 这里主要用于两个属性:margin和padding,我们以margin为例,paddin···

    2018-05-30关键词:

    css解决display:inline-block;产生的缝隙(间隙)的方法

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是需要设置父元素的宽度才能实现水平左右滚动,这样又增加了代码量,因为卡片的个数不固···

    2018-05-30关键词:

    CSS中的指定值、初始值和计算值学习教程

    CSS 中的声明,由 CSS 的特性和值,中间以 ":" 隔开组成。我们可以使用 CSS 选择器,为选中的元素设置需要的样式。在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 — 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却···

    2018-05-30关键词:

    详解css常用选择器

    导入外部css样式表的方法使用link标签导入外部css样式表<link rel="stylesheet" href="css/demo01.css">在样式表中import(导入)外部样式表@import url("/crazy-html5/06css/css/demo01.css");使用内部样式表内部样式表只能作用···

    2018-05-30关键词: