Day5 CSS基本样式和C3选择器

一.背景属性
 1.背景颜色
            background-color:transparent(默认值,透明);

颜色的取值:
            1)关键字  red,blue,yellow...
            2)十六进制  #ffffff :白色   #000000:黑色  #cccccc  #dddddd  #333333   #666666  #999999:灰色
                         #fff             #000           #ccc     #ddd

3)rgb(0,0,0)  三原色  0-255

4)rgba(0,0,0,.5)  a代表透明度 取值0-1  0  完全透明      1  不透明

2.背景图片
            background-image:url(); 默认值none  没有背景图
            默认水平垂直平铺

3.背景图片是否平铺
            background-repeat:repeat| no-repeat|repeat-x|repeat-y;
                              默认值   不平铺    水平平铺   垂直平铺

4.背景图片大小
            background-size: px | % | cover | contain ;

  • cover     : 完全覆盖背景区域,但是有部分背景图片无法完全显示
  • contain   :扩展图片到最大尺寸,但是部分背景区域可能无法完全覆盖

    (设置图片用宽高,设置背景图片用size;)

5.背景定位
            background-position:0 0;
            取值:px  %  left  right  top  bottom center
            当只取一个值时,另外一个值默认为center
            右下为正值

6.背景固定
             background-attachment: scroll|fixed;
                                          (默认 | 固定)

7.简写background
             当一个属性有多个属性值时,空格隔开,不区分先后顺序

    如果不设置其中的某个值,也不会出问题,取默认值,比如 background:url('smiley.gif') no-repeat; 也是允许的。

二.字体属性
除了超链接a,其他的标签字体颜色都可以继承.需给a单独设置.
1.字体颜色 
            color: 规定文本颜色 ;
        颜色的取值:
            1)关键字  red,blue,yellow...
            2)十六进制  #ffffff :白色   #000000:黑色  #cccccc  #dddddd  #333333   #666666  #999999:灰色
                         #fff             #000           #ccc     #ddd
            3)rgb(0,0,0)  三原色  0-255
            4)rgba(0,0,0,.5)  a代表透明度 取值0-1  0  完全透明      1  不透明

2.字体样式
            font-style: 指定文本字体样式;(正常normal默认值 / 斜体italic )

  3.字体大小

    font-size:指定文本字体大小 (  一般浏览器默认为16px ,1px=1像素 )

       font-size:20px;

3.字体是否加粗
            font-weight :normal(默认值) | bold(加粗);
            100-900
            400=normal
            700=bold

5.字体
            font-family:定义文本只用某个字体;
            逗号隔开多种字体
            一种字体多个单词组成,必须加引号

三.文本属性
1.文本装饰,下划线
        text-decoration: none;  默认值,无
        取值:

  • underline  下换线
  • overline  上划线
  • line-through   删除线

2.内容水平对齐方式
        text-align: left | right | center;(内容水平居中)

3.英文大小写转换
            text-transform:none;
            text-transform: uppercase;   转换为大写
            text-transform: lowercase;   转换为小写
            text-transform: capitalize;  首字母大写

        (text-transform:只对英文生效,)

4.文本首行缩进
            text-indent:指用来固定指定文本的第一行的缩进;
            取值:px  em
            px  绝对单位
            em   相对单位
            相对于父元素的字体大小  父元素 1em=16px(浏览器默认)  2em=32px  父元素10px   2em=20px
            父元素 20px  0.5em=10px                     (首行缩进两个字符)
    一个字默认16px;两个字32px;

5.
    1).行高
        一行文字垂直居中
        行高=高
        line-height: normal(默认设置合理行间距) | number | length(设置固定行间距)  ;

    不允许使用负值,可以取数字  行高=数字*字体大小

2).去项目符号
        list-style-type: none;

三.关系选择器
    1)子代选择器   选择器1>选择器2{}
        选中直接子代  (用 大于号 表示)

    eg:
      .box>span{
color: red;      
        }

2)后代选择器   选择器1 选择器2{}
        选中所有后代  (中间用 空格 隔开)

     eg:
    .box span{
  color: red;
    }

3)相邻兄弟选择器   选择器1+选择器2{}
        平级  挨着的后面那一个(用 加号 表示)

   eg:
  .two+p{
font-size: 20px;
color: gold;
}

4)通用兄弟选择器   选择器1~选择器2{}
        平级  后面所有的兄弟(作用于多个元素,用~表示)

  eg:.two~p{
font-size: 20px;
color: gold;
}

1.overflow:溢出部分

  • hidden  隐藏
  • auto      自动
  • scroll  滚动条
overflow: hidden;                 overflow: auto;              overflow: scroll;
       

Day5 CSS基本样式和C3选择器-LMLPHP             Day5 CSS基本样式和C3选择器-LMLPHP          Day5 CSS基本样式和C3选择器-LMLPHP

 (将多余文本隐藏,图片同理)         (内容溢出显示滚动条,如果不溢出不显示滚动条)      (显示滚动条)

2.文字溢出省略号显示  (三者缺一不可)
        1)文字在同一行显示    white-space: nowrap;

2)溢出部分隐藏     overflow: hidden;

3)文字溢出省略号显示    text-overflow: ellipsis|clip(裁剪);

      white-space: nowrap;
/*溢出部分隐藏*/
overflow: hidden;
/*文字溢出省略号显示*/
text-overflow: ellipsis;      

        Day5 CSS基本样式和C3选择器-LMLPHP

3.设置字符之间的距离 : letter-spacing: 1px;

 letter-spacing: 1px    

Day5 CSS基本样式和C3选择器-LMLPHP

    (字符之间间距1px)
05-11 03:27
查看更多