当前位置：首页 > article >正文

CSS一些练习过程

article 2024/11/22 5:13:17

1.字体样式

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="index.css"> -->
     <style type="text/css">
        div{color:red;}
        #myDiv{background-color:yellow;
        width:200px;height:200px;}
        .myClass{background-color:green;}
        /* 后代选择器：父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素 */
        #myDiv p{font-size:30px;}
        /* 群组选择器：两个选择器之间必须要用英文逗号隔开， */
        p,h2{color:cadetblue;}
        /* 字体样式 */
        /* 对于font-family属性，如果字体类型只有一个英文单词，则不需要加上双引号；
        如果字体类型是多个英文单词或者是中文，则需要加上双引号 */
        .font-style #font-family3{font-family:Arial;font-size:large;}
        .font-style #font-family1{font-family:Arial;font-size:large;font-weight:bold;}
        .font-style #font-family2{font-family:"Times New Roman";font-size:small;}
        .font-style #微软雅黑{font-family:"微软雅黑";font-size:60px;}
        .font-style #color-blue{color:blue;}
     </style>
</head>
<body>
    <p>Hello World!</p>
    <div id="myDiv">
        This is a div
        <p>This is a paragraph</p>
    </div>
    
    <div class="myClass">This is another div</div>
    <div class="myClass">This is a third div</div>
    <p>This is another paragraph</p>
    <h2>This is a heading</h2>
    <div class="font-style">
        <div id="font-family3">Arial</div>
        <div id="font-family1"> Arial</div>
        <div id="font-family2">Times New Roman</div>
        <div id="微软雅黑">微软雅黑</div>
        <div id="color-blue">字体颜色蓝色</div>
    </div>
</body>
</html>

效果：

2.文本样式

实际上，字体样式针对的是“文字本身”的型体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。因此在CSS中，特意使用了font和text两个前缀来区分这两类样式。如果清楚这一点，以后写CSS时，就很容易想起哪些属性是字体样式，哪些属性是文本样式了。

中文段落首行一般需要缩进两个字符。如果想要实现这个效果，text-indent值应该是font-size值的两倍。

 p{
            font-size:14px;
            text-indent:28px;
        }

text-align属性取值:

letf:左对齐（默认值）

center:居中对齐

right:右对齐

text-align属性不仅对文本有效，对图片（img元素）也有效。

在CSS中，我们可以使用text-decoration属性来定义文本的修饰效果（下划线、中划线、顶划线）。

text-decoration属性取值：

none:去除所有的划线效果（默认值）

underline：下划线

line-through:中划线

overline:顶划线

中划线经常出现在各大电商网站中，一般用于促销。

使用text-transform属性来将文本进行大小写转换。text-transform属性是针对英文而言，因为中文不存在大小写之分。

text-transform属性取值：

间距（letter-spacing和word-spacing）

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        h3{letter-spacing:10px;text-align:center;}
        p{
            font-size:14px;
            text-indent:28px;
            letter-spacing:5px;
            line-height:24px;
        }
        #letf{text-align:left;}
        #center{text-align:center;}
        #right{text-align:right;}
        div a{text-decoration:none;}
        div #id1{word-spacing:10px;}
        div #id2{word-spacing:30px;}
    </style>
</head>
<body>
    <h3>爱莲说</h3>
     <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
     <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人？牡丹之爱，宜乎众矣。</p>
     <p id="letf">左对齐</p>
     <p id="center">居中对齐</p>
     <p id="right">右对齐</p>
     <div>
        <a href="http://www.baidu.com" target="_blank">百度一下</a>
     </div>
     
     <a href="http://www.baidu.com" target="_blank">百度一下</a>
     <div>
        <p id="id1">Hello World!1</p>
        <p id="id2">Hello World!2</p>
     </div>
</body>
</html>

效果图：