CSS初体验

最新推荐文章于 2024-09-27 11:01:06 发布

. hh

最新推荐文章于 2024-09-27 11:01:06 发布

阅读量102

点赞数

分类专栏：前端学习笔记文章标签： css html css3

本文链接：https://blog.csdn.net/qq_65359222/article/details/129478447

版权

前端学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、CSS初体验

前一篇文章我们学习了html，而对于网页来说，它是一个骨架，还没有其他好看的外表，接下来学习的css就是好看的外表。

一、CSS初体验

如下是一个p标签，我们写了内容想改变它的属性，比如颜色、大小或者字体等等，可以这样实现，首先在body里面写出p标签（p便签是段落标签，不懂的可以看我前一篇博客），然后在head里面写样式style，再在style里面写上你想要修饰的标签名字，最后修改属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>

    <style>
        p {
            color: beige; /*颜色*/
            font-size: 12px; /*字体大小*/
        }
    </style>
</head>
<body>
    <p>这是css修改的样式</p>
</body>
</html>

1、选择器

如果有多个相同或者不同标签，我想改其中一个可以吗？当然，这就是选择器，相当于给标签一个名字。body里面的标签和stylle里面的属性联合起来看。
像我们上面说的以标签开头写属性的成为标签选择器，优点很明显，是它能一次性修改相同的便签，缺点是不能差异化选择，也即是你不能在一堆相同便签里面修改一个你想要的标签。

<style>
	p {
		color: pink;
	}
	div {
		color: blue;
	}
</style>

<body>
	<p>男生</p>
    <p>男生</p>
    <p>男生</p>

    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>

如何实现一种标签修改一个，我们就可以用类选择器：
以class作为名字，‘’.''开头（学过c++的朋友应该知道为什么叫类选择器，class），此时只有男生1改变了颜色。

<style>
	.one {
		color: pink;
	}
</style>

<body>
	<p class="one">男生1</p>
    <p>男生</p>
    <p>男生</p>

    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>

当然一个标签可以有多个名字，意义是多个不同标签有相同名字就可以修改相同名字的不同标签属性，就像我想要p标签和div标签有相同的颜色那么我可以给他们取相同的名字，这个是多类名：

<style>
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
        /* 多类名 */
        
        .box {
            width: 50px;
            height: 50px;
        }
        .acolor {
            color: aquamarine;
        }
        .font20 {
            font-size: 30px;
        }
</style>

<body>
    <div class="red box">红色</div>
    <div class="green">绿色</div>
    <div class="red box">红色</div>

    <div class="acolor font20">刘德华</div>
</body>

id选择器,和类选择器一样的用法不过把“.”改成“#”，但是为啥有它只是因为ID属性只能在每个HTML文档中出现一次一般搭配js

<style>
	#pink {
		color: pink;
	}
</style>
<body>
	<div id="pink">用的id选择器的</div>
</body>

总代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>

    <style>
        /* 标签选择器 不能差异化选择 */
        p {
            color: pink;
        }
        div {
            color: blue;
        }

        /* 类选择器  可以根据需求选择*/
        /* 口诀：样式点定义 结构类(class)调用 一个或多个 开发最常用*/
        .a {
            color: aqua;
        }

        /* 案例 */
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }

        /* 多类名 */
        .box {
            width: 50px;
            height: 50px;
        }
        .acolor {
            color: aquamarine;
        }
        .font20 {
            font-size: 30px;
        }

        /* id选择器 ID属性只能在每个HTML文档中出现一次 一般搭配js*/
        /* 口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 */
        #pink {
            color: pink;
        }

        /* 通配符选择器 选择太多，有部分不需要 */
        /*

        * {
            color: red;
        }
        这里把 html body div span li 等等所有标签都改成红色

        */
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>

    <div>女生</div>
    <div>女生</div>
    <div>女生</div>

    <ul>
        <li class="a">冰雨</li>
        <li>荷叶</li>
        <li>花朵</li>
        <li>苹果树</li>
    </ul>
    <div class="a"> 耶耶耶</div>

    <div class="red box">红色</div>
    <div class="green">绿色</div>
    <div class="red box">红色</div>

    <div class="acolor font20">刘德华</div>

    <div id="pink">用的id选择器的</div>

</body>
</html>

2、字体属性

字体属性就是我前面告诉大家的字体的颜色，大小等等，下面是我们常用的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        h1 {
            font-family: '楷书','Microsoft yahei';
            font-weight: 400;/*不加粗*/
        }
        /* 标题标签比较特殊，需要单独指出大小 */
        body {
            font-size: 20px; /*字体大小*/

        }

        .bold {
            /* font-weight: bold;  */
            /* 这个700的后面不跟单位 等价于 bold 都是加粗的效果 */
            font-weight: 700;
        }
        .ziti {
            font-style: italic; /*倾斜*/
        }

        .noqinxie {
            font-style: normal; /*让倾斜的字体不倾斜*/
        }

        /* 复合属性 */
        div {
            /* 
            font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft yahei'; 微软雅黑 
            */

            /* 复合属性：简写方式  必须这种格式不能随便交换位置 必须保留 font-size font-family，其他可以省略*/
            /* font: font-style font-weight font-size/line-height font-family */

            /* font: italic 700 16px Microsoft yahei; */
            font: 20px '楷体';
        }

    </style>
</head>
<body>
    <h1>帮助中心</h1>
    

    <p>使用帮助</p>

    <p>账户相关</p>

    <p class="bold">支付相关</p>

    <p class="ziti">配送相关</p>
    <br>
    <em class="noqinxie">售后服务</em> <!--em,i 倾斜-->

    <div>聚美手机版</div> 
</body>
</html>

3、文本属性

想要你的文章好看，还要注意排版，文本属性给了我们一个“称手的兵器”，当然有很多，下面是最常用的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
    <style>
        div {
            /* color: red; */
            /* color: #ffff00;  十六进制*/  
            color: rgb(255,0,0); 
        }        

        h1 {
            /* 本质上是让h1盒子里的文字 水平 居中对齐 */
            text-align: center;/*left right */
        }

        .s {
            /* 添加下划线 */
            text-decoration: underline;
        }
        a {
            /* 取消下划线 */
            text-decoration: none;
        }

        p {
            font-size: 24px;
            /* 文本的第一行缩进 多少距离 */
            /* text-indent: 20px; */
            /* 如果写了2em 则是缩进当前元素的2个文字大小的距离 em本质上是一个文字大小的单位 */
            text-indent: 2em;
            line-height: 48px;
        }

        .h {
            font-size: 25px;
            /* 行间距=上间距+文字大小+下间距 */
            line-height: 50px;
        }
    </style>

</head>
<body>
    <div>这是一个颜色嘿嘿</div>

    <h1>这是一个对齐</h1>

    <div class="s">粉红色的回忆：文本外观的装饰文本</div>
    <a href="#">链接下有横线，我要删除</a>

    <div class="h">中国人</div>

    <p>订单显示发货了，但快递信息为什么还没有更新？您在聚美订单页面看到的物流查询信息由快递公司传递提供。由于快递公司信息更新会有一定延迟，请您多多谅解。（延迟时间可能从1天到3天不等，EMS快递的物流配送信息可能最多可能有1周左右延迟）</p>
    <p>名品折扣产品显示发货了，但是为什么没有快递信息？为什么有时联系快递，快递称没有这个订单？由于名品折扣产品由品牌商负责发货，品牌商选择的部分快递公司不能及时提供快递物流信息，请您耐心等候。除非地域偏远，最晚七日内您应该可以收到货品。</p>
   
</body>
</html>