1CSS3选择器
1.1基本选择器
1.1.1通配符选择器
1.1.2标签选择器
1.1.3类选择器
1.1.4 id选择器
1.1.5群组选择器
1.2层次选择器
1.2.1后代选择器
1.2.2子代选择器“>”
1.2.3相邻兄弟选择器“+”
只会获取该选择器后面紧邻的一个选择器。
.yeye .baba+p{ }
<div class=”yeye”>
<div class=”baba”>
<p></p>
<p></p>
</div>
</div>
1.2.4兄弟选择器“~”
通过~获取到该选择器后面满足条件的所有选择器,如上述代码中,两个p元素都会被获取到。
1.3动态伪类选择器
1.3.1 :hover
1.3.2 :link
1.3.3 :visited
1.3.4 :active
1.3.5 :focus
为input元素在浏览器中的输入框获取到焦点时添加的样式。
Input:focus{outline:none; } 该声明为取消高亮,如input输入栏获取到焦点时,会变成蓝色,该声明可以取消。
1.4目标伪类选择器
<a href=”#shou”></a>
<p id=”shou”></p>
P:target{color:red;}
在浏览器中点击a后,跳转指向p,p作为target字体颜色变为红色。
E:target 给此时作为目标的E元素添加样式,即跳转到谁,E就是谁,E就是target。
1.5语言伪类选择器
给元素加上lang=”no”声明,相当于给元素中间的内容加上双引号。
1.6UI元素状态伪类选择器
UI元素就是input元素。
<input type=”text” disabled(表示被禁用) />
<input type=”text” />
1.6.1 :enabled
给所有可用的表单元素添加上样式。
1.6.2 :disabled
给禁用的表单元素添加上样式。
1.6.3 :checked
给被选中的表单元素添加样式。
<label><input type=”radio” name=”gender”><span>男<span></label>
<label><input type=”radio” name=”gender”><span>女<span></label>
Style input:checked+span{background-color:yello;}
当input中的一个选项被选中后,他的相邻兄弟元素span中男或者女的背景就会变成黄色。
1.7否定伪类元素
<div class=”dv1”>
<p></p>
<p></p>
<a></a>
</div>
Style .dv1 :not(p){ } dv1后代中除了p都可以添加样式,其中必须用父元素,如.dv1,且后面要有空格。
1.8属性选择器
1.8.1 E[attr(html属性)]{ }
div[class]{ } 给拥有该attr属性的所有E元素添加样式。
1.8.2 E[attr=”value(属性值)”]{ }
div[class=”abc”]{ } 给拥有该attr,且属性值为”value”的E元素添加样式。 HTML属性,如class,id,href等等。
1.8.3 E[attr*=”value(属性值)”]{ }
div[class*=”bc”]{ } 若是E元素的attr属性值包含”value”,则添加该样式,即class=abc/bcd/bc等的div都可以被选中。
1.8.4 E[attr^=”value(属性值)”]{ }
div[class^=”cde”]{ } 若是E元素的attr属性值以”value”值开头,则添加该属性,如class=”cdef”的div可以被选中,但class=”acde”的div无法被选中。
1.8.5 E[attr$=”value(属性值)”]{ }
div[class$=”cde”]{ } 若是E元素的attr属性值以value值结尾,则添加该元素。
1.9伪元素选择器
1.9.1 ::before
1.9.2 ::after
1.9.3 ::first-letter
1.9.4 ::first-line
1.9.5 ::selection
给浏览器用鼠标左键选中的文本添加样式。Firefox中需要添加前缀“-moz-”,即 ::-moz-selection
1.10结构伪类选择器
1.10.1 E:first-child{ }
当满足为父元素的第一个儿子元素,且满足为E元素,则可以添加样式。
<ul>
<li></li>
<li></li>
</ul>
Style li:first-child{ } 指选取ul中的第一个儿子元素,且这个元素必须为li,若为其他元素,则无法被选取。
1.10.2 E:last-child{ }
当满足为父元素的最后一个儿子元素,且满足为E元素,则可以添加样式。
1.10.3 E:nth-child(n){ }
其中n从1开始...... 为父元素第n个儿子,且满足为E元素,则添加该样式。
<ul>
<p></p>
<li></li>
<li></li>
</ul>
Style li:nth-child(3){ } 其中红色字体的li,为ul的第3个儿子元素,且该元素为li。
1.10.4 E:nth-last-child(n){ }
父元素倒数第n个孩子,且为E元素。
1.10.5 E:nth-child(2n/even){ }
父元素的第偶数个孩子,且为E元素。
1.10.6 E:nth-child(2n-1/odd){ }
父元素的第奇数个孩子,且为E元素。
1.10.7 E:first-of-type
父元素的第一个是E的子元素。
1.10.8 E:last-of-type
父元素的最后一个是E的子元素。
1.10.9 E:nth-of-type(n)
父元素中的所有E元素,其中第n个。
1.10.10 E:empty
获取为无文本(空格也不存在)的E元素。
1.10.11 E:only-child
满足为父元素唯一一个孩子,且要满足为E元素。
1.10.12 E:only-of-type
满足为父元素孩子中,唯一一个该类型的孩子。
2 css3新增属性
2.1 text-shadow文本阴影
text-shadow:0px 0px 0px red;
第一个值代表水平偏移,右为正值,左为负值;
第二个值代表垂直偏移,下为正值,上为负值;
第三个值代表模糊区域。
可设置多个阴影:
text-shadow:3px 3px 10px red,-3px -3px 10px blue ...... ;
2.2 text-overflow 文本溢出
text-overflow:ellipsis/clip; 以省略号形式出现 / 默认形式,不以省略号出现
文本显示在一行,超出文本以省略号形式出现。
Tep1 设置容器宽度
Tep2 设置文本不换行 white-space:nowrap;
Tep3 overflow:hidden;
Tep4 超过文本部分以省略号形式出现 text-overflow:ellipsis;
2.3 单词换行
word-wrap:break-word;
2.4 自定义字体
Tep1 自定义字体,字体名字,字体的路径。
@font-face{
font-family:”1705”;
src:url(“”)
}
Tep2 使用自定义字体时
font-family:”1705”;
2.5字体图标
在Iconfont上下载,将一些图标变为文字,是矢量图。
方法一:下载好字体图标文件的代码后,会出现一个文件夹。文件中有个demo.html,可以看到字体图标对应的文字,copy到需要的地方,从iconfont.css拿到自定义代码,修改路径直接使用。或者按照其中的说明来进行更改。
方法二:全部复制,修改到需要的地方。
2.6 background-size
背景图片大小尺寸。
1 数值 background-size:600px 600px; 第一个数值代表水平方向尺寸;第二个数值代表垂直方向尺寸;若第二个值省略,代表的是按照第一个值等比缩放。
2 background-size:cover; cover说明背景图片会完全覆盖容器,可能会有部分背景图片无法正常显示:当背景图片尺寸大于容器时,会进行等比缩小,到背景图片完全覆盖容器,部分无法显示;当背景图片尺寸小于容器时,会等比放大。
Background-size:cover; 常与background-position:center配合使用。
3 background-size:contain; contain,包含,容器包含整张图片,容器可能会有留白。
4 background-size:80%(percentage);
2.7 background-origin
背景图默认从padding部分开始摆放,说明background-position以padding左上角为origin点,(0,0)。
Background-origin:border-box/content-box/padding-box; 从边框开始摆放。默认值为padding-box.
2.8 background-clip
Background-clip:content-box/padding-box; 背景剪裁,规定最终显示区域。
2.9 多张背景图使用方法
Background:url(“”) no-repeat 0px 0px,
url(“”) no-repeat 0px 200px,
url(“”) no-repeat 200px 0px,
url(“”) no-repeat 200px 200px;
心得
写代码时,总属性如background在上,单一属性如background-size在下,因为总属性中包含了单一属性,如果总属性在下会覆盖单一属性属性值。