CSS企业开发经验.盒子模型: CSS文本样式:color 为字体指定颜色 关键字 rgb rgba 十六进制font-family 为文字指定特殊的字体,浏览器只会使用浏览器可以访font-style 用于打开和关闭斜体文本
font-style:normal(正常字体,关闭斜体) font-style:italic(斜体) font-style:oblique(模拟斜体)
font-weight 为字体设置粗细程度 font-weight:normal / bold 正常加粗字体 font-weight:lighter / bolder 设置当前元素字体比父元素更粗或者更细 100-900 数值类型的粗细程度(值越大字体越粗) font-size 为文字指定大小text-align 文字排列方式text-transform 设置或者取消字体改变
text-transform:none 防止任何改变 text-transform:uppercase 将文本转换为大写 text-transform:lowercase 将文本转换为小写 text-transform:capitalize将所有单词第一个字母转换为大写 text-transform:full-width:转换为类似于一个等宽字体text-decoration 设置或者取消文本修饰
text-decoration:none; 取消所有文本修饰 text-decoration: underline; 为文本添加下划线 下划线 : 文字 文字 text-decoration: overline; 为文本添加上划线 text-decoration: line-through; 为文本添加删除线text-shadows 设置或者取消文本阴影
text-shadows:none; 取消所有阴影 语法:text-shadow: h-shadow v-shadow blur color; h-shadow:必需。水平阴影的位置。允许负值。 v-shadow: 必需。垂直阴影的位置。允许负值。 blur 可选。模糊的距离。 color 可选。阴影的颜色。参阅 CSS 颜色值。list-style-type:设置列表项标志类型: list-style-type:none/disc(实心圆圈)/circle(空心圆圈)/square/list-style-image:url()list-style-position:设置列表项标志出现的位置 list-style-position:outside/inside cursor 调整光标悬浮到链接上的时候光标的形状 outline 调整环绕链接的框
text-decoration:自定义设置列表项标志
text-align: 文本对齐方式默认样式:
ul,ol 元素的margin-top,margin-bottom均为16px(1em) , padding-left为 40px(2.5em)üli 元素没有设置默认的空白(行间距)üdl 元素的margin-top,margin-bottom均为16px(1em),但是没有内边距üdd 元素的margin-left为40px(2.5em)üp 元素的margin-top,margin-bottom为16px(1em)盒子模型 : 标准盒模型/w3c盒子/默认盒模型
特点:width.height设置给内容区 box-sizing:content-box; 考虑的问题: 盒子内容宽度 盒子宽度 盒子在浏览器中的宽度 边框盒模型/ 怪异盒模型
特点: width.height设置给边框 box-sizing:border-box;盒子背景样式:3.background-color:为元素设置一种颜色4.background-image:为元素设置一个背景图片2.background-clip:设定背景的覆盖范围 【background-clip: border-box 背景位于边框以内 background-clip:padding-box 背景位于内边距以内 background-clip:content-box 背景位于内容区】background-origin:设定背景的起始点 【background-origin: border-box 从边框的外边缘开始 background-origin:padding-box 从内边距的外边缘开始 background-clip:content-box 从内容区开始】5.background-position:设置为背景图像初始位置6.background-repeat:设置背景图片的重复方式 【 background-repeat:repeat为了覆盖整个背景范围,背景图片尽可能多的重复,在背景 边缘切割(clipping)最后一个图片以使用整个背景范围。 background-repeat:space使用空白分隔开图片,尽可能使背景图片占满整个屏幕而不 使用切割(clipping) background-repeat:round 将图片压缩或者是扩展以适应整个背景范围,不使用切割】 background-repeat:no-repeat 不重复1.background-attachment:设置背景图片的固定点 【 background-attachment:fixed 背景固定在视口上 background-attachment:scroll 背景固定在自身元素上 background-attachment:local 背景固定在自身元素的内容上】background-size:设置背景的大小background-size:cover 背景铺满整个屏幕,(尽量不要使用大图覆盖小范围
09-10