CSS 属性
文章目录
- CSS 属性
- 一.CSS属性组成和作用
- 二.文本字体属性
- 1.font-size 文体大小
- 2.font-family 字体的类型
- 3.font-weight 字体加粗
- 4.font-style 字体倾斜
- 5.font-variant 设置文本小型大写字母
- 6.font 简写
- 7.line-height 行高
- 8.color 文本颜色
- 9.text-transform 检索和设置对象中的大小写
- 10. text-align 文本对齐方式
- 11.text-decoration 文本修饰
- 12.text-indent 首行缩进
- 13.letter-spacing字间距
- 14.word-spacing 词间距
- 15.list-style-type 定义列表符号样式
- 16.list-style-image 使用图片作为列表符号
- 17.list-style-position 定义列表符号的位置
- 18.list-style 简写方法
- 19.overflow 容器溢出
- 20.white-space 空白空间
- 21.text-overflow 文本溢出
- 22.省略号设置
- 三.边框
- 四.背景图属性
一.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
固定 不随内容滚动