Propiedades de color CSS, propiedades de texto, herencia de propiedades

Language 2023-10-01 09:53:40 views: null

Una lectura obligada para conocer los conceptos básicos de HTML: comenzar con HTML, la programación es muy simple

Capítulo 6: Atributos de color, atributos de texto

1. Estilo de color (método de valor de color)

1. Cómo obtener el valor del atributo de color

Los atributos de color comunes incluyen color y color de fondo. El valor de la propiedad:

  1. Valor en inglés:

Como rojo, azul, etc., aplique directamente los colores relevantes en inglés.

  1. Valor hexadecimal:

Un color está representado por un valor hexadecimal de 6 dígitos que comienza con "#". Los números de 6 dígitos se dividen en 3 grupos, con dos dígitos en cada grupo, que representan la intensidad de los tres colores rojo, verde y azul a su vez.

3.valor rgb

RGB es rojo, verde y azul, que son las iniciales del inglés.RGB son los tres colores primarios de la luz. Cada valor de color está entre 0 y 255, 0 representa nada, que es negro, y 255 representa el valor de color más alto, que es blanco.

  1. valor rgba

El valor rgba es el mismo que rgb, excepto que hay un atributo adicional a (alfa). a representa la transparencia. El rango de valores de a es: 0~1

  • Por ejemplo: (0,0,255,0,5)
  1. color transparentetransparente

El valor dado es el color transparente.

<head>
    <title>颜色取值</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        /* 1.英文取值法： */
        .p1{
      
      
            color: red;
            /* color: pink; */
        }
        /* 2.16进制取值法： */
        .p2{
      
      
            color: #FFCC00;
            /* color: #FF99FF; */
        }
        /* 3.rgb取值法：r:红  g:绿 b:蓝色 三原色
          取值：0~255正整数 也可以百分比  */
        .p3{
      
      
           color: rgb(23, 187, 45);
        }
        /* 4.rgb取值法:和rgb一样 只是多了一个a属性(alpha) a代表透明度
          a取值范围: 0~1
         */
        .p4{
      
      
            color: rgba(123, 34, 255,0.5);
        }
        /* 5. 透明的颜色 transparent，使文字变得透明 */
        .p5{
      
      
            color:transparent ;
        }
    </style>
</head>
<body>
    <p class="p1">你好，我是p1</p>
    <p class="p2">你好，我是p2</p>
    <p class="p3">你好，我是p3</p>
    <p class="p4">你好，我是p4</p>
    <p class="p5">你好，我是p5</p>
</body>

Representación:
Insertar descripción de la imagen aquí

2. Estilo de fuente

Modificar las características del texto de la página web: color, tamaño, grosor, alineación, etc.

1. color del texto en color

2.tamaño de fuente tamaño de fuente

Valor: valor numérico, unidad: px em, porcentaje, etc. (1em=16px)

  • El tamaño de fuente predeterminado es 16 px y el tamaño mínimo es 12 px.

3.estilo de inclinación del texto estilo fuente

El valor de la propiedad:

  • cursiva hace que la fuente esté en cursiva
  • normal hace que la fuente no esté inclinada.
    Nota: Excepto i y em, otras fuentes son normales y no están inclinadas de forma predeterminada.

4.grosor de fuente con peso de fuente

El valor de la propiedad:

  • negrita define fuente en negrita
  • negrita define una fuente más audaz
  • más claro define una fuente más delgada
  • normal define el tamaño de fuente normal
    . Nota: Excepto h1 ~ h6, b y fuerte, otras fuentes tienen el valor predeterminado normal.

5.tipo de fuente font-family, nombre de fuente

  • Algunos tipos de fuentes comunes: fuente Song, fuente Hei, Microsoft YaHei, fuente Kai, etc.
  • Valor: cite directamente la fuente correspondiente a los caracteres chinos. Por ejemplo: familia de fuentes: negrita;
  • Nota: En aras de la estandarización, al citar estos valores, puede utilizar " " comillas simples en inglés . Por supuesto, no se informará ningún error sin comillas; por ejemplo: font-family: 'Helvetica'.
