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;
(将多余文本隐藏,图片同理) (内容溢出显示滚动条,如果不溢出不显示滚动条) (显示滚动条)
2.文字溢出省略号显示 (三者缺一不可)
1)文字在同一行显示 white-space: nowrap;
2)溢出部分隐藏 overflow: hidden;
3)文字溢出省略号显示 text-overflow: ellipsis|clip(裁剪);
white-space: nowrap;
/*溢出部分隐藏*/
overflow: hidden;
/*文字溢出省略号显示*/
text-overflow: ellipsis;
3.设置字符之间的距离 : letter-spacing: 1px;
letter-spacing: 1px
(字符之间间距1px)