eg举例用:{}
备注用:()
强调用:【】
文本标签及文本样式:
文字大小:
font-size:指定文字大小
font-family:指定标签中文字使用字体样式 {font-family:华文彩云,arial,微软雅黑;带空格字体需要用引号引起;宋体和雅黑为常用}
一般来说只有用户计算机中安装了我们指 定的字体时,它才会显示,否则这行代码 是没有意义的
字体分类:在网页中将字体分为五大类 【如指定,浏览器会自己选择指定类型的字体】
serif(衬线字体) 衬线和非衬线一般用在font-family中最后一个字体
sans-serif(非衬线字体)
monospace (等宽字体) 编程一般使用等宽字体
cursive (草书字体)
fantasy (虚幻字体)
font-style:用来指定文本的斜体
指定斜体:font-style:italic (一般用这个)
指定非斜体:font-style:normal
font-weight:用来指定文本的粗体
指定粗体:font-weight:bold (100~900;400=normal;900=bold)
指定非粗体:font-weight:normal
font-variant:将字母类型设置为小型大写(缩小了尺寸的大写字母)
font-variant:small-caps
font:可一次性同时设置多个字体的样式
font:{加粗 斜体 小型大写 大小/行高 字体 } (字体大小和字体必须放在最后两个,其他的不写即用默认值)
行间距:【重点】
line-height:用于设置行高,行高越大则行间距越大 (行间距 = line-height – font-size)line-height的大小(%与数字相对于font-size来说)
单行文本想要【垂直居中】,将行高设置与父元素相同即可
line-height与font写时line-height写在font
大写化:(只对英文有用)
text-transform:样式用于将元素中的字母全都变成大写
大写:text-transform:uppercase
小写:text-tansform:lowercase
首字母大写:text-transform:capitalize
正常:text-transform:none
文本修饰:
text-decoration:用来给文本添加各种修饰,添加各种线条
underline:下划线
overline:上划线
line-through:文本中间划线
none:去掉线
字母间距 和 单词间距(英文有用):可直接指定一个长度或百分数作为值;整数增加距离,负数代表减少距离
letter-spacing:用来设置字符之间的间距。
word-spacing:用来设置单词之间的间距。
【对齐文本】:
text-align用于设置文本的对齐方式
left:左对齐
right:右对齐
justify:两边对齐
center:居中对齐
首行缩进:一个字为16px
text-indent:用来设置首行缩进;需指定一个长度,并只对第一行有效;常用em做单位【1em=1font-size=1个字】
盒子模型
盒子:CSS处理网页时,它认为每个元素都包含在一 个不可见的盒子里
盒子模型【重点】:内容区(content)
内边距(padding)
边框(border)
外边距(margin)
内容区:放置内容的区域
width:设置内容区的宽
height:设置内容区的高
边框:是元素可见框的最外部
border-width:设置边框的宽
border-height:设置边框的高
border-color:设置边框颜色
border-style:设置边框样式
background-color:背景颜色(其他几个区通用)
border:颜色 样式 宽;{border:red solid 10px;}
边框的样式:
none:没有边框(常用)
dotted:点线
dashed:虚线
solid:实线 (常用)
double:双线
groove:槽线
ridge:脊线
inset:凹边
outset:凸边
内边距:元素内容区与边框以内的空间
padding:设置元素内边距
padding:上 右 下 左 {padding:10px 20px 30px 40px} (其他也遵循此顺序)
padding:上 左右 下
padding:上下 左右
padding:上下 左右
padding-top:顶部
padding-left:左边
padding-right:右边
padding-bottom:底部
外边距:元素边框与周围元素相距的空间(本盒子与其他盒子等的距离)
margin:设置元素外边距
垂直方向上两盒子外边距可以重合(重合需满足两条件:1:垂直方向上2:相邻)
如果子元素与父元素外边距相邻,则可能一变全变(可设置边框、内容、内外边距隔开;也可用overflow:hidden)
用法:和padding类似
margin-top/right/bottom/left (同遵循此顺序)
auto(自动):当将左右外边距设置为auto时,浏览器会将左右外 边距设置为相等,
所以这行代码margin:0 auto可 以使元素【居中】 (适用于水平方向上)
margin-left:auto 左边最大
margin-right:auto 右边最大
清除浏览器默认样式:*{margin:0;
padding:0;
}