<head>
    <title>字体样式</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        p,em,i{
      
      
            color: red;
            font-size: 15px;
        }

        /* 文字倾斜样式 */
        .p2{
      
      
            /* font-style：italic使字体倾斜 */
            font-style: italic;
        }
        em,i{
      
      
            /* font-style: normal使字体不倾斜 ，除了i 、em 以外，其他字体的都是默认normal*/
            font-style: normal;
        }

        /* 字体粗细 */
        .p1{
      
      
            /* bold 定义粗的字体 */
            font-weight: bold;
        }
        .p2{
      
      
            /* bold 定义更粗的字体 */
            font-weight: bolder;
        }
        .p3{
      
      
            /* lighter  定义更细的字体*/
            font-weight: lighter;
        }
        .p4{
      
      
            /* normal 定义正常字体大小，除了h1~h6，b，strong以外，其他字体的都是默认normal */
            font-weight: normal;
        }
        .p5{
      
      
            /* 用数值100~900来控制，取值只能是整百【不要px单位】 */
            font-weight: 900;
        }
        
        /* 字体类型，字体名称 宋体、黑体、微软雅黑、楷体等
        取值：直接引用相应字体对应中文汉字即可
        【为了规范，在引用这些值时，可以用英文状态下‘’单引号，当然不用引号也不会报错 】
        需要引入其他特殊字体时，通过外部引入*/
        .p1{
      
      
            /* font-family: 黑体; */
            font-family: '宋体';
        }
        .p2{
      
      
            font-family: '楷体';
        }

    </style>
</head>
<body>
    <p class="p1">你好，我是p1</p>
    <p class="p2">你好，我是p2</p>
    <em>你好，我是em</em>
    <i>你好，我是i</i>
    <p class="p3">你好，我是p3</p>
    <p class="p4">你好，我是p4</p>
    <p class="p5">你好，我是p5</p>
</body>

Representación:
Insertar descripción de la imagen aquí

6.altura de línea altura de línea

  • Valor: valor (px) porcentaje
  • Si desea que el texto esté centrado verticalmente, puede establecer el valor de altura de línea para que sea tan alto como el valor de altura.

7.font-varian muestra texto en letras mayúsculas pequeñas

Todas las letras minúsculas se convierten a mayúsculas, pero todas las versalitas tienen un tamaño de fuente más pequeño en comparación con el resto del texto.

  • Valor: variante de fuente: versalitas
