字体样式
字体大小:font-size:25px
字体加粗:font-weight:normal(正常400) bold(加粗700)
字体倾斜:font-style :normal 正常(默认值) italic 倾斜
字体样式:font-family
常见取值: 具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列具体字体:“Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等......字体系列: sans-serif、serif、monospace等......
属性名: font (复合属性)取值: font : style weight size family;
文本样式
1.文本缩进:text-indent:12px | 1em
2.文本水平对齐方式:text-align:left | center | right 如果需要让文本水平居中,text-align属性给文本所在标签 (文本的父元素)设置
text-align:center 能让哪些元素水平居中
1.文本
2.span标签、a标签3. input标签、img标签
3.文本修饰: text-decoration
属性值
underline 下划线(常用)
line-through 删除线(不常用)
overline 上划线(几乎不用)
none 无装饰线(常用)
开发中会使用 text-decoration:none;清除a标签默认的下划线
line-height行高
例
line-height:25px | 1em
颜色取值
css选择器
1、复合选择器
后代选择器 用空格隔开、儿子、孙子、重孙
子代选择 用 >符号隔开 只能选择儿子
2、并集选择器 同时选择多组标签,设置相同的样式 用,符号隔开
3、交集选择器 同时满足多个交集条件、例如 p.box{} 选择p标签、并且class属性为box的
4、hover伪类选择器
例如 鼠标悬停 a:hover{
}
任何一个标签都可以添加伪类选择器
背景
/**背景颜色 */
background-color: #fff;
background-color: rgba(red, green, blue, alpha);
/** 背景图片 */
background-image: url('');
/**
repeat (默认值)水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿着水平方向(x轴)平铺
repeat-y 沿着垂直方向(y轴)平铺
*/
background-repeat: no-repeat;
/**
水平方向 left center right
垂直方法 top center bottom
或者数字、x y
*/
background-position: 50px 25px;
/**复合属性
推荐顺序: background: color image repeat position
不分先后顺序
*/
background: #000 url('') no-repeat 50px 25px ;
/**
1、块级元素 div、p、h系列、ul、li、dl、dt、 dd、 form、header、 nav、 footer.....
显示特点
1.独占一行(一行只能显示一个)
2.宽度默认是父元素的宽度,高度默认由内容撑开
3.可以设置宽高
2、行内元素 a、span 、b、u、i、s、strong、ins、em、del.....
显示特点
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
3、行内块元素 input、 textarea、button、 select......特殊情况:img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline
显示特点:
1.一行可以显示多个
2.可以设置宽高
4、元素显示模式转换 改变元素默认的显示特点,让元素符合布局要求
display: block 转换成块级元素 较多
display:inline-block 转换成行内块元素 较多
display:inline 转换成行内元素 极少
*/
/**
继承性的介绍
特性:子元素有默认继承父元素样式的特点(子承父业)可以继承的常见属性(文字控制属性都可以继承)
color font-style、 font-weight、 font-size、 font-family3. text-indent、text-align4. line-height ...
注意点 可以通过调试工具判断样式是否可以继承
(拓展)继承失效的特殊情况
如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式
a标签的color会继承失效
h系列标签的font-size会继承失效
*/
*变成CSS3的盒子模型,好处: 加了border和padding不需要手动减法 *
box-sizing: border-box;