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

151 阅读5分钟
原文链接: click.aliyun.com


文本相关属性 字体属性: 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;