<head>
    <title>字体样式</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        .div1 {
      
      
            width: 200px;
            height: 300px;
            background-color: red;
        }

        .div1>p {
      
      
            /* display: inline-block; */
            width: 100px;
            height: 50px;
            border: 1px solid yellow;
            line-height: 50px;
        }

        /* 行高  line-height
        取值：数值（px）  百分比
        如果想要文字垂直居中，可设置line-height的值和height的值一样高就行了*/
        .div2 {
      
      
            width: 200px;
            height: 100px;
            border: 1px solid red;
            line-height: 50px;
        }
        /* 小型大写字母显示文本 这意味着所有的小写字母均会转换成大写，但是所有作用小型大写字母与其余文本相比，其字体尺寸更小。
         font-variant: small-caps */
        .div2>.two{
      
      
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <div class="div1">
        <p class="p1">你好，我是p1</p>
        <p class="p2">你好，我是p2</p>
        <p class="p3">你好，我是p3</p>
        <p class="p4">你好，我是p4</p>
        <p class="p5">你好，我是p5</p>
    </div>
    <div class="div2">
        <p class="one">hello ,html,css</p>
        <p class="two">hello ,html,css</p>
    </div>
</body>

Representación:
Insertar descripción de la imagen aquí

Suplemento: atributo de alineación de línea base vertical de alineación vertical

El valor de la propiedad:

  • arriba: alineación superior
  • medio: alineación media
  • abajo: alineación inferior
  • línea de base: alineación predeterminada
    Con respecto al problema de alineación de la línea de base mencionado en el capítulo anterior, se trata de agregar el mismo valor de atributo de alineación, alineación superior, media o inferior. Para obtener más información, consulte los problemas de alineación de la línea de base en los Capítulos 3 y 4 del capítulo anterior.

3. Atributos del texto

1.alineación horizontal de alineación de texto

El valor de la propiedad:

  • alinear a la izquierda a la izquierda
  • el centro se alinea horizontalmente
  • alinear a la derecha
<style>
        .div1>p{
      
      
            width: 200px;
            height: 50px;
            background-color: thistle;
            margin-bottom: 10px;
        }
        /* 水平对齐方式： */
        .div1>.p1{
      
      
            /* 居左对齐 */
            text-align:left;
        }
        .div1>.p2{
      
      
            /* 水平居中对齐 */
            text-align:center;
            /* 加上行高line-height=height*/
            line-height: 50px;
        }
        .div1>.p3{
      
      
            /* 居右对齐 */
            text-align:right;
            text-indent: 10px;
        }
</style>
<body>
    <div class="div1">
        <p class="p1">这是我的对齐方式</p>
        <p class="p2">这是我的对齐方式</p>
        <p class="p3">这是我的对齐方式</p>
    </div>
</body>

Representación:
Insertar descripción de la imagen aquí

2.sangría de primera línea con sangría de texto

  • Valor: valor numérico, unidad px em. Se permiten valores negativos. Si se utiliza un valor negativo, la primera línea tendrá sangría hacia la izquierda.
<style>
        /* 首行缩进
        取值：数值，单位px em 允允许使用负值。如果使用负值，那么首行会被缩进到左边。*/
        .div2{
      
      
            width: 500px;
            height: 150px;
            border: 1px solid red;
            text-indent: 20px;
            /* text-indent: -20px; */
        }
        
    </style>
    <div class="div2">
            这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。
            这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。
            这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。
    </div>

Representación:
Insertar descripción de la imagen aquí

3. estilo de línea de texto de decoración de texto

El valor de la propiedad:

  • none Valor predeterminado, sin línea de texto,
    generalmente utilizado para borrar el subrayado de un enlace
  • subrayado subrayado
  • sobre línea sobre línea
  • línea central continua
    Nota: La etiqueta del es una etiqueta tachada. Uno es el estilo y el otro es la etiqueta.

4.text-decoration-color color de línea de texto

<style>
        .div3>p{
      
      
            width: 200px;
            height: 50px;
            background-color: pink;
            margin-bottom: 10px;
        }

        /* 文本线样式 */
        .div3>.p1>a{
      
      
            /* none 默认值，没有文本线 */
            text-decoration: none;
        }
        .div3>.p2{
      
      
            /* underline 下划线 */
            text-decoration: underline;
        }
        .div3>.p3{
      
      
            /* overline 上划线 */
            text-decoration: overline;
        }
        .div3>.p4{
      
      
            /*  line-through 中划线
            del标签是删除线 */
            text-decoration: line-through;
        }

        /* 文本线颜色 */
        .div3>.p2{
      
      
            text-decoration-color: blue;
        }
        .div3>.p3,.div3>.p4{
      
      
            text-decoration-color: red;
        }
    </style>
    <div class="div3">
        <p class="p1"><a href="">我是超链接</a></p>
        <p class="p2">文本线</p>
        <p class="p3">文本线</p>
        <p class="p4">文本线</p>
        <p class="p5">￥99 <del>原价：299</del> 我是删除线</p>
        
    </div>

Representación:
Insertar descripción de la imagen aquí

5.Conversión de mayúsculas y minúsculas con transformación de texto

El valor de la propiedad:

  • ninguno valor predeterminado, sin cambios
  • mayúscula poner en mayúscula la primera letra
  • mayúscula cambia todas las letras a mayúsculas
  • minúscula convierte todas las letras en minúsculas

6.espacio entre letras y palabras

Controla la distancia entre palabras (letras y letras), es decir, entre caracteres.
Valor de atributo: valor numérico, unidad: px, em.

7.espacio entre palabras

Controla la distancia entre palabras, es decir, controla la distancia espacial que a su vez tiene espacios.
Valor de atributo: valor numérico, unidad: px, em.

La diferencia entre los dos:

  • espaciado de letrasControla la distancia entre caracteres chinos individuales y también puede controlar la distancia entre caracteres individuales, como letras y símbolos.Es como si no hubiera distancia en primer lugar, pero se vio obligado a abrir una distancia.。
  • espaciado de palabrasControla la distancia entre palabras en inglés y generalmente está preparado para inglés, porque se utilizan espacios para separar palabras cuando se escribe en inglés. En chino, sólo tendrá efecto a menos que haya un espacio entre los caracteres chinos.Es equivalente a controlar nuevamente la distancia que existía originalmente.。
<title>文本属性</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        .div1>p{
      
      
            width: 200px;
            height: 50px;
            background-color: pink;
            margin-bottom: 10px;
        }
        
        /* 字母大小写转换 */
        .div1>.p1{
      
      
            /* none 默认值，不变 */
            text-transform: none;
        }
        .div1>.p2{
      
      
            /* 首字母大写 */
            text-transform: uppercase;
        }
        .div1>.p3{
      
      
            /* 字母全部变为大写 */
            text-transform: capitalize;
        }
        .div1>.p4{
      
      
            /* 字母全部变为小写 */
            text-transform: lowercase;
        }
        .div2>p{
      
      
            width: 500px;
            height: 50px;
            background-color: green;
            margin-bottom: 10px;
        }

        .div2>.p2{
      
      
            /* 控制字与字（单个字符）之间的距离 */
            letter-spacing: 30px;
        }
        .div2>.p3{
      
      
            /* 控制以空格间隔开文字的间距（空格本身的宽度）*/
            word-spacing: 30px;
        }
        /* letter-spacing和word-spacing的 区别： 
        1.letter-spacing 控制的是单个汉字之间的距离，也可控制字母，符号等单个字符的距离，就相当于原本没有距离，硬是给拉开的距离。 
        2. word-spacing 控制的是英语单词之间的距离，一般为英文准备的，因为英文书写的时候使用空格分开单词。在中文时，除非中文间有空格，才能生效。就相当于，原本就有的距离，再次去控制这个原本就存在的距离。
        */
    </style>
</head>
<body>
    <div class="div1">
        <p class="p1">HELLO,i love html and css</p>
        <p class="p3">HELLO,i love html and css</p>
        <p class="p2">HELLO,i love html and css</p>
        <p class="p4">HELLO,i love html and css</p>
    </div>
    <div class="div2">
        <p class="p1">你好,我是p。html and css ## ￥￥</p>
        <p class="p2">你好,我是p。html and css ## ￥￥</p>
        <p class="p3">你好,我是p。html and css ## ￥￥</p>
    </div>
</body>

Representación:
Insertar descripción de la imagen aquí

8.método de salto de línea con espacios en blanco

El valor de la propiedad:

  • valor predeterminado normal, ajuste de línea normal
  • el texto de nowrap no se ajusta

9.Método de ajuste de línea de palabra larga con salto de palabra

El valor de la propiedad:

  • valor predeterminado normal, utiliza el método de ajuste de línea predeterminado del navegador
  • break-all permite saltos de línea dentro de palabras
  • mantener todo solo puede dividir líneas en espacios o guiones de ancho medio
<style>
       div{
      
      
           width: 150px;
           height: 100px;
           border: 1px solid red;
           margin-bottom: 10px;
           white-space: normal;
       }
       /* white-space 换行方式
        normal 默认值，正常换行
        nowrap 文本不换行*/
       .div2{
      
      
           white-space: nowrap;
       }

       .div3{
      
      
           /* *normal* 默认值，使用浏览器默认的换行方式 */
           /* break-all 允许在单词内换行 */
           /* word-break: break-all; */
           word-break: break-all;
       }
       .div4{
      
      
        /* keep-all* 只能在半角空格或连字符处换行。 */
           /* word-break: break-all; */
           word-break: keep-all;
       }
    </style>
</head>
<body>
    <div class="div1">
        我爱学前端，零基础学HTML+CSS。
    </div>
    <div class="div2">
        我爱学前端，零基础学HTML+CSS。
    </div>
    <div class="div3">
        I love learning front end.I love learning front end
    </div>
    <div class="div4">
        I love learning front end.I love learning front end
    </div>
</body>

Representación:
Insertar descripción de la imagen aquí

10. El texto desbordado se convierte en elipses...

  • El contenido desbordado está oculto. desbordamiento: oculto
  • Valor de atributo de desbordamiento de texto del modo de visualización de desbordamiento: los puntos suspensivos muestran un símbolo de puntos suspensivos para representar el clip de texto recortado Texto recortado predeterminado

Para cambiar la parte desbordada de una sola línea de texto a... puntos suspensivos, se requieren los siguientes tres pasos (esenciales)

  1. espacio en blanco: nowrap; proporciona un atributo sin ajuste, por lo que se desbordará
  2. overflow:hidden; La parte de desbordamiento está oculta
  3. desbordamiento de texto: los puntos suspensivos desbordan el contenido en...
<head>
    <title>溢出隐藏</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        .div1{
      
      
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 将单行文字溢出部分变为…省略号，要有以下三个步骤（必不可少） */
            /*给一个不换行属性，所以就会溢出  */
            white-space: nowrap;
            /* 溢出隐藏了 */
            overflow:hidden;
            /* 溢出的内容变为... */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="div1">
        我爱学前端，零基础学HTML+CSS。
    </div>
</body>

Representación:
Insertar descripción de la imagen aquí
la parte desbordada de una sola línea de texto se convierte en... puntos suspensivos (simplemente entiéndalo, no es necesario entrar en detalles)

<head>
    <title>溢出隐藏</title>
    <link rel="stylesheet" href="rest.css">
    <style>
.div2{
      
      
    width: 200px;
    background-color: pink;

    /* 将多行文字溢出部分变为…省略号，要有以下五个步骤（必不可少） */
    /*给一个不换行属性，所以就会溢出  */

    /* 注意不要设置高度，默认由内容自己撑开 */

    /* 溢出隐藏了 */
    overflow:hidden;
    /* 溢出的内容变为... */
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 这个数值代表想要第几行变为...省略号隐藏 */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
    </style>
</head>
<body>
    <div class="div2">
        我爱学前端，零基础学HTML+CSS。我爱学前端，零基础学HTML+CSS。
    </div>
</body>

Representación:
Insertar descripción de la imagen aquí

4. Herencia de atributos

Herencia: un elemento hijo puede heredar los valores de algunos atributos de sus elementos antecesores.
La mayoría dePropiedades literales de textose heredará, pero el ancho, alto, márgenes, bordes y otras propiedades del cuadro en sí no se heredarán.

Resumir

Lo anterior es una explicación relativamente detallada de los atributos de color (método de valor de color), estilo de fuente, atributos de texto, etc. compilados por el editor para todos. Fue compilado con referencia a varias fuentes y a mi propio entendimiento. Si puede haber inexactitudes u omisiones, espero que puedan iluminarme y hacer correcciones. Me gustaría agradecerles de antemano.

Supongo que te gusta

Origin blog.csdn.net/xu_yuxuyu/article/details/121097810
Recomendado
Clasificación
Diario
Más
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)

Code World

© 2018 codetd.com