C31

Transcripción

C31

CSS
Css se utiliza para dar estilo a documentos HTML y XML. Los Estilos definen la forma de
mostrar los elementos HTML y XML CSS permite a los desarrolladores Web controlar el estilo
y la imagen y los formatos de las páginas.
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos.
Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento
HTML o XML. La regla tiene dos partes: un selector y la declaración.
CCS sintaxis
Declaración {color: (propiedad) blue (valor); font-size(propiedad): 12px (valor);}
Ejemplo
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hola mundo</p>
<p>Este parrafo tiene estilo CSS.</p>
</body>
Id selector
El id selector es usado para el estilo de un elemento único, El selector de id se usa como atributo
en los elementos de HTML, y es definido por el símbolo “#”. El estilo aplicado será identificado
en este caso con el id=”para1”
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
Class selector
Class selector es usado para especificar un estilo para un grupo de elementos. A diferencia del id
selector, el class selector se usa para muchos elementos
Permite asignar un estilo en particular de elementos en html de su misma clase
Class selector puede ser invocado con “.”, en el siguiente ejemplo se usará el elemento
class=”center” para centralizar un texto
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
CCS background
Las propiedades de CCS background son usadas para definir los efectos de fondo de un elemento
Background color
La propiedad Background color especifica el color de fondo de un elemento, el color de fondo de
la página es definido por body selector
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1> CSS web page!</h1>
<p>Hola mundo este es un ejemplo de color de fondo. </p>
</body>
Background image
La propiedad background-image sirve para introducir una imagen como fondo de un elemento,
por defecto la imagen se repite en lo que es todo el elemento
<style>
body {background-image:url('paper.gif');}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
CCS Texto
Text Color
La propiedad color es usada para establecer el color del texto
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>Este es el encabezado</h1>
<p>Este es un parrafo, que esta en color rojo.</p>
<p class="ex">Este texto es en color azul por la clase = ex</p>
</body>
Text alignment
La propiedad text-align es usada para asignar alineación de manera horizontal a un texto. El texto
puede ser centrado o alineado a la izquierda o derecha, o justificado
<style>
h1 {text-align: center;}
p.date {text-align: right;}
p.main {text-align: justify;}
</style>
</head>
<body>
<h1>CSS text-align </h1>
<p class="date">
Feb, 2014
</p>
<p class="main">
El trofeo de la Copa Mundial de la FIFA llegó a México,
Procedente de Guatemala para una visita de siete días que comenzará en
Monterrey
Y continuara en Ciudad de México, donde será recibida por el presidente
mexicano
</p>
</body>
Texto Decoración
La propiedad text-decoration se utiliza para fijar o quitar las decoraciones de texto.
La propiedad text-decoration se utiliza sobre todo para quitar los subrayados de enlaces para
propósitos de diseño:
<style>
a {text-decoration:none;}
</style>
</head>
<body>
<p>Link to: <a href="http://www.fime.uanl.mx/">Pagina de FIME</a></p>
</body>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
CSS Font
Font family
La font family es una propiedad de un texto se establece con la propiedad font-family.
<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
Font Style
La propiedad font-style se utiliza sobre todo para especificar texto en cursiva.
Esta propiedad tiene tres valores:
normales - El texto se muestra normalmente
cursiva - El texto se muestra en cursiva
oblicua - El texto se "inclina"
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>
CSS List
Las propiedades de la lista de CSS te permiten:
1. Establecer diferentes marcadores de elementos de lista para las listas ordenadas
2. Establecer diferentes marcadores de elementos de lista para listas desordenadas
3. Permite establecer una imagen como el marcador de elemento de lista
List
En HTML, hay dos tipos de listas:
Listas desordenadas - los elementos de la
lista están marcados con balas
Listas ordenadas - los elementos de la lista
están marcados con números o letras
Con CSS, las listas pueden ser de estilo
más, y las imágenes pueden utilizarse como
marcador de elemento de lista.
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="b"><li>Coffee</li>
<li>Tea</li><li>Coca Cola</li>
</ul><p>Example of ordered lists:</p>
<ol class="d"><li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li></ol></body>
CCS Tables
Tables borders
Para especificar los bordes de tabla en CSS, utilice la propiedad border.
El ejemplo siguiente especifica
un borde negro de mesa, th y td
elementos:
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
Collapse Borders
La propiedad border-collapse establece si los bordes de la tabla se colapsan en una sola frontera
o separados:
<style>
table
{
border-collapse:collapse;
}
table, td, th
{
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr></table></body>
Table Width and Height
Anchura y altura de una tabla se define mediante las propiedades width y height.
El ejemplo siguiente establece el ancho de la tabla a 100%, y la altura de los elementos th a
50px:
<style>
table,td,th{
}
table{
width:100%;
}
th{
height:50px;
}
</style></head><body>
<table>
<tr><th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr><td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr><tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
Table Text Alignment
El texto de una tabla está alineada con las propiedades text-align y vertical-align.
La propiedad text-align
establece la alineación
horizontal, como la izquierda,
derecha o centro:
<style>
table,td,th
{
}
td
{
text-align:right;
}
</style></head>
<body><table><tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr><td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr><tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td></tr></table></body>
Table Color
El siguiente ejemplo especifica el color de los bordes, y el texto y el color de fondo de los
elementos:
<style>
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style></head>
<body><table><tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Ahorros</th>
</tr>
<tr>
<td>Oscar</td>
<td>Garcia</td>
<td>$100</td>
</tr>
<tr>
<td>Victor</td>
<td>Pineda</td>
<td>$150</td>
</tr>
<tr>
<td>Cristian</td>
<td>Villegas</td>
<td>$300</td>
</tr>
<tr><td>Luis</td>
<td>Garcia</td>
<td>$250</td>

C31

Transcripción

Documentos relacionados

UNIVERSIDAD AUTONOMA DE BAJA CALIFORNIA

Diseño web con CSS