CSS第二天

1.分组选择器

    标记选择器 类选择器 ID选择器 搭配使用

    例子：span,p,h1{color:#eee}

2.派生选择器

    通过父级找子级

    例子:

    div span{color:#eee}    

    <div><span></span></div>

3.属性选择器

    例子：

[name]{color:#eee}

[name="username"]{color:#eee}

input[name="username"]{color:#eee}

<input type="text" name="username" value="">

<input type="password" name="psd" value="">

<textarea name="username"></textarea>

---

CSS文本样式

1.字体样式

    颜色 color

    字号 font-size

    字体 font-family

    字体风格 font-style

        风格的属性值：normal(保持原样)

                                 italic(文字倾斜)

                                 oblique(文本倾斜)

   粗细 font-weight 

        

2.文本样式

   首行缩进 text-indent : 2em (em代表一个字号的大小，1em = 16px)

   对齐方式 text-align : left/center/right;

   行高 line-height

   字间距 word-spacing(对中文无效，空格除外，在英文状态下，是代表每个单词的间距)

    字母间距 letter-spacing(在中文状态下表示每个字的距离)

字母大小写转换 text-transform:uppercase(大写)

                                                  lowercase(小写)

                                                 capitalize(首字母大写)

文本修饰 text-decoration:underline(下划线)

                                         overline(上划线)     

   

   

---

CSS背景

1.背景色 background-color

rgb(0,0,0)——不带透明度

rgba(0,0,0,.6)——带有透明度(背景图片透明，字不透明)

opacity : 0.4 ————背景色和字都透明

2.背景图片

background-image:url(图片路径)

background-repeat:no-repeat;————不重复

                                repeat-x-------水平方向重复

                                repeat-y-------垂直方向重复

background-position:100px 100px;

多种写法：

固定数字：

    100px 20px——水平方向向右移动100个像素，垂直方向向下移动20个像素点

百分比：

    50%  -30%

    水平方向：(容器的宽度-图片的宽度) *                                     50%

垂直方向：(容器的高度-图片的高度) * -30%

关键字  

    left  top;  bottom center  right

若设置一个值时

    background-position:100px;第一个值为水平方向（向右移动100px）,垂水平直方向默认center