热门搜索:
您现在的位置是：首页 > 文章详情

Python全栈 Web（文本属性、表格属性、布局）

日期：2018-09-04点击：489


文本相关属性
字体属性：
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;
原文链接：https://yq.aliyun.com/articles/635510
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章