Python全栈 Web(文本属性、表格属性、布局)

作者 : 开心源码 本文共2209个字,预计阅读时间需要6分钟 发布时间: 2022-05-12 共137人阅读

文本相关属性

字体属性:

1.设置字体大小

属性:font-size

取值:px

2.指定字体名称

属性:font-family

取值:字体名称,假如出现多个名称,用,隔开

假如字体名称出现中文或者出现中文空格要使用引号引起来

3.设置字体的加粗

属性:font-weight

取值:

单词表示

normal 默认值 正常显示

bold 加粗显示

lighter 极细文本

数字显示

100~900之间 整百数值 值越大越粗

400 等于 normal

700 等于 bold

4.设置字体样式:

属性:font-style

取值:

normal 正常显示

italic 用斜体显示

oblique 使文本倾斜达到斜体效果

5.字体属性简写:

属性:font

取值:style weight size family

family属性值必需写 不写所有设置无效

文本属性:

1.文本颜色

属性:color

取值:颜色值

2.文本水平对齐方式:

属性:text-align

取值:left(默认值) center right

justify(两端对齐)

3.设置行高

属性:line-height

取值:像素 或者无单位数值表示当前文本大小的倍数

行高常使用于设置文本的垂直居中

将元素的高度与行度保持一致

一行文本 在当前行中肯定是垂直居中的 上下的空隙由浏览器自动分配

4.文本装饰线

属性:text-decoration

取值:

underline下划线

overline上划线

line-through删除线

none:针对超链接取消下划线

表格属性:

基础样式属性是通使用的

width height background color margin padding

独有CSS属性:

边框合并:

border-collapse

取值:

separate(默认分离)

collapse(边框合并)

td不支持外边距 边框合并只能写在table标签里

边框的边距:

设置单元格之间的距离

属性:

border-spacing

取值:

h-Value水平方向的距离

v-Value垂直方向的距离

两个值使用空格隔开

只能在表格边框分离的状态下用

过渡效果:

过度效果指的是元素CSS属性值在发生变化时的一种平滑效果

语法:

过度属性:

属性:transition-property

作使用:使用来指定哪些CSS属性需要增加过度效果

取值:

指定单个的属性名称添加一个过度效果 例如:width

指定多个属性使用,隔开

all:

将所有能增加过渡效果的都进行增加

能够增加过渡效果的属性:

所有颜色相关的属性

所有数值取值为数字的属性

过渡时长:

属性:transition-duration

作使用:表示多长时间内完成过渡效果

取值:

单位为s(秒)或者者是ms(h毫秒)的数值

速度时间曲率:

属性:transition-timing-function

作使用:设置过渡效果的变化速率

取值:

ease(默认) 慢速开始 中间变快 慢速结束

linear 匀速变化

ease-in慢速开始 加速结束

ease-out快速开始 减速结束

ease-in-out 慢速开始和结束 中间先加速后减速

过渡推迟:

属性:transition-delay

作使用:推迟指定时长后再发生过渡效果

取值:

单位为s(秒)或者者是ms(h毫秒)的数值

用注意:

过渡时长必需设置,其余可以省略 否则没有过渡效果

用过渡相关的属性,要定义在元素默认样式中

不能写在伪类选择器中,会影响效果

属性简写:

属性:transition

取值:

property、duration

timing-function 、delay

duration必需写

布局:

设置元素在网页中的排列方式和位置

分类:

普通流布局/标准流布局/文档流布局

网页中默认布局方式

特点:

将元素按照书写顺序和类型从左向右 从上到下排列

浮动布局:

属性:float

left、right、none(默认)

left:

元素向左浮动 停泊在其余元素的边缘

right:

元素向右浮动 停泊在其余元素的边缘

特点:

1.元素在设置浮动元素后会脱离文档流

元素在文档中不占位 呈现一种浮动元素飘浮在文档上方的效果

2.浮动元素后面的正常元素会上移占据本来浮动元素所在的位置

3.多个元素左浮或者右浮动,浮动元素会依次停泊在前一个元素的边缘位置

第一个浮动元素会贴着负元素的边框显示

4.假如父元素中无法并排显示浮动元素会自动换行

5.浮动元素在文档中不占位

6.所有类型的元素只需设置浮动即可以设置宽高

行内或者行内快元素浮动后 水平方向之间没有空隙

浮动元素的特殊效果:

文字环绕效果

浮动元素会遮挡后面正常元素 但是不会遮挡正常元素的内容的显示

内容会自动围绕在浮动元素的附近显示

浮动元素对父元素高度影响:

因为浮动元素在文档中不占位 一旦子元素一律浮动 父元素的高度会成0

影响背景的显示,和后面其余元素的布局

处理方式:

1.指定父元素的高度

但是不能精确确认父元素的高度

2.父元素中设置:overflow:hidden

假如父元素要显示溢出的内容,设置overflow:hidden之后

溢出的内容就不显示了

3.清理浮动:

因为浮动元素会对其后的正常元素带来少量影响 所以在网页布局中要清理这种影响

属性:clear

取值:

none (默认)不做解决

left 清理当前元素前面左浮元素带来的影响

right 正常元素右边不允许出现浮动元素

both正常元素两边都不能出现浮动元素

在父元素的末尾增加空的块级元素

设置空块级元素 clear:both;


本文来自阿里云云栖社区,未经许可禁止转载。

?更多资讯,尽在云栖科技快讯~

来科技快讯看新闻鸭~

快点关注我认识我爱上我啊~~~

Python全栈 Web(文本属性、表格属性、布局)

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Python全栈 Web(文本属性、表格属性、布局)

发表回复