CSS进阶
文字与字体样式
font-weight
:指定字体粗细 -blod normal
100~300细 400~500正常 600~900加粗 bold加粗同六百 bdder加粗同强调标签strong
font-style
:指定字体倾斜 -normal italic(斜体)
font-family
:指定字体
· 字体可以是列表的形式,一般英语字体放到·前面,后面的字体是前面的字体的后备字体
· 字体名称中有空格,必须要用引号来包裹
· 阿里巴巴提供了一套免费商用授权的惠普字体,网址https://www.iconfont.cn/webfont#!/webfont/index
text-shadow
:文本阴影
span{
font-family:abc;
background-color:yellow;
text-shadow:4px 2px 2px #777;
}
word-wrap
:允许长的内容可以自动换行(英文)
· break-word:在长单词或URL地址内部进行换行 (短单词不换行)
word-break
:属性指定非CJK脚本的断行规则。(英文)
· break-all:允许在单词内换行 (无差别强制换行,不会留有空白)
· 只能在半角空格或连字符处换行
line-height 和 vertical-align
文本的基本概念:
font-size:同一行顶线和底线之间的距离
行距:上行的底线和下一行的顶线之间的距离,即控制两行文字垂直的距离
基线:并不是汉字文字的下端沿,而是英文字母“X”的下端沿
行高:是指文本行基线间的垂直距离
font-size 与 line-height之间的距离
font-size等于line-height时,行距 = line-height - font-size = 0;
当font-size 大于 line-height 时,则会出现行距为负值,则两行重叠
当font-size 小于 line-height时,行距会变大。
css背景
元素的背景属性
background 简写属性,作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。scroll 默认
值。/fixed 当页面的其余部分滚动时,背景图像不会移动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
left/right/center/bottom/top 这几个属性值可以两两组合使用,如果只规定了一个关键词,
那么 第二个值将时"center"
x% y% 第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0% 右上角是 100%100%
如果仅规定 了一个值,另一个值是 50
background-repeat 设置背景图像是否及如何重复。
repeat/repeat-x/repeat-y/no-repeat
css3新增的背景属性
background-size 规定背景图片的尺寸。
像素/百分比设置宽高。
cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
css边框
元素的边框属性
border 简写属性,用于把针对四个边的属性设置在一个声明
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度
常用单位为像素(px)、em。
thin 细的边框。/medium 默认/thick定义粗的边框。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
none 定义无边框。
dotted 定义点状边框。
dashed 定义虚线。
solid 定义实线。
groove定义点状边框。
ridge定义 3D 垄状边框。
inset 定义 3D inset 边框。
outset 定义 3D outset 边框
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
css3新增的边框属性
border-radius 设置所有四个 border-radius 属性的简写属性。
· * 同时设定四个角的圆角。
· **分别设定左上 右下、左下 右上圆角。
· *** 分别设定左上 、左下 右上、右下圆角。
· **** 分别设定左上 、右上、右下、左下圆角。
border-top-left-radius 左上角圆角边框。
border-top-right-radius 右上角圆角边框。
border-bottom-right-radius 右下角圆角边框。
border-bottom-left-radius 左下角圆角边框。
· border-image 设置所有 border-image 属性的简写属性
值 描述
border-image-source 用在边框的图片的路径
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量。
border- image-repeat(stretched) 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸
注意:
Internet Explorer 不支持 border-image 属性。
border-image 属性用于设置图片的边框。
box-shadow 向方框添加一个或多个阴影。
none: 无阴影。
阴影水平偏移值/阴影垂直偏移值/阴影模糊值/阴影外延值/阴影的颜色/inset 内阴影(默认值为
outset)