TaskBuilder前端页面CSS样式规则设置

在前端页面设计器内,点击底部的“CSS样式”选项卡,可以打开CSS样式设计器,在此查看和设计当前页面的CSS样式规则,如下图所示: 图片 1 3.3.6.1引入外部样式文件 如果要在页面中引入外部CSS文件,可以点击CSS样式设计器左上角“外部样式文件”栏右边的加号按钮,可以打开“添加外部样式文件”对话框,如下图所示: 图片 2 在该对话框中,可以从下部前端文件列表里选择当前任擎服务器web目录下的CSS样式文件,也可以直接输入其他服务器上的CSS样式文件的URL路径。 3.3.6.2设置自定义样式规则 点击CSS样式设计器左边“自定义样式规则”栏右边的加号按钮,可以打开“添加样式”对话框,如下图所示: 图片 3 在该对话框中输入样式选择器的规则,点确定按钮即可创建空白的样式规则,然后从左边样式库中拖拽样式设置项到右边的样式设计区,输入相关参数,即可实现样式规则的设置。 3.3.6.3样式规则的应用 如果设置的样式规则是类选择器(.class-name),则设置好样式规则后,点击前端页面设计器底部的“UI界面”选项卡,在UI界面设计器中选中要应用该规则的组件,然后在属性设置面板的“CSS样式类”属性的输入框里双击鼠标,打开CSS样式类选择对话框,选中要应用的样式类,点确定,即可将该样式规则应用到该组件上,如下图所示: 图片 4 3.3.7查看前端页面的HTML代码 在前端页面设计器内,点击底部的“HTML预览”选项卡,可以预览当前tfp页面编译后的HTML代码,但只能查看,不能修改,如下图所示:

图片 5

点赞
收藏

评论区

加载中...

相关推荐

iPhoneX 底部黑线布局适配

在页面的meta标签中添加viewportfitcover属性viewportfitcover页面内容填充整个屏幕在css样式中添加样式@supports(bottom:constant(safeareainsetbottom))or(bottom:env(safeareainsetbottom))footer

什么是 CSS?

原文链接:什么是CSS?CSS指层叠样式表(CascadingStyleSheets),理解为CSS样式就可以了。CSS样式有什么作用呢?比如我们在页面中添加了一个div,我想给这个div设置宽度、高度、背景色、阴影、内容字体样式等等,就是通过CSS样式来

CSS3的基础知识学习(二)

前言:CSS主要是用来修饰标签的样式、使得网页更加美观,其实css的引用有三种方式,但主要是使用链接引用,意思就是我们写一个.css的文件,将样式修饰的控制代码写在这里面,这样控制起来方便快捷。对于CSS的学习,知识点中最重要的部分就是属性和选择器,其次还有页面布局和盒子模型,下面进行学习以及代码效果演示。一、CSS的三种引入

CSS基本语法及页面引用

css基本语法及页面引用(1)css基本语法css的定义方法是:选择器{属性:值;属性:值;属性:值;}选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:/css注释ctrlshift"/"/d

CSS基本用法介绍

CSS介绍css定义如何显示HTML元素.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).CSS语法css实列每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。css注释/这是注释/CSS的几种引入方

Sass

嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{