css 层叠式样式表的部分属性

css 层叠式样式表

css 层叠式样式表，是用来给html结构添加样式的

1.css的引入方式

1. 行间样式：在标签上设置style属性，在style中设置样式
2. 内部样式表：在head中设置style标签，在标签中设置样式
3. 外部样式表：使用link 链接外部的css，开发的时候常用
   width 宽
   height 高
   color

2.css的属性

border 属性：对边框进行设置

border-width：设置border的宽度
border-color：设置border的颜色
border-style：设置border的样式

      他们可以合写：
        border：width style color;

也可以给单独某一个边设置border

border-top 设置 上边
border-left 设置 左边
border-bottom 设置 下边
border-right 设置 右边

    常用的border-style 值
        1.solid 实线
        2.dotted 圆点虚线
        3.dashed 短线虚线
        4.none 隐藏border
        5.double 双实线(不常用)
        6.3d 边框(不常用)
             groove 3d凹槽
             ridge 3d凸槽
             inset 内嵌
             outset 外嵌

color属性：设置文本颜色

值：
   1.英文单词
   2.16进制颜色 0-f ，#后面跟6表示颜色的数字
      前两位表示红色，中间两位表示绿色，后面两位表示蓝色 #aabbcc
      如果 两两相等 可简写为 #abc
            0黑色    f白色
   3.rgb(), rgba() 设置颜色
      括号中设置对应位置的数字是0-255
            0黑色    255白色
          rgb(255,0,0) 红色
      rgba中的a表示透明度，取值范围0-1,
          0表示完全透明，1表示完全不透明

text-decoration：文本修饰

值：
1.underline ：下划线
2.overline ：上划线
3.line-through： 中划线(删除线)
4.none ：去掉线(没有文本修饰线)

text-transform：文本转化

值：
1. lowercase： 全部小写
2. uppercase ：全部大写
3. capitalize ：单词的首字母大写

line-height ：设置行高 ，值是具体的数值

1. 对于单行文本 line-height 设置的高度如果和标签高度相同，则可以做 垂直居中效果
2. 对于多行文本可以理解为行间距

direction ：设置文字的方向

值：
rtl ：从右向左
ltr： 默认，从左向右

text-indent ：首行缩进，值是具体的数值
word-spacing ：设置两个单词之间的距离
letter-spacing ：设置两个字符之间的距离
overflow 属性：处理子集内容，超出当前容器的部分，主要是对父级元素添加该属性

值：
hidden ：超出部分隐藏(山穷水尽时可加)
scroll ：滚动查看超出的部分
auto： 自动渲染超出的部分

       overflow-x 控制x轴方向的超出部分  
       overflow-y 控制y轴方向的超出部分 

white-space 属性：设置文本的格式

nowrap ：强制不换行
normal ：强制换行

text-overflow 属性：对超出的文本内容进行剪裁

ellipsis： 超出的内容变为 省略号
clip ：直接裁掉超出的文本内容

 单行文本超出添加省略号
    overflow: hidden; 
    white-space:nowrap;
    text-overflow: ellipsis;

font-style ：设置字体的样式(不影响其他设置)

值：
normal 设置字体为 正常
italic 设置字体为 斜体

font-weight ：设置字体是否加粗

值：
normal ：默认
bold ：加粗
bolder ：相对bold加粗
也可以是具体的整百数字，范围是100-900
400相当于normal
700相当于bold
900相当于bolder

font-size ：设置字体的大小

1.目前浏览器默认字体大小为 16px
2.PC端浏览器的最小字体大小可以设置为 12px

font-family ：设置文字的字体

可以同时设置多个字体，形如：
font-family：‘a’,‘b’,‘c’…;
含义是 在客户端的设备上匹配a字体，如果没有a字体，则继续匹配b字体，依次进行匹配，知道匹配成功即可显示匹配到的字体
通用字体
1.serif 有衬线(类似锐化)
2.sans-serif 无衬线

font：是一个 复合型 css 属性，可以直接按照下面的顺序书

font：style  weight  size  family;

注意：style 和 weight 不是必须写入的内容，如果需要简写必须要有font-size和font-family
font：size family;

background ：设置标签元素的背景，是一个复合型属性，可以写在一起

  background：color image repeat position attachment;

      color 和 image 可以单独写
      background：color
      background：image

background-color ：设置背景色

值：
1.英文字母
2.16进制表示颜色
3.rgb() rgba() 设置颜色

background-image ：设置背景图

 background-image: url(背景图地址);

background-repeat ：背景图的平铺方式

值：
repeat 默认，x轴y轴都平铺
repeat-x 沿x轴方向平铺
repeat-y 沿y轴方向平铺
no-repeat 不平铺

background-positio ：设置背景图定位

 background-position： x轴方向的值   y轴方向的值;

值：(数值和方位名词可以结合)
1.具体的数值
2.方位名词组合
left top right bottom center

background-attachment ：设置背景图固定定位

值：
scroll 默认值，背景图片跟着页面一起滚动
fixed 根据浏览器可是区域，固定在具体的位置，他的定位参考点是浏览的可视区域

display：属性可以控制标签元素的显示属性

值：
block 把标签元素化为块属性
inline 把标签元素转化为行属性
none 隐藏标签元素