CSS学习第一天

最新推荐文章于 2024-10-10 16:54:25 发布

Labef_Peppa

最新推荐文章于 2024-10-10 16:54:25 发布

阅读量169

点赞数

文章标签： css

本文链接：https://blog.csdn.net/n374471906/article/details/108739199

版权

CSS学习第一天
知道css有三种方式：
1.行内式，写在html标签内部；
2.内部式，写在一个html页面的head中间用style包起来，只能在当前页面使用；
3.外部式，单独建立一个.css文件，所有的html文件都可以调用这个css文件使用。
学习了css选择器，选择器就是来选择标签用的，把想要的标签给选择出来。
css选择器简单说就是把原来在标签内的一些属性给他单独的列出来，从而能够达到可复用，用的比较多的就是class类选择器，而id选择器虽然只能够用一次但是在js中用的比较多，通配符选择器会匹配到当前html页面当中的所有元素，但是会降低页面的响应速度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>

    <!-- css写在head中间 ,只能控制当前页面 内部样式css-->
    <style >
        /* 通配符选择器，匹配当前页面的所有元素，但是会降低也免得响应速度 */
        *{
            margin: 0%;
            padding: 0%;
        }

        /* 标签选择器 */
    h2 {
        color:green;
        font-size: 13px;
    }
    
     /* 加.自定义类选择器，然后在后面需要的标签直接调用这个类即可  */
    .font100{
        font-size: 150px;
    }
    .red{
        color: red;
    }
    
    .blue{
        color:blue;
    }
    .green{
        color:green;
    }
    .orange{
        color:orange;
    }

    /* 加#的id选择器，唯一的，只能够用一次，多在JavaScript中用 */
    #yellow{
        color:yellow;
    }

    .title{
        /* 字体大小 */
        font-size: 18px;
        /* 字体选择，多个字体备用，首选第一个，电脑没有就依次往后选直到选到，全没有就使用默认，多个字体类型之间用英文‘,’，
        多个字体类型用""框起来" */
        font-family: "宋体","微软雅黑";
        /* 字体粗细 */
        font-weight: 500;
        /* 字体风格，倾斜等 normal是正常*/
        font-style: italic;
        /* font字体连写： font:style weight size family 必须按照这四个顺序来写，中间用空格间隔，前两个可以省略，后两个必须有 */
    }

    /* 文字水平居中 */
    .tac{
        text-align: center;
    }

    /* line-height行高，一般就用在段落文本直接即可,用像素赋值就行
    text-indent首行缩进，单位是em，1em就是一个字的宽度 */
    p{
        line-height: 24px;
        text-indent: 2em;
    }

    /* text-decoration表示文本装饰，一般有下划线上划线删除线和无装饰，可以用来取消<a>自带的下划线 */
    .undeline{
        text-decoration: none;
    }
    </style>

    <!-- 外部样式css -->
    <link rel="stylesheet" href="style.css"   />
</head>
<body>
    <!-- css属性写在标签内部 行内css -->
    <h1 style="color:darkturquoise; font-size: 18px;">今天也要努力学习呀</h1>
    <h2>没错今天一定可以认真学习的！</h2>
    <h2>加油啊！Fighting！</h2>
    <h3>小聂的第三天依然元气满满！</h3>

    <div>今天很nice</div>
    <div>昨天也不错</div>
    <div>明天会更好</div>
    <div>以后都会强</div>

    <!-- 在这里调用了自定义类让字体变成红色 -->
    <div class="red">加油加加油</div>

    <!-- 调用的class当中如果有多个属性那就多个类名之间用空格隔开，不能在一个标签中写多个class，没有用 -->
    <span class="blue font100">G</span>
    <span class="red font100">o</span>
    <span class="orange font100">o</span>
    <span class="blue font100">g</span>
    <span class="green font100">l</span>
    <span class="red font100">e</span>
    <p id="yellow">这是id的选择器</p>
    <p class="title">这是字体样式展示</p>

    <a href="#" class="undeline">取消下划线连接</a>
   


</body>
</html>