CSS para programadores
de PL/SQL

Jorge Rimblas

Jorge Rimblas

Senior APEX Consultant

@rimblas

rimblas.com/blog

  • Oracle DB since 1995
  • APEX since it was HTMLDB in 2004
  • Always involved in web technologies
  • jrimblas in OTN Forums
  • Contributor to
    "Expert Oracle Application Express, 2nd Edition"
    with "Themes & Templates" chapter

Que tan capaz eres con
el PL/SQL de Oracle?

Y que tal con JavaScript?

y con CSS?

$

jQuery

$ === apex.jQuery


$("div");

apex.jQuery("div");


CSS

Todo es una caja

Especificidad CSS

En CSS

el reto mas importante

Box Model

Inspector

 

Content

 

Padding

Border

Margin

<div>Content</div>
div {
    width: 320px;  height: 50px;
    padding: 10px;


}
div {
    width: 320px;  height: 50px;



}
div {
    width: 320px;  height: 50px;
    padding: 10px;
    border: 5px solid gray;

}
div {
    width: 320px;  height: 50px;
    padding: 10px;
    border: 5px solid gray;
    margin: 7px; 
}
div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

Cual es el ancho total?

Anatomia

de las reglas de CSS

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

selector

propiedad

valor

propiedades

valor

jQuery selector

div {
    padding: 10px;
}
div {
    padding: 10px 10px 10px 10px;
}

top/arriba

bottom/abajo

right
derecha

left
izquierda

abreviatura

div {
    padding: 5px 10px;
}
div {
    padding: 5px 10px 5px 10px;
}

top

bottom

right

left

top

right

bottom

left

div {
    padding: 5px 10px 5px 10px;
}

top

right

bottom

left

div {
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
}

Selectores

select *
from emp
where deptno = 20

SQL "Selector"

Que estamos buscando?

select element
from {HTML de hoja}

SQL

* {
 ...
}

CSS

Consigue Todo

select element
from {HTML de Hoja}
where id = 'PK'

SQL

#PK {
 ...
}

CSS

Obtener via #ID

<div id="emps" class="t-Region">
  ...
</div>

HTML

#emps {
 color: red;
}

CSS

Obtener via #ID

select element
from {HTML de Hoja}
where job = 'SALES'

SQL

.sales {
 ...
}

CSS

Obtener via .clase

<div id="emps" class="t-Region">
  ...
</div>

HTML

.t-Region {
 color: red;
}

CSS

Obtener via .clase

<td class="t-Report-cell" headers="EMPNO">
  ...
</td>

HTML

td[headers="EMPNO"] {
 color: red;
}

CSS

Obtener via attributo []

~=
|=
^=
$=
select element
from {HTML de hoja}
where deptno = 20

SQL

div {
 ...
}

CSS

Obtener via elemento

<div id="emps" class="t-Region">
  ...
</div>

HTML

div {
 color: red;
}

CSS

Obtener via elemento

<div id="emps" class="t-Region t-Region--removeHeader">
  ...
</div>
.t-Region {
 background-color: white;
}
#emps {
 background-color: gray;
}
div {
 background-color: blue;
}

<div id="emps" class="t-Region t-Region--removeHeader">
  ...
</div>
.t-Region {
 background-color: white;
 border: 1px solid black;
}
.t-Region {
 background-color: gray;
}

<div id="emps" class="t-Region t-Region--accent5" 
     style="background-color: green;">
  ...
</div>
.t-Region {
 background-color: white;
}
.t-Region.t-Region--accent5 {
 background-color: gray;
}
#emps {
 background-color: blue;
}

.t-Region {...}

$(".t-Region");
.t-Region.t-Region--accent5 {...}

$(".t-Region.t-Region--accent5");

CSS

jQuery

CSS

jQuery

#emps {...}

$("#emps");

CSS

jQuery

$(".t-Region").hide();
$(".t-Region").remove();
$(".t-LinksList-item").toggleClass("is-current");
$("#emp").find("li").removeClass("is-current");

jquery.com

Especificidad CSS

(CSS Specificity)

Attributos "style" Más especifico
ID
Class, Attribute
Elements Menos específico

* https://css-tricks.com/specifics-on-css-specificity/

<div id="emps" class="t-Region t-Region--accent5" 
     style="background-color: green;">
  ...
</div>
.t-Region {
 background-color: white!important;
}
.t-Region.t-Region--accent5 {
 background-color: gray;
}
#emps {
 background-color: blue;
}

!Important

La Victoria automática

Donde va
el CSS
en APEX

Página CSS: Archivo o En linea

Util para

  • CSS específico de página
    • Elementos
    • Botones
    • Sobre escribir CSS
    • Columnas de Informes

Acumulador de Temas:

CSS Personalizado

Ventajas

  • Disponible en todas las páginas
  • Minimizado
  • Rápido y fácil de actualizar

Contras

  • Se pierde cuando cambias estilos
    • Es recomendable tenerlo en archivo

Global: Interfaz del Usuario

Archivo de Interfaz de Usuario

La mejor alternativa!