CSS 属性归纳

CSS 属性

一.CSS属性组成和作用

属性:属性值

(1) 每个CSS样式都必须又两部分组成

• 选择符 (Selector)
• 声明 (Decleration) 声明又包括属性(Propery)和属性值(Value)

(2) CSS属性: 属性是指定选择符具有的属性,它是CSS的核心,CSS2共有150多个属性

(3) CSS属性值: 属性值包括法定属性值和常规的数值加单位

• 单位(px % em vw vh)

二.文本字体属性

1.font-size 文体大小

div{
    font-size:16px;
}

(1) 单位可以为pt, 9pt=12px

(2) 浏览器标准字体大小为16px,也是1em,默认情况下 1em=16px 0.75em=12px em是相对于父元素字体大小取值 1em=父元素字体大小

2.font-family 字体的类型

div{
    font-family:"宋体","Arial"
}

(1) 一般情况下,中文字体默认为宋体或新宋体 英文为Arial,可以写多种,浏览器会匹配,会遍历定义的字体,直到匹配到机器

3.font-weight 字体加粗

font-weight 和 strong和 b标签都有加粗效果

(1) font-weight可以取值为

• bold(加粗)
• bolder(更粗)
• normal(正常即为不加粗,正常字体)
• 还可以设置100-900的值 从小到大 100-500常规字体 600-900加粗字体

4.font-style 字体倾斜

font-style与i标签 em标签都有字体倾斜效果

a{
    font-style:italic
}

(1) font-style 可以取值为italic ,oblique, normal(正常)

(2) 一般取值为italic ,oblique倾斜幅度更大,但浏览器看不出效果

5.font-variant 设置文本小型大写字母

p{
    font-variant:small-caps
}

6.font 简写

常用写法按 font:font-style font-weight font-size/line-height font-family 以空格隔开

p{
  font:italic bold 30px/2em "微软雅黑",Arial;
}

font-size和font-family位置不可互换,必不可少 常用写法简写:font:30px/2em;

7.line-height 行高

(1) 当单行文本的行高高于容器的高度时,可以实现单行文本在容器的垂直方向居中对齐

(2) 当单行文本的行高小于容器的高度时,可以实现单行文本在容器的垂直方向居中对齐中线处以上的位置,任意定位

(3) 当单行文本的行高大于容器的高度时,可以是实现单行文本在容器的垂直方向居中对齐中线以下的位置,任意定位(IE6以下存在兼容问题,尽量不要让行高大于容器高度)

8.color 文本颜色

p{
   color:red
}

(1) 颜色可以设置为rgba (234,35,65 0.5) 0.5设置透明度 也可以是rgb

(2) 颜色可是设置16进制的数

(3) 语义化的英文

9.text-transform 检索和设置对象中的大小写

p{
    text-transform:capitalize;
}

text-transform 一般设置文本大小写,通常为英文字母,可以取值为:

(1) uppercase 文字全变大写

(2) lowercase 文字全变小写

(3) capitalize 文字首字母变大写

10. text-align 文本对齐方式

p{
    text-align:center
}

可设置文本水平方向对齐

取值 left ,center,right justify(两端对齐)

11.text-decoration 文本修饰

p{
    text-decoration:none;
}

可以取值为:

(1) none正常

(2) underline 添加下划线

(3) overline 添加上划线

(4) line-through添加删除线

12.text-indent 首行缩进

p{
    text-indent:2em;//首行缩进2个em长度
}

text-indent 可以设置为负值,可以设置隐藏,只作用于首行文字,通常我们会在logo设置text-indent:-9999 隐藏,既隐藏了文字,也利于搜索引擎

13.letter-spacing字间距

控制汉字或英文字母间距

p{
    letter-spacing:10px;
}

14.word-spacing 词间距

控制英文单词间距

p{
    word-spacing:10px;
}

15.list-style-type 定义列表符号样式

ul li{
    list-style-type:none;
}

