CSS基础篇之选择符2

属性选择符：

选择符	版本	描述
E[att]	CSS2	选择具有att属性的E元素。
E[att="val"]	CSS2	选择具有att属性且属性值等于val的E元素。
E[att~="val"]	CSS2	选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
E[att^="val"]	CSS3	选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"]	CSS3	选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"]	CSS3	选择具有att属性且属性值为包含val的字符串的E元素。
E[att\|="val"]	CSS2	选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

各个例子：

E[att]

<style>
img[alt] {
    margin: 10px;
}
</style>

<img src="图片url" alt="" />
<img src="图片url" />

这里我用了所有img标签里有alt属性就会字体整个10个像素大小，这里只有第一个img元素里面有alt属性有alt属性的元素字体会变成10个像素大小。

E[att="val"]

<style>
input[type="text"] {
    border: 2px solid #000;
}
</style>

<input type="text" />
<input type="submit" />

这里代表所有input里面的有type=“text”属性的边框为2个像素黑色实线。

E[att~="val"]

<style>
div[class~="a"] {
    border: 2px solid #000;
}
</style>

<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>

div标签里用空格间隔的class=“a”（其中一个属性值有a）都会选择到。

E[att^="val"]

<style>
div[class^="a"] {
    border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

div标签里面class属性值开头第一个字符串为a的都会选择到。

E[att$="val"]

<style>
div[class$="c"] {
    border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

div标签里面class属性值最后一个字符串为（a）的都会选择到。

E[att|="val"]

<style>
div[class*="b"] {
    border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

div标签里面class属性值里面有相同的字符串（b）就会选择到。

E[att*="val"]

<style>
div[class|="a"] {
    border: 2px solid #000;
}
</style>

<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>

div标签里面class属性值里面有这个符号 - 的，例子里是a-的属性值会改变。

伪对象选择符：

E:first-letter/E::first-letter	CSS1/3	设置对象内的第一个字符的样式。
E:first-line/E::first-line	CSS1/3	设置对象内的第一行的样式。
E:before/E::before	CSS2/3	设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after	CSS2/3	设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::placeholder	CSS3	设置对象文字占位符的样式。
E::selection	CSS3	设置对象被选择时的颜色。

E:first-letter/E::first-letter

此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

<style>
h1{font-size:16px;}
p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}
p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
</style>
</head>
<body>
<h1>杂志常用的首字下沉效果</h1>
<p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
</body>

E:first-line/E::first-line

效果：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。

<style>
h1{font-size:16px;}
p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}
p:first-line {color:#090;}
p::first-line {color:#090;}
</style>
</head>
<body>
<h1>第一行文字的颜色与其它不同</h1>
<p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
</body>

E::placeholder

用于文本框的提示字体。

<style>
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;
}
</style>
</head>
<body>

  <input id="test" placeholder="请输入密码!">

</body>

E::selection

设置对象被选择时的样式

需要注意的是，::selection只能定义被选择时的background-color，color及text-shaow

<style>
p::-moz-selection{background:#000;color:#f00;}
p::selection{background:#000;color:#f00;}
</style>
</head>
<body>
<h1>选中下面的文字，看看它的颜色</h1>
<p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>

字体样式

font-family（字体的样式）

p { font-family:‘宋体'，'黑体', '微软雅黑’ }

输入多个字体时用，号间隔。输入的字体样式名称加 ‘ ’ 号。多字体样式用于查看浏览器字体种类如果你没有其中一个还能用其他几个。

font-size（字体大小）

p { font-size:1px;}

改变你所要的标签元素的字体大小。

font-weight（字体的加粗）

p { font-weight:bold;}

虽然可以用数值调，但不建议用因为区别不大。最好用bold。

font-style（字体倾斜）

p { font-style: normal; }

指定文本字体样式为正常的字体

p { font-style: italic; }

指定文本字体样式为斜体。对于没有设计斜体的特殊字体。（先天）

p { font-style: oblique; }

指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字。（后天）

font（字体样式缩写）

这是没有缩写

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

缩写后

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

其实属性写发顺序是是否倾斜-字体的加粗-字体大小-字体高度-字体样式这个顺序。注意大小和高度中间要用 / 号分开。

color（字体颜色）

颜色有三种值

1.颜色英文单词 blue、yellow。在这个取色比较少

p{
    color:#blue;
}

2.十六进制表示法用 # 开头的PS里面颜色也有这个

p{
    color:#FF0000;
}

3.RGB PS里面也有的

p{color:rgb(0,0,0);}

数值0~255

4.rpga 后面的A表示透明度50%

p{
    color:（0，0，0，.5）;
}

前面三个数值从0~255最后一个是透明多少。

text-decorcation（文本装饰线条）

p { text-decoration:overline;}

overline：指定文字的装饰是上划线

p { text-decoration:underline;}

underline：指定文字的装饰是下划线

p { text-decoration:line-through;}

line-through：指定文字的装饰是删除线



text-shaow
属性和值
h-shaow   必写。水平阴影的位置。可以负值。
v-shaow   必写。垂直阴影的位置。可以负值。
blur      可选。阴影模糊的距离。
color　　　可选。阴影的颜色。

完整

h1{
            h-shadow:-3px;
            v-shadow:-4px; 
            blur:5px;     
            color:blue;   
}



缩写

h1{
    text-shadow: 2px 2px #ff0000;
}


缩写写法顺序h-shadow、v-shadow、blur、color

posted @ 2016-08-11 00:21 迷。阅读(318) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

迷。

CSS基础篇之选择符2

公告