css基础4
2024-09-29 18:43:21
今天是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-shadow
- offsetx offsety blur color
值:
四、表格相关样式
- 属性:color font-size border width height
- 表格特有样式:
- border-collapse:边框合并
- border-seperate:边框分离
- 备注:两个值;第一个值代表的是水平距离,第二个值代表的是垂直距离
- 主体:border-collapse:seperate
border-spacing:相邻单元格之间的距离,相当于cellspacing。
- 表格布局:table-layout
- auto:默认的 自动表格布局,根据内容来自动分类td高度
- fixed:固定的 列宽度是由总宽度来平均分配的
五、td:vertical-align 垂直对齐方式
- 使用场景:
- 图文混排时,定义文字相对于图片的对齐方式
- td中设置单元格的垂直对齐方式
六、显示方式设置
- 属性:display
- 值:
- block 让元素变成快元素
- inline-block 让元素变成行内快元素
- 注意:行内块元素,只是可以设置宽高以及上下的margin;
- 使用场景:一个行内块元素需要设置宽高或者设置上下margin
- inline 让元素变成行内元素
- 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(路径)
未完,待续!
最新文章
- JLINK通过JFLASH烧写bin文件报错处理方法
- cut用法
- ArcGIS Server 缓存服务切图范围
- sql set xact_abort on 用例
- Linux 删除文件夹和文件的命令
- .NET分布式事务处理总结【下】 - 包含MSMQ的分布式事务处理
- webservice axis2客户端设置代理方法(公司网络通过代理访问时)
- package、import、java及javac的相关介绍(转)
- VisualStudio 怎么使用Visual Leak Detector
- 强化学习之Sarsa (时间差分学习)
- Android Studio C/C++开发环境配置
- cmd强行终止进程
- find 以及linux 和windows 文件互传
- ActiveMQ队列特性:删除不活动的队列(Delete Inactive Destinations)
- MATLAB安装libsvm无法使用解决办法(转)
- UBUNTU 下 APACHE2 Too many open files: Error retrieving pid file /var/run/apache2.pid
- kill 信号大全
- 利用Python分析GP服务运行结果的输出路径 &; 实现服务输出路径的本地化 分类: Python ArcGIS for desktop ArcGIS for server 2015-08-06 19:49 3人阅读 评论(0) 收藏
- jasperreports+Ireport开发搭建
- CTF两个经典的文件包含案例
热门文章
- Android零基础入门第34节:Android中基于监听的事件处理
- 【Windows10 ;IoT开发系列】开发人员模式设置
- 为javasript中对象与json串之间转换的总结。
- 12 寸 Retina MacBook 的大秘密: 可用移动电源充电
- Rainyday.js – Rendering Raindrops with JavaScript
- 浅谈Linux(Centos7.4)环境下NTP服务器的构建
- jconsole远程监控logstash agent
- Linux命令行和shell编程
- shell多线程之进程间通信
- GitLab安装后修改IP/域名