Declaración de reconocimiento chino: <meda charset = “utf-8”> html que se muestra en chino requiere esta oración.
3 Las reglas de# CSS consisten en dos partes principales: selector y una o más declaraciones:
El selector suele ser el elemento HTML que necesita para cambiar el estilo.
Cada declaración consiste en un atributo y un valor.
La propiedad es el atributo de estilo que desea establecer. Cada atributo tiene un valor. Los atributos y valores están separados por el colon.
Los elementos HTML de uso común son:
<title> </title> (título)
<p> </p> (párrafo)
<body> </body> (parte principal)
<br/> Es el elemento vacío (<br/> Definición de definición de etiqueta).
<a href=”default.htm. </a> (elemento de enlace)
Cuando el CSS es caótico, use <Syle> </style>
ahora comienza oficialmente el aprendizaje de CSS
1.ID y selector de clases
Selector de identificación Uso estándar:
<style>
#para1
// Defina un nombre llamadopara1
Tipo de identificación
// Defina un nombre llamadopara1
Tipo de identificación
{
text-align:center;
color:red;
}
</style>
<p id=”para1″>Hello World!</p>
Selector de clases Uso estándar
（1）
<style>
.center // Defina un nombre llamadocenter
Clase
Clase
{
text-align:center;
}
</style>
<h1 class = “Center”> Título centrado </h1>
<p class = “Center”> El párrafo está centrado. </p>
（2）
<style>
p.center
// Defina un nombre llamadocenter
exclusivo de la clase de elemento P
// Defina un nombre llamadocenter
exclusivo de la clase de elemento P
{
text-align:center;
}
</style>
<p class=”center”>This paragraph will be center-aligned.</p>
2.inserción de mesa de estilo CSS
Insertar tablas de estilo: hay tres formas de insertar tablas de estilo:
- (1) Mesa de estilo externo
- <head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>//mystyle.css es un estilo externo
</head>
// primero defina unose almacenan tablas de estilo mystyle.css. - (2) Mesa de estilo interno
- <head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head> - // Inserción interna<style></style>CSS El estilo de edición en él puede definir estilos de elementos múltiples.
- (3) Estilo Unido Inner
- <p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
- // Configuración de estilo en elementos separados
(4) múltiples estilos se apilarán en uno
La tabla de estilo
permite información de estilo de múltiples maneras. El estilo se puede estipular en un solo elemento HTML, en el elemento principal de la página HTML o en un archivo CSS externo. Incluso puede citar múltiples tablas de estilo externas dentro del mismo documento HTML.
secuencia de pila de capa
Cuando el mismo elemento HTML se define por más de un estilo, ¿cuál usará?
En términos generales, todos los estilos se apilarán en una nueva tabla de estilo virtual de acuerdo con las siguientes reglas, donde el número 4 tiene la más alta prioridad.
- Configuración predeterminada del navegador
- mesa de estilo exterior
- tabla de estilo interno (ubicada dentro de la etiqueta <Head>)
- estilo de pareado interno (dentro de los elementos HTML)
Por lo tanto, el estilo conjunto interno (dentro de los elementos HTML) tiene el derecho de mayor prioridad, lo que significa que dará prioridad a la siguiente declaración de estilo: la declaración de estilo en la etiqueta, la declaración de estilo en la tabla de estilo externo o el navegador en la declaración de estilo del navegador (valor predeterminado).
47 antecedentes de# CSS
3.
CSS Definición de atributo Efecto de fondo:
- background-color // Color de fondo
- background-image // Imagen de fondo
- background-repeat // estilo de fondo (horizontal o vertical, o no plano)
- background-attachment// Adjunto de fondo:Defina la imagen de fondo con el método de movimiento del eje rodante
- background-position// ubicación de imagen de fondo
(1) Color de fondo
En
CSS, el valor de color generalmente se define de las siguientes maneras:
- dieciséis entrada -ru: “# FF0000”
- RGB -Such como: “RGB (255,0,0)”
- Nombre del color: como: “Rojo”
Método de definición: Color de fondo:# B0C4DE;
background-color:rgb(255,0,0)
;
;
background-color:red
;
;
(2) Definición de imagen de fondo:
background-image:url(‘paper.gif’);
(3) Estilo de fondo:
background-image:url(‘gradient2.png’);
background-repeat:repeat-x; //
generalmente usa repetición de fondo: repetir-x; hacer la imagen horizontalmente plana; sin repetición
generalmente usa repetición de fondo: repetir-x; hacer la imagen horizontalmente plana; sin repetición
(4) Adjunto de fondo
valor: desplazamiento | fijo | heredar
Scroll: con la imagen de fondo del eje rodante de la página, se moverá
Corregido: con la imagen de fondo del eje rodante de la página, no se moverá
heredar: herencia
Valor inicial: desplazarse
herencia: no
aplicable a: todos los elementos
Antecedentes: Antecedentes .Aattachment: Adjunto.
(5) Ubicación de fondo
background-position:right top;//
representa la imagen en la parte superior derecha
representa la imagen en la parte superior derecha
Resumen
76 n.
：
’img_tree.png ‘; no plana; la ubicación de la imagen está a la derecha. Esencia Esencia Esencia
4.
formato de texto CSS
formato de texto CSS
Atributo
| Descripción | |
|---|---|
| color | establecer color de texto |
| direction | Establecer dirección de texto. |
| letter-spacing | Establecer el espacio del personaje |
| line-height | Altura de configuración |
| text-align | texto en elementos de alineación |
| text-decoration | Agregar modificación al texto |
| text-indent | en la primera línea del texto chino en chino |
| text-shadow | establecer la sombra de texto |
| text-transform | letra en el elemento de control |
| unicode-bidi | Configuración o si el texto se reescribe |
| vertical-align | Establezca la alineación vertical del elemento |
| white-space | Establezca el método de procesamiento en blanco en el elemento |
| word-spacing | Establecer la palabra espaciado |
（1）
color：
color：
Método de definición: consistente con el color de fondo.
（2）
direction: dirección de texto
direction: dirección de texto
| ltr | predeterminado. La dirección del texto es de izquierda a derecha. |
| rtl | La dirección del texto de derecha a izquierda.
Las regulaciones |
| inherit | deben heredar el valor de la propiedad de dirección del elemento principal. |
（3）
letter-spacing: espaciado de caracteres de texto
letter-spacing: espaciado de caracteres de texto
Definición: espaciado de letras: 2px;
| normal | predeterminado. No hay espacio adicional entre los personajes. |
| length | Defina el espacio fijo entre los caracteres (valores negativos permitidos).
Las regulaciones |
| inherit | deben heredar el valor de la propiedad de espacios de letras del elemento principal. |
（4）
line-height：
line-height：
Método de definición: Línea de altura: 200%; (%)
line-height: 10px；（length）
Línea de altura: 2; (número)
| normal | predeterminado. Establecer espaciado de línea razonable. |
| number | Establecer el número, este número se multiplicará con el tamaño de fuente actual para establecer el espacio de línea. |
| length | Establezca un espacio fijo. |
| % | por ciento de tono basado en el tamaño de fuente actual.
Las regulaciones de |
| inherit | deben heredar el valor del atributo de altura de línea del elemento principal. |
（5）
text-align：
text-align：
Definición: Text-Align: Derecha
| left | Establezca el texto a la izquierda. El valor predeterminado: determinado por el navegador. |
| right | Establezca el texto a la derecha. |
| center | Establezca el texto en el medio. |
| justify | para lograr el efecto de la alineación en ambos extremos.
Las regulaciones |
| inherit | deben heredar el valor del atributo de alineación de texto del elemento principal. |
（6）
text-decoration
text-decoration
Definición Método: Decoración de texto: Sobregación; Definición de color: TEXT-Decoration-color: Rojo (rojo (rojo (rojo (rojo (rojo (rojo (rojo (rojo
but：
Casi todos los navegadores convencionales no admiten la propiedad de color-decoración de texto.
Casi todos los navegadores convencionales no admiten la propiedad de color-decoración de texto.
nota:Firefox admite otro atributo que puede reemplazar el atributo, es decir, la propiedad -Moz-Graw-Decoration-Color.
）
| none | predeterminado. Defina el texto estándar. |
| underline | Defina una línea debajo del texto. |
| overline | Defina una línea en el texto. |
| line-through | Defina una línea a través del texto. |
| blink | Defina el texto parpadeante.
Las regulaciones |
| inherit | deben heredar el valor del atributo de decoración de texto del elemento principal. |
（7）
text-indent
text-indent
Método de definición: XT-Indent: 50px;
| length | Defina la sangría fija. Valor predeterminado: 0. |
| % | Defina el porcentaje del ancho del elemento principal.
Las regulaciones de |
| inherit | deben heredar el valor de la propiedad de texto-indente de texto del elemento principal. |
（8）
text-shadow
text-shadow
Método de definición: Shadow de texto: 2px 2px 8px#FF0000;
| h-shadow | debe. La posición de la sombra horizontal. Hacer valores negativos. |
| v-shadow | debe. La posición de la sombra vertical. Hacer valores negativos. |
| blur | opcional. Distancia vago. |
| color | opcional. El color de la sombra. |
（9）
text-transform
text-transform
Método de definición: texto-transformación: uppercase;
| none | predeterminado. Texto de definición con estándares con letras minúsculas y letras mayúsculas. |
| capitalize | Cada palabra en el texto comienza con letras mayúsculas. |
| uppercase | La definición solo tiene letras mayúsculas. |
| lowercase | Defina las letras no superpercasas, solo letras minúsculas. |
| inherit | Las regulaciones deben heredar el valor del atributo de transformación de texto del elemento principal. |
（10）
unicode-bidi
unicode-bidi
Método de definición:unicode-bidi: normal|embed|bidi-override|intitial|inherit;
| normal | predeterminado. No hay nivel incrustado adicional. | |
| embed | Crear un nivel incrustado adicional. | |
| bidi-override | Crear un nivel incrustado adicional. Reorencia dependiendo de la propiedad de dirección. | |
| initial | Establezca este atributo en su valor predeterminado. Verinitial。 | |
| inherit |
herede el atributo del elemento principal. Verinherit。
|
（11）
vertical-align
vertical-align
Método de definición: vertical-align: text-top;
| baseline | predeterminado. Los elementos se colocan en la línea de base del elemento principal. |
| sub | asentamiento vertical del texto de alineación. |
| super | Alineación vertical del texto de alineación |
| top | alinee la parte superior del elemento con la parte superior del elemento más alto en la fila |
| text-top | alinee la parte superior del elemento con la parte superior de la fuente del elemento principal |
| middle | Coloque este elemento en el medio del elemento principal. |
| bottom | Alinee la parte superior del elemento con el elemento mínimo en la fila. |
| text-bottom | Alinee el extremo inferior del elemento con el extremo inferior de la fuente del elemento principal. |
| length | |
| % | Use el valor porcentual de la propiedad “Línea de altura” para organizar este elemento. Hacer valor negativo.
Las regulaciones |
| inherit | deben heredar el valor de la propiedad de alineación vertical del elemento principal. |
（12）
white-space
white-space
Método de definición: White-Space: Nowrap
Valor de
| Descripción | |
|---|---|
| normal | predeterminado. El en blanco será ignorado por el navegador. |
| pre | El navegador retendrá el espacio en blanco. Su comportamiento es similar a la etiqueta <pre> en HTML. |
| nowrap | El texto no se cambiará, y el texto continuará en la misma línea hasta que se encuentre la etiqueta <br>. |
| pre-wrap | Mantenga la secuencia en blanco, pero se cambia normalmente. |
| pre-line | secuencia en blanco fusionada, pero conserva el símbolo de intercambio. |
| inherit | Las regulaciones deben heredar el valor del atributo de espacio blanco del elemento principal. |
（13）
word-spacing
word-spacing
Método de definición: espaciado de palabras: 30px
| normal | predeterminado. Defina el espacio estándar entre las palabras. |
| length | Defina el espacio fijo entre las palabras. |
| inherit | Las regulaciones deben heredar el valor del atributo de espacios de palabras del elemento principal. |
Este blog es mi JS Learning Notes -css para resolverlos primero, y continuará actualizándose en el futuro.