css基础4,分享


今天是2019年6月21日,周五了。在这里写上一篇随笔,主要内容是css基础中的一些细节部分,话不多说,直接上!

一、背景渐变: background-image

线性渐变:linear-gradient(渐变方向,色标,色标,色标)方向:关键字: to top 从下往上to bottom 从上往下to left 从右往左to right 从左往右角度:deg 角度同时针一样旋转色标:颜色 0%径向渐变:radial-gradient(【size at position】,色标,色标,)备注:size:渐变路径;at:关键字;position:渐变圆心所在的位置关键字:left right center;top bottom center  

二、字体文本相关样式

字体属性:font-family字体大小:font-size字体加粗:font-weight字体倾斜:font-style小型大写:font-variant综合属性:font:font-style font-variant font-weight font-size font-family

三、文本相关属性

文本颜色:color文本对齐方式:text-align 值:left right center文本修饰:text-decoration

值:

none:无线条样式underline:下划线line-through:删除线overline:上划线行高:一行文本所占的高度格式:line-height:height(文本居中)注意:一行文本,行高永远和元素的上边缘是重合的;当行高的高度大于文本的高度是,那么该文本会在行高范围内居中首行缩进:text-indent文本阴影:text-shadowoffsetx offsety blur color

四、表格相关样式

属性:color font-size border width height表格特有样式:border-collapse:边框合并border-seperate:边框分离

border-spacing:相邻单元格之间的距离,相当于cellspacing。

备注:两个值;第一个值代表的是水平距离,第二个值代表的是垂直距离主体:border-collapse:seperate表格布局:table-layoutauto:默认的 自动表格布局,根据内容来自动分类td高度fixed:固定的 列宽度是由总宽度来平均分配的

五、td:vertical-align 垂直对齐方式

使用场景:图文混排时,定义文字相对于图片的对齐方式td中设置单元格的垂直对齐方式

六、显示方式设置

属性:display值:block 让元素变成快元素inline-block 让元素变成行内快元素注意:行内块元素,只是可以设置宽高以及上下的margin;使用场景:一个行内块元素需要设置宽高或者设置上下margininline 让元素变成行内元素none 隐藏元素:元素消失后,不占据页面空间(脱离文档流)注意:不要尝试给一个快元素变成行内元素,因为没有任何意义!

七、显示效果

定义:visibility:visible(可见)or hidden(隐藏)备注:display:none和visibility:hidden异同相同点:都是让元素消失不同点:display:none 消失后脱离文档流,不占据页面空间visibility:hidden 消失后并没有脱离文档流,依然占据着页面空间

八、光标样式

属性:cursor值:default(默认)pointer(小手)wait(等待)crosshair(十字光标)not-allowed(禁用)

九、列表项:list-style

有序列表:none(取消列表项的标志)无序列表:disc(实心圆) circle(空心圆) square(实心方块) none(无列表标志)列表项位置:list-style-position:inside: 内部outside: 外部列表项图片:list-style-image url(路径)

http://www.dengb.com/HTML_CSS/1356234.htmlwww.dengb.comtruehttp://www.dengb.com/HTML_CSS/1356234.htmlTechArticlecss基础4, 今天是2019年6月21日,周五了。在这里写上一篇随笔,主要内容是css基础中的一些细节部分,话不多说,直接上! 一、背景渐变:…

—-想了解更多的css相关样式处理怎么解决关注

(0)
上一篇 2022年9月6日 上午10:13
下一篇 2022年9月6日 上午10:25

相关推荐

发表回复

登录后才能评论