Fundamentos de estilo css para wordpress
UN Hoja de estilo en cascada (CSS) es una hoja de estilo en cascada de marcado que controla el aspecto del contenido de una página web. Cada tema de WordPress única que utiliza en su blog utiliza CSS. La CSS ofrece estilo y elegancia de diseño de las etiquetas de plantilla en sus plantillas. El CSS para su tema de WordPress es aspirado a través de la plantilla de cabecera (header.php) Y se nombra style.css.
En el Panel de control, haga clic en el enlace Editor en el menú Apariencia y mirar a la plantilla de cabecera para el tema Twenty Catorce WordPress haciendo clic en el enlace de encabezado en la página de edición de temas. A encontrar la siguiente línea de código, que tira de la CSS (style.css) En la página para proporcionar el formato de los elementos de su blog:
No modificar la línea de código que tira en el style.css Archivo- lo contrario, el CSS no funcionará para su blog.
selectores CSS
Con CSS, puede proporcionar estilo a la visualización de los elementos en su blog (por ejemplo, enlaces de texto, imágenes de cabecera, tamaño de fuente y colores, márgenes de párrafo y espaciado de línea). selectores CSS contener nombres, propiedades y valores para definir qué elementos de las plantillas HTML va estilo con CSS. selectores CSS se utilizan para declarar (o seleccionar), que parte del marcado el estilo se aplica a.
| Selector de CSS | Descripción | HTML | CSS |
|---|---|---|---|
| cuerpo | Define el estilo para el cuerpo general del sitio, tales como Fuentes de color de fondo y por defecto. | body {background-color: blanco}El color de fondo en todas las páginas es de color blanco. | |
| pag | Define cómo se formatean los párrafos. | Esto es un | p {color: negro}El color de las fuentes utilizadas en todos los párrafos es negro. |
| h1, h2, h3, h4, h5, h6 | Proporciona encabezados llamativos para las diferentes secciones de su sitio. | Este es un sitio | h1 {font-weight: osada}Una fuente rodeada por el ..etiquetas HTML es negrita. |
| un | Define cómo se muestran los enlaces de texto en su sitio. | href =”http://wiley.com” gt; Wiley Publicación | a {color: red}Todos los enlaces de texto aparecen en rojo. |
Las clases y los identificadores
Puede encontrar la hoja de estilo (style.css) De la vigésimo Catorce tema por defecto en la página de edición de temas en su tablero de instrumentos. Todo en ella puede parecer extraño para ti en este momento, pero llamar su atención sobre dos artículos que se ve cuando se desplaza hacia abajo esa plantilla:
#contenido: Un tipo de selector CSS. La almohadilla (#) Indica que se trata de un CSS CARNÉ DE IDENTIDAD.
.singular: Otro tipo de selector CSS. El período (.) Indica que se trata de un CSS clase.
IDs y clases definen propiedades de peinado para diferentes secciones de su tema de WordPress. Echar un vistazo a los ejemplos de las identificaciones y las clases de la header.php plantilla en el tema Twenty Catorce WordPress. Armado con esta información, usted sabe dónde buscar en la hoja de estilo cuando se quiere cambiar el estilo de un área particular de su tema.
| HTML | Selector de CSS | Descripción |
|---|---|---|
| En este caso, el nombre del selector CSS es página. | #página | Estilos los elementos para la página CARNÉ DE IDENTIDAD en su plantilla (s). |
id = gt”-header sitio”; | # Sitio de cabecera | Estilos los elementos para la sitio de cabecera Identificación en su plantilla (s). |
class =”sitio-title” gt; | .Título del sitio | Estilos de los elementos para su Título del sitio clase en su plantilla (s), sino también sigue las reglas para la h1 valores establecidos en la CSS. |
class = gt”buscar-toggle”; | .Búsqueda-toggle | Estilos de los elementos para su Búsqueda-toggle clase en su plantilla (s). |
id = gt”-navegación primaria”; | #Navegacion primaria | Estilos los elementos para la Navegacion primaria Identificación en su plantilla (s). |
Si encuentra un elemento en el código de la plantilla que dice carné de identidad (como div id = o p id =), Busque el símbolo de hash en la hoja de estilo. Si encuentra un elemento en el código de la plantilla que dice clase (como div class = o clase p =), Busque el periodo de la hoja de estilo seguido por el nombre del selector.
Video: 2. 50 trucos con CSS - Importar estilos entre documentos [Fundamentos de CSS]
propiedades y valores CSS
propiedades CSS se asignan al nombre selector CSS. También es necesario proporcionar valores para las propiedades CSS para definir los elementos de estilo para el selector CSS particular que usted está trabajando.
En los veinte Catorce tema por defecto de WordPress, el marcado en la línea 36 en la plantilla de cabecera (header.php) es . Este ID, con el nombre sitio de cabecera, Presenta un estilo para el encabezado del sitio.
En el defecto de WordPress Veinte Catorce de estilo tema, el CSS definido para el sitio de cabecera ID es el siguiente:
# Sitio-header {position: relative-z-index: 3-}Cada propiedad CSS necesita ser seguido de dos puntos (:), Y cada valor CSS necesita ser seguido por un punto y coma (-).
Video: Modificaciones CSS para WordPress - Generalidades
El selector CSS es # Sitio de cabecera, que tiene dos propiedades:
La primera propiedad es CSS posición, que tiene el valor de relativo-.
La segunda propiedad es CSS z-index, que tiene el valor 3.
de propiedades de CSS Valor CSS Ejemplos color de fondo Define el color del fondo (como el rojo, negro, o
blanco).Margen:
id =”página” gt;
CSS: #page {background-color:
blanco}fondo Define una imagen de fondo. Margen: lt;encabezamiento
id =”bandera” gt;
CSS: # encabezado bandera {background:
url (images / header.jpg) no-repetibilidad}Familia tipográfica Define las fuentes utilizadas para el selector. Margen: CSS: body {font-family: ‘Lucida
Grande’, Verdana, Arial, Sans-Serif-}color Define el color del texto. Margen: sitio web
Título
CSS: h1 {color: blue}tamaño de fuente** Define el tamaño de la fuente utilizada para el texto. Margen: sitio web
Título
CSS: h1 {font-size: 18px;}texto alineado Define la alineación del texto (izquierda, centro, derecha o
justificado).Margen:
id = gt”envoltura”;
CSS: #wrapper {text-align:
izquierda;}