Universidad Autónoma De Nuevo León Preparatoria 8
Enviado por 01LuisRene • 2 de Noviembre de 2017 • Tarea • 2.100 Palabras (9 Páginas) • 230 Visitas
Las hojas de estilo CSS es traje que utilizan aplicaciones web, para muchos esto no es una novedad ya que siempre lo hemos usado.
En este artículo voy a recopilar algunos ejemplos de CSS avanzado, para dar un toque profesional a nuestros diseños, utilizando selectores de atributos, pseudo-clases y pseudo-elementos.
Para mayor información visitar los siguientes enlaces.
Combinaciones y selectores múltiples
Selectores de Atributos
Pseudo-clases y pseudo-elementos
Flexbox
Demo
Abrir en CodePen
Para que puedan apreciar mejor su uso he aquí unos ejemplos
Este ejemplo contiene código funcional.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Estilos CSS Avanzados</title>
<!--Etiquetas metas importantes-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Fuente Roboto obtenida desde Google Fonts-->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<style>
/*Aquí van tus estilos CSS*/
</style>
</head>
<body>
<h1>Estilos CSS Avanzados</h1>
<!--Selectores de Atributos-->
<div class="info">
<a class="link-info" href="https:/google.com" title="Buscador Google" target="_blank">Google</a>
<a class="link-info" href="https://01luisrene.com" title="01luisrene - Luis Rene Mas Mas" target="_blank">Blog 01luisrene</a>
<a class="link-info" href="https://developer.mozilla.org" title="Tutoriales de desarrollo" target="_blank">Developer Mozilla</a>
<a class="link-info" href="https://librosweb.com" title="Libros web de programación" target="_blank">Libros Web</a>
</div>
<!--Vinculo al Blog-->
<a href="#" class="link">Vinculo al blog 01luisrene.com</a>
<!--Sistemas Operativos-->
<ul class="sistemas-operativos">
<li><p>Windows</p></li>
<li><p>Linux</p></li>
<li><p>macOS</p></li>
<li><p>Otros</p></li>
</ul>
<!--Ejemplo de uso de los atributos data, uso de before - after-->
<p class="pago">Monto a pagar <span class="monto-pago" data-left="S/. " data-right=".00">10000000</span></p>
<!--Ejemplo para first-letter-->
<p class="poesia">
Acuérdate del día, acuérdate del mes, acuérdate del beso que nos dimos la primera vez.
</p>
<!--Ejemplo para first-line-->
<p class="texto-grande">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis inventore architecto tempore molestias ipsam reprehenderit pariatur, accusantium ducimus asperiores quasi earum laborum fugit sequi recusandae ad natus quae? Iste, et, quidem. Nihil deserunt, ratione officiis ea odio vero commodi illo eos consequuntur rem quis unde a tempore esse porro reiciendis temporibus maiores voluptas et, libero ullam in! Reprehenderit consequuntur, sint.
</p>
<!--Ejemplo para Combinadores y selectores múltiples + flexbox-->
<div class="lista">
<div class="item">
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, deleniti.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident aliquam quasi at, cupiditate!</p>
<div class="sub-item">
<h4>Lorem ipsum dolor.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
</div>
<div class="item">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="item">
<h2>Lorem ipsum dolor sit amet, consectetur.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident aliquam quasi at, cupiditate!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, nemo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad dolores tempore repellat magni ipsam, rerum!</p>
</div>
<div class="item">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus odit deleniti sequi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore est, quos, rerum deserunt soluta saepe omnis!</p>
<div class="sub-item">
<h4>Lorem ipsum dolor sit amet, consectetur.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eveniet, consectetur nihil ea quod veniam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur!</p>
</div>
</div>
<div class="item">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur sit eum, rerum eaque quaerat beatae.</p>
<p>Lorem
...