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

简介:


文本相关属性
字体属性:
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;
相关文章
|
13天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
96 44
|
8天前
|
机器学习/深度学习 自然语言处理 API
如何使用阿里云的语音合成服务(TTS)将文本转换为语音?本文详细介绍了从注册账号、获取密钥到编写Python代码调用TTS服务的全过程
如何使用阿里云的语音合成服务(TTS)将文本转换为语音?本文详细介绍了从注册账号、获取密钥到编写Python代码调用TTS服务的全过程。通过简单的代码示例,展示如何将文本转换为自然流畅的语音,适用于有声阅读、智能客服等场景。
41 3
|
14天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
28 2
|
1月前
|
人工智能 搜索推荐 API
用于企业AI搜索的Bocha Web Search API,给LLM提供联网搜索能力和长文本上下文
博查Web Search API是由博查提供的企业级互联网网页搜索API接口,允许开发者通过编程访问博查搜索引擎的搜索结果和相关信息,实现在应用程序或网站中集成搜索功能。该API支持近亿级网页内容搜索,适用于各类AI应用、RAG应用和AI Agent智能体的开发,解决数据安全、价格高昂和内容合规等问题。通过注册博查开发者账户、获取API KEY并调用API,开发者可以轻松集成搜索功能。
|
29天前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
51 5
|
29天前
|
自然语言处理 算法 数据挖掘
探讨如何利用Python中的NLP工具,从被动收集到主动分析文本数据的过程
【10月更文挑战第11天】本文介绍了自然语言处理(NLP)在文本分析中的应用,从被动收集到主动分析的过程。通过Python代码示例,详细展示了文本预处理、特征提取、情感分析和主题建模等关键技术,帮助读者理解如何有效利用NLP工具进行文本数据分析。
45 2
|
29天前
|
索引 Python
python-类属性操作
【10月更文挑战第11天】 python类属性操作列举
16 1
|
1月前
|
SQL 关系型数据库 数据库
优化Web开发流程:Python ORM的优势与实现细节
【10月更文挑战第4天】在Web开发中,数据库操作至关重要,但直接编写SQL语句既繁琐又易错。对象关系映射(ORM)技术应运而生,让开发者以面向对象的方式操作数据库,显著提升了开发效率和代码可维护性。本文探讨Python ORM的优势及其实现细节,并通过Django ORM的示例展示其应用。ORM提供高级抽象层,简化数据库操作,提高代码可读性,并支持多种数据库后端,防止SQL注入。Django内置强大的ORM系统,通过定义模型、生成数据库表、插入和查询数据等步骤,展示了如何利用ORM简化复杂的数据库操作。
58 6
|
1月前
|
机器学习/深度学习 自然语言处理 大数据
使用Python进行文本情感分析
【10月更文挑战第2天】使用Python进行文本情感分析
30 3
|
2月前
|
Linux 开发者 iOS开发
Python中使用Colorama库输出彩色文本
Python中使用Colorama库输出彩色文本