Programadores de dark horse tercer día
Hoy es el primer día de aprendizaje de css
1. Conocimientos básicos de css: escenarios de uso de css, embellecer páginas web, diseño de página
1.1 Introducción: css es una hoja de estilo en cascada
1.2 Qué estilos establece css : contenido de texto, imágenes, diseño.
1.3 Especificación gramatical de css:
incluye: selector (cuyo estilo cambiar), declaración de estilo (qué estilo cambiar).
Posición: <head></head>Media
Sintaxis: Atributo: _valor; Atributo; Atributo
2. Selector
Dividido en selector básico y selector compuesto
2.1 Selector de etiquetas:
Definición: use el nombre de etiqueta html como selector
Función: seleccione todas las etiquetas de un cierto tipo Salga, modifique el
selector de tipo 2.2: (.)
Mantra: definición de punto de estilo, llamada de clase de estructura, uno o más, más comúnmente usado en desarrollo.
Función: Seleccione diferentes etiquetas de forma diferencial.
Nota: No puede usar números puros y nombres chinos; las definiciones de pinyin se escriben mejor en su totalidad; no agregue nombres de etiquetas después de hacer clic .
Varios nombres de clases: asigne varios nombres de clases a una etiqueta.
①Uso de nombres de clases múltiples: varios nombres de clases en la clase, separados por espacios entre los
nombres de clases
②Escenario de uso de nombres de clases múltiples : coloque algunos elementos de etiqueta con el mismo estilo en una clase 2.3id selector (#) id = ...
Escenario: El
identificador de estilo de elemento único de la página solo se puede llamar una vez (único) el selector de identificador usa menos
selector de comodín 2.4: (*)
selecciona todas las etiquetas en la página
sin llamar,
se usa automáticamente . Solo se usa en circunstancias especiales.
3. Atributos de fuente (que definen la familia de fuentes)
3.1 font-family (familia de fuentes)
Todas las fuentes deben estar separadas por comas en inglés; las
fuentes compuestas por varias palabras separadas por espacios deben estar entre comillas,
intente utilizar la fuente predeterminada
3.1 tamaño de fuente (tamaño de fuente) px: unidad (píxel) Valor predeterminado de Google: la
etiqueta de título de 16 píxeles debe especificar el tamaño de fuente por separado;
puede especificar el tamaño del texto de toda la página para el cuerpo.
Expansión: ctrl + rueda: acercar y alejar la página, ctrl + 0: restaurar
fuente 3.3- peso (grosor de la fuente)
normal: fuente normal (400)
negrita: negrita (700)
negrita: extra gruesa En
el desarrollo real, el valor numérico se utiliza para indicar negrita y fina sin unidad.
3.4 estilo de fuente (estilo de fuente) es
principalmente para oblicua,
normal: el valor predeterminado; cursiva: oblicua
3.5 escritura de atributo compuesto de fuente El orden de
escritura
del estilo de texto está integrado : estilo de fuente, peso de fuente, tamaño de fuente / altura de línea, fuente- La familia
debe escribirse en orden y cada atributo
debe estar separado por espacios. Se debe conservar el tamaño de fuente y la familia de fuente.
4 Atributos de texto (definir la apariencia del texto)
4.1 Color (color del texto)
predefinido: Inglés
hexadecimal: # ... )
Código RGB: rgb (.,.,.)
Notas: #ffffff: blanco; # 000000: negro; # ff0000: el
código rgba rojo agrega un color transparente
4.2 alineación de texto (texto alineado)
propiedad de alineación horizontal : izquierda (izquierda ); derecha (derecha); la
alineación de texto central (centro) no tiene efecto para span, a, em, ins, strong, etc.
4.3 text-decoration (decoración de texto)
puede agregar
atributos de subrayado, tachado y sobrelineado al texto : ninguno Por defecto no; subrayado subrayado; tachado de línea a través; sobreimpresión
a {text-decoration: none}: cancelar subrayado
4.4 text-indent (sangría de texto)
la sangría de la primera línea del texto (la primera línea del párrafo)
em Sí Una unidad relativa, un tamaño de texto en relación con el elemento actual.
Solo efectivo para elementos en una sola línea.
4.5 altura de línea (espaciado de línea) se
usa para controlar la distancia entre líneas de texto.
Espaciado de línea: espaciado superior, espaciado inferior, altura del texto
5 css tres especie introducida encarnación
5.1 css hoja de tres estilos
5.11 hoja de estilo interna: escritura interna la
teoría html se puede colocar en cualquier lugar html, generalmente se coloca / head en
5.12 hoja de estilo en línea:
establecer atributos de estilo de estilo dentro de la etiqueta del elemento
no es Para lograr la separación, utilícelo cuando haya pocos estilos, no se recomienda
5.13 Hoja de estilo externa:
adecuada para más estilos.
Escriba por separado en el archivo .css e importe el archivo css en el archivo html
css. Solo estilos, sin etiquetas.
Cree un nuevo archivo .css y escriba el código. En la página html, use la etiqueta de enlace Importar este archivo
<link rel="stylesheet" href=".css文件">
6 Herramienta de depuración de Chrome
6.1 Herramienta de depuración abierta: F12 o clic derecho (marcar)
6.2 Usar la herramienta de depuración
6.11 ctrl + rueda: zoom; ctrl + 0: restaurar
6.12 izquierda: html; derecha: css
6.13 comprobar errores
7 Caso Baidu:
código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
font: 15px 'microsoft yahei';
}
.xiahuaxian {
text-decoration: none;
font-weight: 700;
color: #000000;
}
.box {
width: 400px;
height: 40px;
}
.box1 {
width: 100px;
height: 45px;
}
a {
color: rgb(87, 0, 128);
}
p {
color: gray;
}
</style>
</head>
<body>
<div><img src="./image/bdlogo.gif" alt=""></div>
<div><a href="#">新闻</a>
<a href="#" class="xiahuaxian">网页</a>
<a href="#">贴吧</a>
<a href="#">知道</a>
<a href="#">音乐</a>
<a href="#">图片</a>
<a href="#">视频</a>
<a href="#">地图</a>
</div><br><br><br>
<div>
<input type="text" class="box"> <button class="box1">百度一下</button>
</div><br><br><br>
<div>
<a href="#">百科</a>
<a href="#">文库</a>
<a href="#">hao12 | </a>
<a href="#">更多>></a>
</div><br><br><br>
<div>
<img src="./image/ic.jpg" alt="">
<a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
</div><br><br><br>
<div>
<a href="#">把百度设为主页安装百度卫士</a><br><br>
<a href="#">加入百度推广|</a>
<a href="#">搜索风云榜|</a>
<a href="#">关于百度|</a>
<a href="#">About Baidu|</a><br>
<p>
©2013 Baidu 使用百度前必读 京ICP证030173号
</p>
</div>
</body>
</html>
8 Experiencia:
Hoy es el primer día de aprendizaje de CSS. Después de la ayuda del maestro de ayer, obtuve una vista previa del curso de hoy, lo que facilitó mi estudio. Espero poder aprender más mañana y siempre estudiaré mucho.