CSS2
补充:
两个或多个CLASS选择器可作用于一个标签上面吧。
<div class="hello test">牧羊曲</div>
<style>
.hello{color:#ff00ff;font-size:30px}
.test{background-color:yellow}
</style>
如果有相同属性,会怎么样?-- 如果具有相同属性的时候,CSS时同一级关系。是以出现的顺序,离标签越近优先级越高。
今天的学习目标:
1,把六种选择器弄熟
2,开始学习常用属性
ID选择器:
在CSS当中命名的时候,以#后面接名字。不要以数开始,只用英文,不用特殊符号,可以用下划线。
在HTML的标签当中使用的时候,是在属性里面写上id=”名字”[不要加#]
考考你:class 和id具有相同属性的时候,谁更厉害?
那ID更厉害。
同名ID在整个页面当中只能有一个,也只能使用一次。但是你说我非得用多个,可以。HTML容错性强。你以后到JS里面就“杯具”了!!!!
组合选择器:
把一组选择器,赋上同样的效果。
.two,ul,.one,#hello{background-color:red;font-size:15px;200px;height:200px;margin-top:50px;margin-left:200px;margin-right:20px;border:1px solid #ccc;padding:50px;text-indent:2em;font-family:'aricl'}
关联选择器:
1, 目无尊长。
Relation 关联 亲戚
是对着关系结构往下推,一级一级往下找,或者是越级往下找。但是一定有层级关系。
可以用 html选择器,#ID选择器 .class选择器,找准层级关系后,用空格。
伪元素选择器:
最常用的是
:link 默认的链接的效果
:hover 鼠标放上去的效果
:active 鼠标点中的效果
:visited 访问过后的效果
a{color:green} 就是四个超链接颜色同时发生变化。
:first-letter 首字母
:first-line 第一行
英文单词:
Normal 正常
Italic 斜体
Weight 重量
Decoration
Under 下
Line 线
Underline 下划线
Through 穿过
Repeat 重复
Background-color:
Backgounr-image: url(路径);
Background-repeat: repeat-x repeat-y no-repeat repeat
background-attachment [了解]
常用:
Color
Font-family
Font-size
font-style 值:normal italic
font-weight 值:normal bold
text-decoration 值:none underline line-through overline(了解)
text-transform 【了解】 uppercase 大写 | lowercase 小写
line-height 行高 行高=高度就实现了垂直居中
letter-spacing 【了解】
text-indent 2em
text-align left center right
结论:
Css让无意义标签加上效果变得有意义,让有意义标签也可以变得无意义。改变原有效果显示。
在做背景图片的时候,如果宽超出会水平重复。
如果高超出,会垂直重复这张前景图片。
常用单位:
Px
Em 相当于于一个字的大小