AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > css教程

浅谈css之属性及剩余的选择符
51自学网 http://www.wanshiok.com
css,选择符

今天的课程加速了，比平时快了些，但觉得很不错。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.     color: green;}   
  5.   
  6.    input:-ms-input-placeholder { // IE10+   
  7.     color: green;}   
  8.   
  9.    input:-moz-placeholder { // Firefox4-18   
  10.     color: green;}   
  11.   
  12.    input::-moz-placeholder { // Firefox19+   
  13.     color: green;}  
CSS Code复制内容到剪贴板
  1. <h3>请使用鼠标选取我</h3>   
  2.  <p>请使用鼠标选取我</p>   
  3.   
  4. p::-moz-selection{ background-color:#E13300; color: white;}   
  5. p::selection{ background-color: #E13300; color: white; }  

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:300px; height:100px; margin:10px;}   
  9.   
  10. div { width:300px; height:100px; margin:0 auto;}   
  11.   
  12. 缩写型式：   
  13.   
  14. margin: 上边距  右边距  下边距  左边距   
  15.   
  16. margin: 上下边距    左右边距   
  17.   
  18. margin: 上边距  左右边距  下边距  

padding      内边距

CSS Code复制内容到剪贴板
  1. padding : length   
  2.   
  3. div { width:300px; height:100px; padding: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之属性及剩余的选择符就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持wanshiok.com。


css,选择符 　

上一篇：浅谈CSS 权值 层叠 重要性(!important)  下一篇：深入理解CSS行高line-height与文本垂直居中的原理
　
CAD教程 教师招聘 招聘信息 　 　 　
51自学网 我要自学网视频教程,视频下载 自学网 自学编程网 CAD自学网 PS自学网 www.wanshiok.com网站地图