HTML简单了解（3）

最新推荐文章于 2025-12-24 22:06:08 发布

原创最新推荐文章于 2025-12-24 22:06:08 发布 · 142 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

本文详细介绍了CSS中字体属性的使用，包括字体类型、大小、粗细、样式、文本装饰及对齐方式。同时，深入探讨了CSS选择器的应用，如ID、群组、class、层次和伪类选择器，并解释了结构性伪类选择器的作用。

1.css字体

css字体类型： font-family（宋体，楷体、黑体，等具体需要什么字体可以自己设置）
css字体大小：font-size（默认大小是16px）
css字体粗细：font-weight（分为：(细)( 正常 )(粗)）
css字体样式：font-style
css文本装饰：text-decoration: overline(上划线) underline(下划线) line-through(删除线)
css文本对齐：text-align（默认左对齐）（ left right center justify(两端点对齐)）

<style>
        div{font-family: 宋体;width: 300px;height: 300px;border: 1px black solid;}    这是给所有字体变成宋体
        .A1{font-size: 20px;}			这是字体大小为20px
        .B1{font-weight: 900;}			这是字体粗细为900
        .C1{font-style: italic;}		这是字体为倾斜
        .D1{text-decoration: overline;}		这是上划线
        .E1{text-decoration: underline ;}	这是下划线
        .F1{text-decoration: line-through;}	这是删除线
        .G1{text-align: right;}				这是右对齐				
</style>
</head>
<body>
    <div>
       <p class="A1">1.测试测试测试测试测试</p>
       <p class="B1">2.测试测试测试测试测试</p>
       <p class="C1">3.测试测试测试测试测试</p>
       <p class="D1">4.测试测试测试测试测试</p>
       <p class="E1">5.测试测试测试测试测试</p>
       <p class="F1">5.测试测试测试测试测试</p>
       <p class="G1">5.测试测试测试测试测试</p>
    </div>
</body>

在这里插入图片描述

2.css选择器

以下是常用的选择器

id选择器
群组选择器（分组选择器）
class选择器
层次选择器
伪类选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a :link{background: blue;}  		蓝色
        .s:visited{background: crimson;}	深红
        .d:hover{background: darkorange;}	橘色
        .f:active{background: deeppink;}	桃红
    </style>
</head>
<body>

	<a href="s" class="a">123456</a>
    <a href="s" class="s">123456</a>
    <a href="s"  class="d">123456</a>
    <a href="s"  class="f">123456</a>


    <div id="box">        在一个页面中，ID是唯一值。( 身份证 )


       <p class="A1"></p>       class选择器是可以复用的
                            可以添加多个class样式
                            多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
                            
             
    </div>


    

伪类选择器：
    link      访问前的选择器     ( 只能加给a标签 )
    visited   访问过后的选择器   ( 只能加给a标签 )
    hover     鼠标移入的选择器    ( 所有标签都能添加 )
    active    鼠标按下的选择器    ( 所有标签都能添加 )  
    
结构性伪类选择器：

    nth-of-type()、 nth-child()

    first-of-type、 first-child 

    last-of-type、  last-child

    only-of-type、 only-child

    ()中可以添加的值：number(第几个，从1开始) | n(表示一个0到无穷大的数)
</body>
</html>