标签:
双标签 网页结构标签:
单标签
选择器的权重:
类型(元素)选择器:0001;
class选择器:0010;
ID选择器:0100;
包含选择器:为包含选择器的权重之和;
内联样式:1000;
!important:10000;
css属性和属性值:
文本属性:
字体大小:font-size:单位px,浏览器默认字体为16px;设计图常用字号12px;
字体:font-famliy:当字体是中文字体、英文字体中间有空格的时候,需要加双引号,多个字体中间用逗号隔开,解析顺序如果没有对应字体就从前往后解析
颜色:color:可以是颜色名称,也可以是rgb(255,255,255) ,#fff;
加粗:font-weight:100-900;500为不加粗
font-style:倾斜:italic(斜体字)normal (常规显示)
文本对其方式:text-align:right(水平靠右) left(水平靠左) center(水平居中)justify(水平两端对齐)
单行文本垂直居中:line-height:等于包含容器的高度,文本就可以在包含容器中垂直居中
首行缩进:text-indent:可以取负值,默认只对第一行起作用;
字间距:letter-spacing:控制文字与文字之间的距离
文本修饰:text-decration:none(没有)underline(下划线)overline(上划线)throughline(删除线)
文本简写属性:font:font-sytle font-weight font-size /line-height font-family;
文本变形:text-tranform:capitalize(首字母大写) lowercase(将全部英文转化成小写) uppercase(英文全部转化成大写)
列表属性:
list-style-type:定义文本列表符合样式:disc(实心圆)circle(空心圆) square(实心方块)none(去掉符号)
list-style- image:将图片设置为列表符号样式
list-style-position:设置列表项标记的放置位置 outside(李飚外面 默认)inside(列表里面)
list-style:none(去除列表符号)
背景属性:
background-color:设置背景颜色;
backgroudn-image:url(图片位置);将目标图片设置为背景图片
background-repeat:背景图片重复方式:no-repeat(不会复制平铺) repeat-x(沿着x轴方向平铺)repeat-y(沿着y轴方向平铺)
background-position:center center(居中) right bottom(右下角显示出来)
background-size:背景大小:width(100%) height(100%) 图片会失真,cover:(等比例缩放 图片可能显示不全,多余的裁掉)contain(可能有的地方留白)
background-attachment:背景图片的固定 scroll(滚动)fixed(固定之后就相对于浏览器的第一视口不动了)
background:color url() repeat position 属性的顺序可以随便换;background-size需要单独设置;
浮动属性:
作用:是将盒子横向排列;
清除浮动:clear:left、right、both 解决兄弟元素遮盖问题