Acerca de las propiedades específicas de CSS: URL del manual de referencia de CSS
Tabla de contenido
Tabla de contenido
1. Propiedades de estilo de fuente CSS
tamaño de fuente: tamaño de fuente
familia de fuentes: estilo de fuente
peso de la fuente: peso de la fuente
estilo de fuente: estilo de fuente
Selector de etiquetas (selector de elementos)
Convención de nomenclatura CSS
Selector de nombre de clase múltiple
Selector comodín [generalmente no se usa, solo para entender]
(1) Enlace de selectores de pseudoclase
(2) Selector de pseudoclase estructural
(3) Selector de pseudoclase de destino
3. Propiedades de apariencia CSS
alineación de texto: alineación horizontal
sangría de texto: sangría de primera línea
espaciado entre letras: espaciado entre palabras
espacio entre palabras: espacio entre palabras
Color translúcido (CSS3 nuevo)
Cuarto, la introducción de hojas de estilo CSS
Estilos en línea (estilos en línea)
Elementos a nivel de bloque (block-level)
Elementos en línea (nivel en línea)
Elementos de bloque en línea (bloque en línea)
Pantalla de conversión de modo de etiqueta
selector de elementos secundarios
Selectores de pseudoelementos (CSS3)
6. Especificación de escritura CSS
Especificación de espacios en blanco
Ocho, las tres características principales de CSS
Nueve, modelo de caja CSS (énfasis)
Bordes de líneas finas para tablas
Borrar margen predeterminado del elemento
Los elementos de bloque adyacentes se fusionan verticalmente
Colapsar márgenes verticales de elementos anidados
Estabilidad del diseño del modelo de caja
Modelo de caja CSS3 (nuevas propiedades de CSS3)
Características flotantes (puntos pesados y difíciles)
1. Propiedades de estilo de fuente CSS
tamaño de fuente: tamaño de fuente
| unidad de longitud relativa | ilustrar |
| ellos | Equivalente al tamaño de fuente del texto en el objeto actual |
| píxeles | Pixel [el más utilizado, recomendado] |
| unidad absoluta de longitud | ilustrar |
| en | pulgada |
| cm | centímetro |
| milímetro | milímetro |
| punto | punto |
familia de fuentes: estilo de fuente
p {
font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，等等＊／
font-size: 14px;／＊ctrl＋／是注释快捷键＊／
color: pink;
}
Fuentes CSS Unicode
Establecer el nombre de la fuente en CSS puede escribir directamente en chino, pero cuando la codificación del texto (GB2312 UTF-8, etc.) no coincide, producirá errores distorsionados y el sistema xp no es compatible con el chino similar a Microsoft Yahei.
Solución 1: use inglés en su lugar. familia de fuentes: "Microsoft Yahei";
Solución 2: use fuentes codificadas Unicode directamente en CSS
[Sugerencia: use solo "Song Ti" y "Microsoft Yahei" para fuentes Unicode]
peso de la fuente: peso de la fuente
Además de las etiquetas <b> y <strong> en HTML, también puede usar CSS para completar el efecto de negrita de la fuente, pero CSS no tiene semántica.
El atributo font-wieght define el grosor de la fuente, y los valores del atributo incluyen normal, negrita, más negrita, más claro y números del 100 al 900.
[Generalmente prefieren usar números, número 400=normal, número 700=negrita]
strong{
font-weight: normal;/* Hacer que la negrita de la etiqueta no esté en negrita*/
}
estilo de fuente: estilo de fuente
Además de las etiquetas <i> y <em> en HTML, también puede usar CSS para completar el efecto de inclinación de la fuente, pero CSS no tiene semántica.
normal: especifica el estilo de fuente del texto como una fuente normal
cursiva: especifica el estilo de fuente del texto en cursiva. Para fuentes especiales que no están en cursiva, se aplicará oblicua si se va a utilizar la apariencia en cursiva
oblicua: especifica el estilo de fuente del texto como una fuente oblicua. Incline artificialmente el texto en lugar de seleccionar caracteres en cursiva en la fuente [no se usa comúnmente]
em { font-style: normal; ／＊Ponga la cursiva envuelta en la etiqueta hasta que quede, ＊／}
fuente: estilo completo [clave]
h1 {
fuente: cursiva negrita 14px "microsoft yahei";/*Los dos primeros elementos se pueden omitir, los dos últimos se deben conservar y el orden no se puede cambiar*/
}
Depuración con Chrome
2. Selector [tecla]
Para aplicar un estilo CSS a un elemento HTML específico, primero debe obtener el elemento En CSS, la parte de la regla de estilo que realiza esta tarea se denomina selector.
Selector de etiquetas (selector de elementos)
El selector de etiquetas se refiere a usar etiquetas HTML como selectores y clasificarlas por etiquetas para unificar rápidamente los estilos para un mismo tipo de etiquetas en la página, la desventaja es que no se pueden diseñar estilos diferenciados.
etiqueta{
atributo1:valoratributo1;
atributo2:valoratributo2;
}
elemento{
atributo1:valoratributo1;
atributo2:valoratributo2;
}
seleccionador de clase
Defina estilos individuales o idénticos para los elementos.
<head>
<style>
h1 {
color:palevioletred;
}
.yinshi { /* 加 “.”声明类样式 */
color: blue;
}
.shenle {
color: orangered;
}
.xinba {
color: gray;
}
</style>
</head>
<body>
<div class="yinshi">银时</div><!-- 此处引用类样式 -->
<div class="shenle">神乐</div>
<div class="xinba">新八</div> Convención de nomenclatura CSS
Convención de nomenclatura del selector de clase
Manual de especificación de desarrollo front-end web descarga de pdf
Selector de nombre de clase múltiple
Agregue múltiples nombres de clase a la etiqueta para lograr una selección de propósito múltiple
<head>
<style>
.c-blue { /* 加 “.”声明类样式 */
color: blue;
}
.c-orange {
color: orangered;
}
.c-gray {
color: gray;
}
.font20 {
font-size: 20px;
}
</style>
</head>
<body>
<div class="c-blue font20">银时</div><!-- 此处引用类样式 -->
<div class="c-orange">神乐</div>
<div class="c-gray font20">新八</div><!-- 多类名之间用空格隔开 ，此时可以既变颜色又加粗-->
</body>
selector de identificación
Combinando memorización con selectores de clase
#black {
color: black;
}
<div id="black">土方十四郎</div>
<!--区别于类选择器的“.”开始，id选择器以“#”开头命名，在下方标签处引用-->La diferencia entre el selector de clase y el selector de id.
El selector de clase se puede usar repetidamente y hacer referencia a varias etiquetas, lo que equivale al nombre de una persona.
El selector de identificación es único, lo que equivale a un número de identificación y solo se puede usar una vez
Selector comodín [generalmente no se usa, solo para entender]
El selector comodín está representado por "*", que es el más aplicable de todos los selectores y puede coincidir con todos los elementos de la página. El formato de sintaxis básica es el siguiente
* {
Atributo 1: valor de atributo 1;
atributo 2: valor de atributo 2;
}
<head>
<style>
* { /*星号代表所有选择器*/
color: #0000FF;
font-size: 20px;
}
</style>
</head>
<body>
<p>银魂</p>
<div>银魂</div>
<strong>银魂</strong>
<i>银魂</i>
<span>银魂</span><!--这是最近正在重刷银魂的博主-->
</body>selector de pseudo clase
Tienden a agregar efectos a ciertos selectores, como agregar efectos a enlaces
(1) Enlace de selectores de pseudoclase
Cambiar el orden puede tener como consecuencia que no se puedan realizar todos los efectos.
<head>
<style>
a:link {
/* 未访问的链接 */
color: cornflowerblue;
font-size: 20px;
font-weight: 700;
}
a:visited {
/* 访问过一次的链接 */
color: darkorchid;
font-size: 20px;
font-weight: 700;
}
a:hover {
/* 鼠标移动到连接上时链接的变化 */
color: tomato;
font-size: 20px;
font-weight: 700;
}
a:active {
/* 选定的链接，我们按住鼠标别松开时的状态 */
color: green;
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<div>
<a href="#">零元购</a>
</div>
</body>La siguiente es la abreviatura del selector de pseudoclase de enlace [la forma más común de escribir]
<head>
<style>
a {
/* a是标签选择器，指所有的链接 */
color: cornflowerblue;
font-size: 20px;
font-weight: 700;
}
a:hover {
/* ：hover是链接伪类选择器 */
color: tomato; /* 鼠标经过，由蓝色变红色 */
}
</style>
</head>
<body>
<div>
<a href="#">零元购</a>
</div>
</body>(2) Selector de pseudoclase estructural
<head>
<style>
li:first-child { /* 第一个孩子 */
color: orangered;
}
li:last-child { /* 最后一个孩子 */
color: green;
}
li:nth-child(3) { /* 第三个孩子，括号写几就是第几个孩子 */
color: mediumpurple;
}
</style>
</head>
<body>
<ul type="square">
<li>长虹剑</li>
<li>冰魄剑</li>
<li>紫云剑</li>
<li>奔雷剑</li>
<li>青光剑</li>
<li>雨花剑</li>
<li>旋风剑</li>
</ul>
</body>otro uso
li:nth-child(even) {/* 可以选择所有偶数（even）孩子标签 */
color: orange;
}
li:nth-child(odd) {/* 可以选择所有奇数（odd）孩子标签 */
color: skyblue;
}
li:nth-child(n) {
color: aqua;/* 选择全部孩子 ，里边还可以写2n，3n等等*/
}(3) Selector de pseudoclase de destino
selector de pseudoclase de destino de destino: el selector se puede usar para seleccionar el elemento de destino actualmente activo
:target {
color: red;
}3. Propiedades de apariencia CSS
atributo de color
altura de línea: interlineado
Se utiliza para establecer el espacio entre líneas, también conocido como altura de línea. Generalmente, es 7 u 8 píxeles más grande que el tamaño de la fuente, es decir, px.
p {
line-height: 40px;
}alineación de texto: alineación horizontal
centro: centrado
izquierda: alineación izquierda
derecha: alineación derecha
sangría de texto: sangría de primera línea
Todos los párrafos tendrán sangría, se recomienda usar em como unidad, 1em=el ancho de una palabra
p {
text-indent: 2em;/* 此时2em就是两个字的宽度 */
}espaciado entre letras: espaciado entre palabras
Espacio entre caracteres, se permiten números negativos, el valor predeterminado es normal
div {
letter-spacing: 2px;
}espacio entre palabras: espacio entre palabras
inválido para chino
Color translúcido (CSS3 nuevo)
color:rgba(r,g,b,a), a se refiere a alfa, es decir, transparencia, el valor está entre [0,1], el parámetro no se puede omitir
div {
color: rgb(0,200,173,0.5);
}/*测试下来rgb和rgba效果一样，不知道是不是兼容度提高了，为了规范依然使用rgba*/Sombra de texto (CSS3)
sombra de texto: posición horizontal, posición vertical, distancia de desenfoque, color de la sombra; [un total de cuatro parámetros] se deben escribir los dos primeros parámetros, los dos últimos se pueden omitir
h1{
text-shadow: 1px 2px 4px rgba(183,23,48,0.5);
/* 参数之间用“空格”隔开，而不是逗号
前两个参数必须有，后两个可以省略 */
}Atajo de Hbuilder
| div*10 genera rápidamente 10 etiquetas |
| ul>li genera rápidamente etiquetas de clase padre-hijo |
| div+p genera rápidamente etiquetas hermanas, etiquetas al mismo nivel |
| Tecla .red+tab para generar rápidamente div con nombre de clase |
| #red+tab Genera rápidamente un div con un nombre de identificación |
| Ejemplos: .nav+.header+.main>.left+.right |
Cuarto, la introducción de hojas de estilo CSS
hoja de estilo interna
El estilo interno consiste en descargar de forma centralizada el código del encabezado del documento HTML y definirlo con la etiqueta de estilo. También puede colocar etiquetas de estilo en cualquier parte del documento.
type="text/CSS" se puede omitir en HTML5, pero está más estandarizado para escribir.
Estilos en línea (estilos en línea)
El estilo en línea, también conocido como estilo en línea, estilo en línea, establece el estilo del elemento a través del atributo de estilo de la etiqueta. Solo apto para casos con menos estilos.
<nombre de etiqueta estilo="atributo 1: valor de atributo 1; atributo 2: valor de atributo 2"> contenido </nombre de etiqueta>
hoja de estilo externa
El estilo externo consiste en colocar todos los estilos en uno o más archivos de hojas de estilos externos con la extensión .CSS y conectarlos al documento HTML a través de la etiqueta de enlace. [el enlace es una sola etiqueta]
Realice completamente la separación de estructura y estilo.
<head>
<link rel="stylesheet" href="style.css"/>
</head>
Comparación de tres estilos.
Elementos a nivel de bloque (block-level)
Cada elemento generalmente ocupa una línea completa o varias líneas por sí mismo, y se pueden establecer propiedades de altura, ancho y alineación para él.
Elementos comunes a nivel de bloque: <h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>, etc.
⭐Sobre las características de los elementos a nivel de bloque, debe poder dictar
Elementos en línea (nivel en línea)
No ocupa un área independiente, y solo depende de su propio tamaño y tamaño de imagen para soportar la estructura. Por lo general, las propiedades de ancho, alto y alineación no se pueden establecer.
Elementos en línea comunes: <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span>
⭐Sobre las características de los elementos de la línea, debe poder dictar
Aviso:
1. Solo el texto es un párrafo, por lo que los elementos de nivel de bloque no se pueden colocar en la etiqueta p . De manera similar, ningún otro elemento de nivel de bloque se puede colocar en <h1>~<h6><dt>.
2. No se pueden colocar más enlaces dentro del enlace <a>.
Elementos de bloque en línea (bloque en línea)
Pantalla de conversión de modo de etiqueta
Cinco, selector compuesto CSS
selector de intersección
Un selector de intersección consta de dos selectores, el primero de los cuales es un selector de etiqueta. El segundo es un selector de clase y no puede haber espacios entre los dos selectores.
El selector de intersección significa ambos... y..., y se usa relativamente rara vez
Por ejemplo: p.one representa una etiqueta de párrafo con el nombre de clase uno
selector de unión
Si los estilos definidos por algunos selectores son exactamente iguales, o parcialmente iguales, utilice el selector de unión para definir el mismo estilo CSS para ellos.
Siempre que estén separados por comas, todos los selectores ejecutarán los siguientes estilos.
<head>
<style>
p,
h1,
.toshi {
color: aliceblue;
}
</style>
</head>
<body>
<p>春江花月夜</p>
<h1>春江潮水</h1>
<div class="toshi">海上明月</div>
</body>selector de descendientes
También conocido como selector de contención, se utiliza para seleccionar descendientes de un elemento o grupo de elementos.
El método de escritura es escribir la etiqueta exterior en el frente y escribir la etiqueta interior en la parte posterior, separada por un espacio en el medio.
<head>
<style>
.songyang div {
color: darkcyan;
font-size: 16px;
}/*只有.songyang下的div才由效果，外边的div不变*/
</style>
</head>
<body>
<div class="songyang">
<div>坂田</div>
<div>桂</div>
<div>高杉</div>
</div>
<div>近藤</div>
</body>selector de elementos secundarios
Solo puede seleccionar los elementos secundarios de un determinado elemento y los nietos del siguiente nivel, y los bisnietos no se pueden seleccionar. El método de escritura es: etiqueta principal > etiqueta secundaria , generalmente deje un espacio en los lados izquierdo y derecho del símbolo
<head>
<style>
.nav>li{
color: pink;
} /*不知道为什么单独写这个不成功*/
.nav > li > .two > li{
color: black;
}/*必须加上这个才能区分一二级菜单*/
</style>
</head>
<body>
<ul class="nav">
<li>一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>selector de atributos
<head>
<meta charset="utf-8">
<title></title>
<style>
a[title] {/* 属性选择器用中括号来表示，选出有title的 */
color: #008000;
}
input[type=text]{
color: red;/* 只有type是text的才显示红色 */
}
</style>
</head>
<body>
<a href="#" title="浏览器">Chrome</a>
<a href="#" title="浏览器">edge</a>
<a href="#">firefox</a>
<a href="#">Safari</a>
<a href="#">QQ</a>
<input type="text"value="这是一个文本框">
<input type="submit">
<input type="reset">
</body><head>
<meta charset="utf-8">
<title></title>
<style>
div[class^=font]{ /* class^=font表示以font开始 */
color: deeppink;
}
div[class$=nav]{ /* class$=nav表示以nav结束 */
color: aquamarine;
}
div[class*=TB]{ /* class*=TB表示TB在任意位置都行 */
color: orange;
}
</style>
</head>
<body>
<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="pdd-nav">属性选择器</div>
<div class="jd-nav">属性选择器</div>
<div class="news-TB-heater">属性选择器</div>
<div class="news-TB-footer">属性选择器</div>
</body>Selectores de pseudoelementos (CSS3)
::primera letra, seleccione la palabra o los caracteres en la primera línea de texto (como chino, japonés y coreano)
::first-line, seleccione la primera línea de texto, no fijo, cambia según el tamaño de la ventana del navegador
::selección, puede cambiar el estilo del texto seleccionado, como cambiar el color del texto blanco sobre el fondo azul a rosa, etc.
<style>
p{
line-height: 35px;
}
::first-letter{
color: aquamarine;/*英文是一个单词，中文是一个字，日文是一个假名*/
}
</style>
</head>
<body>
<p>
なまりの空(そら)【阴霾的天空】
重(おも)く垂(た)れ込(こ)み【垂下凝重的幕帘】
真白(ましろ)に淀(よど)んだ【沉入苍白之中】
太阳(たいよう)が砕(くだ)けて【将太阳斩碎】
耳鸣(みみな)りを尖(とが)らせる【让我大声尖叫】
</p>
</body>
.dome: selector de clases
primer hijo: selector de pseudoclase
primera letra: selector de pseudoelemento
::antes 和 ::después
<head>
<style>
div::before{
content: "门前";/* 必须和content一起使用，记得加引号“” */
color: #FF0000;
}
div::after{
content: "游过一群鸭";
color: skyblue;
}
</style>
</head>
<body>
<div>大桥下</div>
</body>6. Especificación de escritura CSS
Especificación de espacios en blanco
Debe haber un espacio entre el selector y " { ".
No se permiten espacios entre el nombre del atributo y el siguiente :, y debe haber espacios entre el : y el valor del atributo.
Ejemplo:
.nav a { color: rojo; }
especificación del selector
Cuando una regla contiene varios selectores, cada declaración de selector debe ocupar una línea separada.
Ejemplo:
p,
h1,
.toshi { color: aliceblue; }
especificación de atributos
Las definiciones de propiedad deben comenzar en una nueva línea.
Ejemplo:
div::after{ content: "Nadar a través de una bandada de patos"; color: azul cielo; }
Siete, fondo CSS (fondo)
imagen de fondo (imagen)
Se debe hacer referencia a las imágenes del mismo proyecto y es posible que no estén en la misma carpeta. Si se hace referencia a imágenes de diferentes proyectos, se producirá un error.
El tamaño de la imagen de fondo solo se puede cambiar con background-size
div {
height: 800px;
width: 600px;
background-color: pink;
background-image: url("图片/1.png");
}
/*问题：1、地址路径按理说不用加引号，加了反倒会引起浏览器兼容性问题，但是必须要加引号才能在我的浏览器上显示出来*/
Mosaico de fondo (repetir)
El valor predeterminado es el mosaico, y se requiere no reprat para cancelar el mosaico.
Posición de fondo (posición)
gramática:
posición de fondo：longitud || longitud
posición de fondo：posición || posición
parámetro:
longitud: el valor de longitud compuesto por porcentaje, número de coma flotante e identificador de unidad. ver unidades de longitud
posición: arriba, centro, abajo, izquierda, centro, derecha
Para establecer la posición de la imagen de fondo del objeto recuperado, primero se debe especificar el atributo de imagen de fondo. El valor predeterminado es (0% 0%). Si solo se especifica un valor, ese valor se aplica a la abscisa y la ordenada por defecto es 50%. Si hay dos valores, el segundo valor se aplica a la ordenada.
Use nombres de ubicación para cambiar la posición de la imagen, la posición predeterminada es la esquina superior izquierda
No hay orden para los sustantivos de ubicación, lo hará el que llegue primero. Si solo hay un sustantivo de ubicación, el otro está predeterminado en el centro
div {
height: 800px;
width: 700px;
background-color: pink;
background-image: url("女儿.png");
background-repeat: no-repeat;
background-position: right top;
}Cambiar la posición de la imagen con unidades precisas
El primer valor debe ser la coordenada x y el segundo valor debe ser la coordenada y.
div {
height: 800px;
width: 700px;
background-color: pink;
background-image: url("女儿.png");
background-repeat: no-repeat;
background-position: 15px 30px;
}Uso mixto
div {
height: 800px;
width: 700px;
background-color: pink;
background-image: url("女儿.png");
background-repeat: no-repeat;
background-position: center 30px;
}archivo adjunto de fondo
El valor predeterminado es desplazamiento
gramática:
archivo adjunto de fondo：desplazamiento | fijado
parámetro:
scroll: la imagen de fondo se desplaza con el contenido del objeto
fijo: la imagen de fondo es fija
abreviatura de fondo
Similar a la abreviatura de fuente, pero no hay un estándar obligatorio para el pedido, las sugerencias generales son las siguientes
fondo: color de fondo, dirección de la imagen de fondo, mosaico de fondo, desplazamiento de Beijing, posición de fondo
background: pink url("女儿.png") no-repeat fixed center 30px;Fondo transparente (CSS3)
gramática:
fondo：rgba(0，0，0，0.3);
Translucidez de fondo significa que el fondo de la caja es translúcido y el contenido dentro de la caja no se ve afectado.
Puede usar rgba para establecer la translucidez tanto del texto como del borde.
Escalado de fondo (CSS3)
gramática:
tamaño de fondo：***px | ***% | contener | cubrir
Generalmente, cuando se usa px, solo se cambia un valor para evitar el zoom. Cuando se usa %, significa que la imagen general se reduce al porcentaje de la imagen original.
cubierta: ajusta automáticamente la relación de zoom para garantizar que la imagen siempre llene el área de fondo. Si hay un desbordamiento, se ocultará. La imagen se escala proporcionalmente para garantizar que el ancho y la altura coincidan con el tamaño del cuadro al mismo tiempo.
contienen: ajuste automáticamente la relación de zoom, pero asegúrese de que la imagen siempre se muestre completamente en el área de fondo. Siempre que el ancho y la altura tengan el mismo tamaño que el cuadro Manju, ya no se escalará. La integridad de la imagen está garantizada y no faltará nada, pero una parte de la caja quedará expuesta y no habrá cobertura de imagen de fondo.
Múltiples fondos (CSS3)
- Un elemento puede establecer múltiples imágenes de fondo
- Separe cada conjunto de atributos con comas
- Si existe una relación superpuesta entre las imágenes de fondo establecidas, la imagen de fondo anterior se superpondrá a la imagen de fondo posterior.
- Para evitar que el color de fondo cubra la imagen, el color de fondo suele definirse en el último grupo
div {
height: 800px;
width: 700px;
background: url("女儿.png") no-repeat 10px 20px/300px,
url(001.jpg) no-repeat right 20px/300px,/*位置/大小*/
url(troye.jpg) no-repeat 10px bottom/300px pink;
}texto en relieve
<head>
<style>
body {
background-color: #ccc;
}
div {
color: #CCCCCC;
font: 700 80px "微软雅黑";
}
div:first-child {
/* text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 */
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
div:last-child {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div >
<div>我是凸起的文字</div>
<div class="second">我是凹下的文字</div>
</div>
</body>Aquí surge un problema: el último hijo no pudo llamar
Solución: Los dos divs deben estar bajo el div principal para usar :last-child, de lo contrario, solo se puede usar :first-child.
El último elemento bajo la clase principal debe seleccionarse cuando se usa.
Además: nth-child(n) se puede usar con éxito sin tener que estar bajo la etiqueta de clase principal
text-decoration: Normalmente se utiliza para modificar el efecto de decoración del enlace.
Consejos de uso: en una línea, establezca la altura de la línea igual a la altura del cuadro para centrar el texto verticalmente.
Ocho, las tres características principales de CSS
CSS en cascada
La llamada cascada se refiere a la superposición de múltiples estilos CSS.
Es la capacidad de un navegador para manejar conflictos. Si un atributo se establece en el mismo elemento a través de dos selectores idénticos, entonces un atributo se superpondrá al otro en este momento. Este es un conflicto de estilo. En caso de conflicto de estilo, prevalecerá el último estilo.
1. Conflictos de estilo, seguir el principio de proximidad. Se ejecuta el estilo más cercano a la estructura.
2. Los estilos no entran en conflicto y no se conectarán en cascada.
herencia CSS
La llamada herencia significa que al escribir una hoja de estilo CSS, las etiquetas secundarias heredarán algunos estilos de la etiqueta principal, como el color del texto y el tamaño de fuente.
El uso adecuado de la herencia puede simplificar el código y reducir la complejidad de los estilos CSS. Los elementos secundarios pueden heredar estilos de elementos principales: aquellos que comienzan con atributos de texto, fuente, línea y color.
prioridad CSS
A la hora de definir estilos CSS, suele ocurrir que se aplican dos o más reglas a un elemento, y en este momento habrá un problema de prioridad.
En cuanto al peso de CSS, se calcula con un conjunto de fórmulas, que es un estándar para medir la prioridad de CSS, las especificaciones específicas son las siguientes:
Los cuatro niveles son de izquierda a derecha, un nivel es mayor que un nivel, no hay sistema decimal entre dígitos y los niveles no se pueden superar.
El peso del estilo heredado es 0. No importa cuánto sea el peso del elemento principal, cuando lo hereda la subclase, el peso es 0 y el elemento definido por el elemento secundario anulará el estilo heredado.
Nueve, modelo de caja CSS (énfasis)
El llamado modelo de cuadro consiste en considerar los elementos de la página html como un cuadro rectangular, y cada rectángulo se compone del contenido del elemento, el relleno, el borde y el margen.
Todos los elementos del documento (etiquetas) generarán un cuadro rectangular, al que llamamos element box (caja de elementos), que describe la posición y el tamaño de un elemento del documento en el resumen del diseño de la página web. Por tanto, además de tener su propio tamaño y comportamiento, cada casilla también afecta al tamaño y posición de otras casillas.
borde de caja (borde)
gramática:
borde：ancho del borde || estilo borde || color del borde
Propiedad de borde uno: establezca el estilo de borde (border-style)
El estilo de borde se usa para definir el estilo de borde en la página, comúnmente usado de la siguiente manera:
ninguno: sin borde, ignora el ancho de todos los bordes (predeterminado)
sólido: el borde es una sola línea sólida (la más utilizada)
discontinua: el borde es una línea discontinua
punteado: el borde es una línea punteada
double: El borde es una línea sólida doble (se usa menos)
border-style, border-width, border-color, al establecer los atributos de los cuatro lados, está en el sentido de las agujas del reloj de arriba, derecha, abajo e izquierda .
div {
border-color: red blue springgreen black;
border-style: dashed double solid dotted;
border-width: 1px 5px 10px 30px;
}Al escribir juntos, sepárelos con espacios.
div:nth-child(4) {
border-top: 3px solid orangered;/*上边框，宽度 样式 颜色*/
border-bottom: blueviolet 3px solid;/*下边框 颜色 宽度 样式*/
/*样式顺序不影响表现*/
}El atributo de borde no se hereda , y los atributos que se pueden heredar se refieren a la parte sobre la herencia.
La diferencia entre el espacio entre celdas y el relleno de celdas:
La primera es la distancia entre dos celdas y la segunda es la distancia entre el texto de la celda y el borde.
el espacio entre celdas indica el espacio entre las celdas de la tabla y el valor del parámetro es un número
cellpadding indica la distancia entre el texto de la tabla y el borde de la tabla
Ambos atributos se aplican dentro de la etiqueta <table>
Bordes de líneas finas para tablas
mesa {
borde-colapso: colapso;
}
border-collapse: colapsar significa que los bordes se fusionan.
Bordes redondeados (CSS3)
gramática:
border-radius: esquina superior izquierda esquina superior derecha esquina inferior derecha esquina inferior izquierda;
orden en el sentido de las agujas del reloj
<style>
div {
height: 400px;
width: 400px;
border: 1px solid red;
}
div:first-child {
border-radius: 10px;
/* 一个数值表示四个角都是相同的10px */
}
div:nth-child(2) {
border-radius: 50%;
/*取宽度和高度的50%，会变成一个圆形*/
}
div:nth-child(3) {
border-radius: 10px 40px;
/* 取对角线，左上角和右下角是10px，右上角和左下角是40px */
}
div:nth-child(4) {
border-radius: 10px 40px 80px;
/* 左上角10 右上角和左下角40 右下角80 */
}
</style>relleno
La propiedad de relleno se utiliza para establecer el margen interior, que se refiere a la distancia entre el contenido y el borde.
El número de valores seguidos por padding es diferente, y el significado es diferente.La dirección representada por los dos valores de padding debe estar separada del radio.
| numero de valores | Expresar significado (los márgenes se refieren a los márgenes internos) |
| 1 valor | márgenes izquierdo y derecho |
| 2 valores | El primero representa los márgenes superior e inferior, y el segundo representa los márgenes izquierdo y derecho. |
| 3 valores | Margen superior, Margen izquierdo y derecho, Margen inferior |
| 4 valores | margen superior, margen derecho, margen inferior, margen izquierdo |
margen
La propiedad margin se utiliza para establecer el margen exterior. Establecer márgenes crea "espacios en blanco" entre elementos que normalmente no se pueden usar para colocar otro contenido.
margen: margen superior, margen derecho, margen inferior, margen izquierdo
El orden de los valores es el mismo que el relleno.
Márgenes para centrar la caja
Se deben cumplir dos condiciones para que una caja esté centrada horizontalmente:
1. Debe ser un elemento a nivel de bloque
2. La caja debe especificar el ancho (ancho)
Luego configure los márgenes izquierdo y derecho en automático para centrar los elementos de nivel de bloque horizontalmente.
header {
width: 900px;
height: 120px;
background-color: black;
margin: 0 auto;/* 上下不管，左右是auto就能居中 */
}En los casos reales, la altura de la barra de navegación debe ser un número impar . Si la altura de la fila es par, habrá un problema de píxel de borde en blanco. Al usar un: hover, los bloques de la fila no pueden cambiar de color y habrá un área en blanco de 1px en los bordes superior e inferior
Aviso:
"margin:0 auto;" no funciona para el bloque en línea.
Centrar con "margen: 0 auto;" no funciona, aunque "bloque en línea" se puede especificar con un valor numérico en primer lugar.
"text-align: center;" no convierte al elemento principal en un selector
La regla básica de "text-align: center;" es "selector es el elemento principal".
Si desea centrarlo, debe crear un elemento principal.
Al usar margin: 0 auto en un elemento de bloque en línea, también usar text-aline: center en su elemento principal para lograr el centrado
La imagen insertada <img> también se puede considerar como un cuadro, y la posición se puede cambiar con margen y relleno, pero la posición de la imagen de fondo solo se puede cambiar con background-position.
En circunstancias normales, la imagen de fondo es adecuada para algunos íconos pequeños, y la categoría de visualización del producto es para insertar la imagen
Borrar margen predeterminado del elemento
* {
relleno: 0; /*borrar relleno*/
margen: 0; /*borrar margen*/
}
Los elementos en línea solo tienen márgenes izquierdo y derecho, no márgenes superior e inferior. Intentamos no especificar los márgenes superior e inferior para los elementos en línea .
Contraer márgenes
Cuando se usa margin para definir los márgenes verticales de los elementos a nivel de bloque, es imposible fusionar los márgenes (también conocido como el colapso de los márgenes).
Los elementos de bloque adyacentes se fusionan verticalmente
Solución:
Establecer solo un valor de margen
Colapsar márgenes verticales de elementos anidados
solución:
① Defina un borde superior de 1 píxel para el elemento principal (puede usar un borde transparente, transparente)
② Defina un relleno superior de 1 píxel para el elemento principal (relleno)
③ Agregar desbordamiento: oculto al elemento principal
ancho y alto del contenido
Use el ancho del atributo ancho y el alto del atributo alto para controlar el tamaño del cuadro.
Los valores de los atributos de ancho y alto pueden ser valores en diferentes unidades o porcentajes en relación con el elemento principal, pero el más utilizado es el píxel px
/*Cálculo del tamaño de la suma externa (tamaño del espacio del elemento)*/
Altura del espacio del elemento = altura + relleno + borde + margen
Ancho del espacio del elemento = ancho + relleno + borde + margen
/*Cálculo del tamaño de la caja interna (tamaño del elemento)*/
Altura del contenido del elemento = altura + relleno + borde
Ancho del contenido del elemento = ancho + relleno + borde
Aviso:
1. Los atributos de ancho y alto de los atributos solo se aplican a los elementos de nivel de bloque y no son válidos para los elementos en línea (excepto para las etiquetas img y de entrada)
2. Al calcular la altura total del modelo de caja, se debe considerar la combinación de los márgenes exteriores verticales de las cajas superior e inferior.
Estabilidad del diseño del modelo de caja
Priorizar el uso en función de la estabilidad
ancho > relleno > margen
razón:
1. El margen tendrá el problema de fusionar los márgenes exteriores, por lo que el último uso
2. El relleno afectará el tamaño de la caja y debe usarse después de los cálculos de suma y resta, lo cual es problemático
3. No hay problema con el ancho, y el método residual de ancho/alto se usa a menudo para hacerlo.
Modelo de caja CSS3 (nuevas propiedades de CSS3)
En CSS3, el tamaño del cuadro se puede usar para especificar y modelar, que se puede especificar como cuadro de contenido, cuadro de borde, por lo que la forma de calcular el tamaño del cuadro se dividirá en dos casos
1. caja de contenido : modelo de caja tradicional, el tamaño de la caja es: ancho + relleno + borde . content-box es el valor predeterminado, manteniendo el modo Box estándar de W3C
2. border-box : CSS3 agrega un nuevo modelo de caja, el tamaño de la caja es: width , es decir, padding y border están incluidos en el ancho, y no expandirán la caja.
Diez, flotante (flotador)
flujo normal
Una comprensión simple es que las cajas div tradicionales, los elementos en línea, los elementos de nivel de bloque y los elementos de bloque en línea son flujo ordinario, también llamado flujo estándar.
flotar
Elemento flotante significa que los elementos con propiedades flotantes establecidas se separarán del control de flujo estándar, es decir, flotarán hacia arriba.
gramática
selector { float: valor del atributo; }
| valor de atributo | describir |
| izquierda | el elemento flota a la izquierda |
| bien | el elemento flota a la derecha |
| ninguno | Los elementos no flotan (predeterminado) |
Los elementos flotantes primero encuentran la alineación de su elemento principal más cercano (alineación de la esquina superior izquierda o de la esquina superior derecha, dependiendo de la izquierda y la derecha), pero no excederán el relleno y el borde, solo cerca de la alineación interna
Características flotantes (puntos pesados y difíciles)
1. Flotante fuera de etiqueta (fuera del flujo estándar), no ocupa espacio y afectará el flujo estándar. El flotador solo flotará a la izquierda y a la derecha
2. La caja flotante ya no conserva su posición original
3. Si se configuran varios cuadros para que floten, se mostrarán en una fila de acuerdo con el valor del atributo y se alinearán en la parte superior .
Nota: Los elementos flotantes están unidos entre sí (no habrá espacios). Si el ancho principal no puede acomodar estos cuadros flotantes, los cuadros adicionales se alinearán en una nueva línea.
4. Los elementos flotantes tendrán las características de los elementos de bloque en línea
- Si el cuadro de nivel de bloque no tiene un ancho establecido, el ancho predeterminado es el mismo que el principal, pero después de agregar flotantes, su tamaño se determina de acuerdo con el contenido.
- No hay espacio en el medio de las cajas flotantes, están muy juntas
- Lo mismo para los elementos en línea
Floating se usa a menudo junto con el flujo estándar principal, es decir, el cuadro principal del flujo estándar es un cuadro secundario flotante.
Un elemento flota y, en teoría, los elementos hermanos restantes también deberían flotar.
Si no flota, habrá problemas.
La caja flotante solo afectará el flujo estándar detrás de la caja flotante y no afectará el flujo estándar frente a ella.
claro flotador
Borre la esencia de la flotación: resuelva el problema de que la altura interna del elemento principal es 0 debido a la flotación del elemento secundario. 【Originalmente, el cuadro secundario puede sostener al padre, pero flotar es equivalente a flotar hacia arriba, por lo que no se puede sostener. Si el padre no establece la altura, la altura se convertirá en 0】
Después de borrar el flotante, el padre detectará automáticamente la altura en función de los cuadros secundarios flotantes.
clara sintaxis flotante
Selector {claro: valor de atributo;}
| valor de atributo | describir |
| izquierda | Borrar efecto de flotador izquierdo |
| bien | Borrar el efecto de flotar a la derecha |
| ambos | claro al mismo tiempo |
En nuestro trabajo actual, casi solo usamos claro: ambos;
etiquetado adicional
El método de etiqueta adicional, también conocido como método de tabique, es una práctica recomendada por el W3C.
El método de etiqueta adicional agregará una etiqueta vacía al final del elemento flotante, como <div style="clear:both"></div>
Nota: Se requiere que esta nueva etiqueta vacía sea un elemento a nivel de bloque.
Otros metodos
1. Agregue el atributo de desbordamiento al padre
Agregue la propiedad de desbordamiento al padre y establezca su valor de propiedad en oculto, automático o de desplazamiento.
2. Agregue el pseudo-elemento after al padre
El método :after es una versión mejorada del método de etiqueta extra. También agregue al elemento padre
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}3. Agregue pseudo-elementos dobles al padre
También agregue al elemento padre
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}