码迷,mamicode.com
首页 > Web开发 > 详细

CSS笔记三....

时间:2016-08-10 20:58:25      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

1.属性选择符:

a).E[att]:选择具有att属性的所有E元素。

<style>
            input[name] {
                  color:red;
           }
</style>
<body>
           <p name="ipt">我是P标签</p>
           <p name="ipt">我是P标签</p>
</body>

b).E[att=‘val‘]:选择具有att属性且属性值为val的所有元素E。

<style>
            input[name=‘ipt‘] {
                  color:red;
           }
</style>
<body>
           <p name="ipt">我是P标签</p>
           <p name="ipt">我是P标签</p>
</body>

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

<style>
           u[class~="uu‘‘] {
              background:pink;
            }
</style>
<body>
           <u class="uu UU">我是U标签<u>
</body>

d).E[att^=‘val‘]:选择具有att属性且属性值以val开头的字符串的E元素。

<style>
           p[class^=‘p‘]{
                font-szie:20px;
           }
</style>
<body>
           <p class=‘p_1‘>我是P标签</p>
           <p  class=‘p_2‘>我是P标签</p>
           <p  class=‘p_3‘>我是P标签</p>
</body>

e).E[att$=‘val‘]:选择具有att属性且属性值以val结尾的字符串的E元素。

<style>
           p[class$=‘p‘]{
                font-szie:20px;
           }
</style>
<body>
           <p class=‘11_p‘>我是P标签</p>
           <p  class=‘2_p‘>我是P标签</p>
           <p  class=‘3_p‘>我是P标签</p>
</body>

f).E[att*=‘val‘]:选择具有att属性且属性值包含val字符串的E元素。

<style>
           p[class*=‘a‘]{
                font-szie:20px;
           }
</style>
<body>
           <p class=‘pap‘>我是P标签</p>
           <p  class=‘pap‘>我是P标签</p>
           <p  class=‘pap‘>我是P标签</p>
</body>

g).E[att|=‘val‘]:选择具有att属性且属性值以val开头且用‘-’连字符分隔的字符串的E元素。

<style>
           p[class|=‘p‘]{
                font-szie:20px;
           }
</style>
<body>
           <p class=‘p-1‘>我是P标签</p>
           <p  class=‘p-2‘>我是P标签</p>
           <p  class=‘p-3‘>我是P标签</p>
</body>

2.伪对象选择符:选几个常用的。

<style>
           p:first-letter{                     //给第一个字符设置样式
                font-szie:20px;
           }
          p:first-line {                        //给第一行设置样式
                color:red;
          }
</style>
<body>
           <p>WEB前端|这是关于用css控制文本段落缩进2个字符的写法,用到了css的本文属性,通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进。缩进文本把Web页面上的段落的第一行缩进,这是...</p>
</body>
<style>
            input:placeholder {
                  color:red;
           }
</style>
<body>
           <input type="text" placeholder>
</body>

3.font-family:设置文字名称,先后顺序。

<style>
            p {
                  font-family:‘微软雅黑‘,‘宋体‘;
           }
</style>
<body>
           <p>我是P标签</p>
</body>

4.font-size:设置文字尺寸。

<style>
            p {
                  font-size:20px;
           }
</style>
<body>
           <p>我是P标签</p>
</body>

5.font-weight:设置文字粗细。

<style>
            p {
                  font-weight:‘微软雅黑‘,‘宋体‘;
           }
</style>
<body>
           <p>我是P标签</p>
</body>

6.font-style:控制字体是否倾斜。

<style>
            p {
                  font-style:‘italic‘;
           }
</style>
<body>
           <p>我是P标签</p>
</body>

7.font:缩写形式。

<style>
            p {
                  font:italic bold 14px/20px ‘微软雅黑‘;
           }
</style>
<body>
           <p>我是P标签</p>
</body>

8.colo:控制文本的字体颜色。

<style>
            p {
                 color:red;
          rgb(0-255,0-255,0-255);
rgba(0-255,0-255,0-255,0.5);
} </style> <body> <p>我是P标签</p> </body>

9.text-decoration:控制文本装饰线条。

<style>
            p {
                 text-decoration:none/overline/line-through/underline
           }
</style>
<body>
           <p>我是P标签</p>
</body>

10.text-shadow:控制文字的阴影部分。

<style>
            p {
                 text-shadow:2px 2px 2px red;
           }
</style>
<body>
           <p>我是P标签</p>
</body>

11.width:宽度。

<style>
            p {
                 width:20px;
           }
</style>
<body>
           <p>我是P标签</p>
</body>

12.height:高度。

<style>
            p {
                 height:20px;
           }
</style>
<body>
           <p>我是P标签</p>
</body>

13.margin:外边距。

<style>
            div {
                margin-left:20px;
                margin-top:20px;
               margin-right:20px;
               margin-bottom:20px;
           }
</style>
<body>
           <div>我是div标签</div>
</body>

14.padding:内边距。

<style>
            div {
                padding-top:20px;
                padding-left:20px;
                padding-bottom:20px;
                padding-left:20px; 
           }
</style>
<body>
           <div>我是div标签</div>
</body>

  

CSS笔记三....

标签:

原文地址:http://www.cnblogs.com/lss-bk/p/5758047.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!