css属性

清除元素的默认边距:
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0;
padding:0;
/清除列表的项目符号/
list-style:none;
}

color 设置文本颜色
background-color 设置背景颜色
font-size 设置字体大小
:link 超链接访问前
:visited 超链接访问后
:hover 鼠标滑过或悬停时(重点)
:active 鼠标点按不抬起(激活)
:focus 表单控件获取焦点时(常用)

属性:vertical-align 取值:top/middle/bottom 作用:调整左右其他元素跟当前行内块元素的垂直对齐方式

属性:display 取值:block(块)/inline(行内)/inline-block(行内块)/none(隐藏)

rgb(r,g,b)通过三原色设置颜色,每一种颜色取值0~255

属性:overflow visible(默认可见) hidden(隐藏) scroll(强制添加水平和垂直的滚动条) auto(自动在发生溢出的方向添加可用的滚动条)

边框 : border 取值:width style color; 值 solid 实线边框(重点) dashed 虚线边框 dotted 点线边框 double 双线边框

单边框实现 属性:border-top 上边框 取值:width style color;

网页三角标制作 1.设置元素尺寸为0 2.统一设置四个方向透明边框 3.单独调整可见色

边框实现:outline 取值:width style color;(同border) 常用:取消输入框焦点状态自带的轮廓线 input:focus{outline:none} 区别:轮廓线不占位,边框实际占位

边框圆角:border-radius 取值:像素值或百分比,设置圆角半径

盒阴影(了解): box-shadow 取值:offsetX offsetY blur (spread) color;

内边距:padding 取值:像素值,可取1/2/3/4个值 默认带有内边距的元素:ul,ol,input,button

外边距:margin 取值:像素值,取值规律同padding 特殊取值:左右自动外边距 auto 外边距取负值,可以对元素位置进行微调

外边距合并:垂直方向–为父元素添加顶部边框或为父元素添加顶部内边距padding-top:0.1px;
水平方向–1行内元素对盒模型的属性不完全支持,不支持width/height,不支持垂直方向上的边距 2.水平方向上外边距叠加显示

盒模型计算:box-sizing 取值:content-box/border-box 作用:调整元素盒模型的计算方式

浮动布局:float 取值:left/right 浮动时会影响整体布局
在其父元素上末尾添加clear:both可以解决此问题

定位布局:position 取值:relative/absolute/fixed .
1.相对定位relative 特点:相对定位的元素不会脱离文档流;参照元素在文档中的原始位置进行偏移
2.绝对定位absolute 特点:绝对定位的元素脱离文档流,不占位;参照离他最近的已定位的祖先元素进行偏移,没有的话,参照浏览器窗口的原点偏移
3.固定定位fixed 特点:固定定位的元素会脱离文档流;参照浏览器窗口进行定位;不跟随页面滚动而滚动

堆叠次序调整 :z-index 取值:无单位的数值,值越大越靠上 注意:只能调整已定位元素的堆叠次序

背景属性简写:background:color url() repeat position; 注意:background-size单独设置
背景属性:背景颜色:background-color .背景图片:background-image:url("");
设置背景图片的重复方式:background-repeat 取值:repeat(默认)/repeat-x/repeat-y/no-repeat(不重复平铺)
设置背景图片的显示位置:background-position 取值:1.取像素值 x y 方位值:水平:left/center/right 垂直:top/center/bottom
注意:如果某个方向上缺省,默认为center 百分比 x y
调整背景图片的尺寸: background-size:width height; 特殊:cover:等比拉伸至足够大,完全覆盖元素,超出部分不可见
contain:等比拉伸至足够大,刚好被元素容纳,不能超出元素。
字体属性简写:font 取值:style weight size family; 注意:1.按顺序书写属性值 2.size和family是必填项,style和weight根据需要书写
字体样式:font-size 设置字体大小
font-weight 设置字体粗细 取值:normal(400)/bold(700) *取关键字或无单位数值,100~900值越大,越粗
font-style 设置斜体 取值:italic
font-family 设置字体名称 取值:如果名称中出现中文或空格,必须加引号;可取多个值做备选字体,属性值之间使用逗号隔开
文本样式 color 文本颜色
text-decoration 设置文本装饰线 取值:none/underline/overline/line-through
text-align 设置文本的水平对齐方式 取值:left(默认)/center/right/justify(两端对齐)
line-height 设置行高 常用:设置行高与高度保持一致,实现一行文本的垂直居中

显示属性 列表属性 list-style:none; 清除列表的项目符号
鼠标显示形状:cursor 取值:default 鼠标显示为箭头 pointer 鼠标显示为手指 text 鼠标悬停在文本内容上,默认显示为"I"

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值