可以取值为:

(1) none 去掉样式

(2) disc 实心圆

(3) circle 空心圆

(4)square 实心方块

16.list-style-image 使用图片作为列表符号

ul li{
    list-style-image: url(image/item.jpg);
}

17.list-style-position 定义列表符号的位置

ul li{
    list-style-position:inside;
}

取值为

(1) inside 里面

(2) outside 外面

18.list-style 简写方法

ul li{
    list-style:none;//去掉样式列表
}

19.overflow 容器溢出

overflow:visible/hiddle/scroll/auto/inherit

可取值为:

(1) visible 默认值 内容不会被裁剪,会呈现在元素框之外

(2) hidden 内容会被裁剪,并且内容是不可见的

(3) scroll 内容会被裁剪,但是浏览器会显示滚动条,便于查看其余内容

(4) auto 如果内容被裁剪,则浏览器会显示滚动条,便于查看其余内容

(5) 规定应该从父元素继承overflow属性的值

20.white-space 空白空间

white-space: normal/pre/nowrap/pre-wrap/pre-line

可取值为:

(1) normal 默认值,多余空白会被浏览器忽略,只保留一个

(2) pre 空白会被浏览器保留

(3) pre-wrap 保留一部分空白符序列,但是正常进行换行

(4) pre-line 合并空白符序列,但是保留换行符

(5) nowrap 文本不会换行,文本会在同一行上继续,知道遇到<br/>标签为止

21.text-overflow 文本溢出

text-overflow:clip/ellipsis

可以取值为:

(1) clip 不显示省略号(…) 而是简单的裁切

(2) ellipsis 当对象内文本溢出时,显示省略标记

22.省略号设置

text-overflow属性仅仅是当文本溢出时才显示省略标记,并不具备其它样式属性定义,要实现溢出时产生省略号的效果还需定义:

(1) 定容器的宽度:(px,%都可以)

(2) 强制文本在一行内显示 whit-space:nowrap

(3) 溢出内容为隐藏overflow:hidden

(4) 溢出文本显示省略号 text-overflow:ellipsis

1.单行

.box {
    width: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

2.多行

.box2 {
    width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

三.边框

1.border-style 边框样式

.btn{
    border-style:none
}

(1) dotted 点线边框

(2) dashed 虚线边框

(3) solid 实线边框

(4) double 两个边框

2.border-width 边框宽度

.btn{
    border-width:5px;
}

3. border-color 边框颜色

.btn{
    border-color:red;
}

4.border-xxx-style 不同方向的边框

.btn{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

5.border简写

.btn{
    border:1px solid red;
}

四.背景图属性

1.background简写

div{
    background:#999 url(/images/item.jpg) no-repeat 1px center;
} 

此为简写

2.background-color 设置背景颜色

div{
    background-color:#999; 
}

3.background-image 设置背景图片

div{
    background-image:url(images/item.jpg);
}

背景图片显示原则

(1) 背景图尺寸刚好等于容器尺寸,则背景图片刚好显示在容器中

(2) 背景图尺寸小于容器尺寸,则背景图默认平铺整个容器,铺满为止

(3) 背景图尺寸大于容器尺寸,则只显示容器范围内的背景图

4.background-repeat 背景图平铺

div{
    background-repeat:no-repeat;
}

可以取值为:

(1) no-repeat:不平铺

(2)repeat :平铺(默认)

(3) repeat-x:横向平铺

(4) repeat-y :竖向平铺

5.background-position 背景图定位

div{
    background-position:25px 60px;
}

background-position:水平方向取值 垂直方向取值

水平方向取值:left/right/center/具体数值

垂直方向取值:top/center/bottom/具体数值

水平方向和垂直方向都居中时,可以直接简写为background-position:center

6.background-attachment 背景图固定

div{
    background-attachment:fixed;
}

可以取值为:

(1)scroll滚动 随内容一块滚动

(2) fixed 固定 不随内容滚动