css第一部分学习

最新推荐文章于 2024-11-13 16:47:20 发布

人生苦若如初见

最新推荐文章于 2024-11-13 16:47:20 发布

阅读量167

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_63339948/article/details/121187948

版权

一
1 - 1. css规则由两个主要的部分构成：选择器以及一条或多条声明，
选择器就是根据不同需求把不同的标签选出来这就是选择器的作用
1 - 2 . 选择器分为基础选择器和复合选择器
二
基础选择器分为四个，标签选择器，类选择器，idx选择器，通配符选择器。

2-1 标签选择器

    <style>
        /* 选择器选择的东西都会全选出来的  */
        
        p {
            color: green
        }
        
        div {
            color: pink;
        }
    </style>
</head>

<body>
    <P>男生</P>
    <P>男生</P>
    <P>男生</P>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>

2-2 类选择器

    <style>
        /* 类选择器口诀： 样式点定义  结构累(class)调用 一个或多个 开发最常用 */
        
        .red {
            color: red;
        }
        
        .xue {
            color: green;
        }
        
        .xi {
            color: pink;
        }
    </style>
</head>

<body>
    <Ul>
        <li class="red">冰雨</li>
        <li class="red">来生缘</li>
        <li class="xi">李上</li>
        <li class="xi">冯贺阳</li>
        <li class="xue">吉吉国王</li>
    </Ul>
</body>

2-3 id选择器

  <style>
        /* id选择器的口诀: 样式#定义， 结构id调用， 只能调用一次， 别人切勿使用 */
        
        #pink {
            color: pink;
        }
    </style>
</head>

<body>
    <div id="pink">毛毛小帅哥</div>
    <div id="pind">毛毛小哥帅</div>
</body>

2-4 通配符选择器

    <style>
        * {
            color: red;
        }
        /* * 这里把 html  body div span li 等等的标签都改为了红色 */
    </style>
</head>

<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>

三 css字体属性
主要关于四方面， 4-font-family：系列 ,3-font-size：大小 , 2-font-weight：字体粗细，1-font-style:字体样式。
3-1 字体系列

    <style>
        h2 {
            font-family: "微软雅黑";
        }
        
        p {
            font-family: " 微软雅黑";
        }
    </style>
</head>

<body>
    <h2>myself的秘密</h2>
    <p>我用双手成就你的梦想。</p>
    <p>死亡如风，相伴永远。</p>
    <p>胜利女神在微笑。</p>
    <p>死亡亦如黎明中的花朵。</p>
    <p>汉水有女神，可是追不上。</p>
    <p>窈窕淑女，君子好逑。</p>
</body>

3-2 ，字体大小

   <style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊，需要单独指定文字大小 */
        
        h2 {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <h2>myself的秘密</h2>
    <p>我用双手成就你的梦想。</p>
    <p>死亡如风，相伴永远。</p>
    <p>胜利女神在微笑。</p>
    <p>死亡亦如黎明中的花朵。</p>
    <p>汉水有女神，可是追不上。</p>
    <p>窈窕淑女，君子好逑。</p>
</body>

3-3 ，字体粗细

   <style>
        .bold {
            /* font-weight: bold; */
            /* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 */
            /* 实际开发中，我们跟提倡使用数字 表示加粗或者变细 */
            font-weight: 700;
        }
        
        h2 {
            /* font-weight: normal;  */
            font-weight: 400;
        }
    </style>
</head>

<body>
    <h2>myself的秘密</h2>
    <p>我用双手成就你的梦想。</p>
    <p>死亡如风，相伴永远。</p>
    <p>胜利女神在微笑。</p>
    <p>死亡亦如黎明中的花朵。</p>
    <p class="bold">汉水有女神，可是追不上。</p>
    <p>窈窕淑女，君子好逑。</p>
</body>

3-4 ，字体样式

    <style>
        p {
            font-style: italic;
        }
        
        em {
            font-style: normal;
        }
    </style>

</head>

<body>
    <p>同学，上课时候的你</p>
    <em>下课时候的你</em>
</body>

3-5复合属性
加粗样式

   <style>
        /* 想要div 文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
        
        div {
            /*  font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 微软雅黑; */
            /* 复合属性：简写的方式 */
            /*  font: font-style font-weight font-size/line-height   font-family; */
            /*  font: italic 700 16px 微软雅黑； */
            font: 20px "黑体"；
        }
    </style>
</head>

<body>
    <div>三生三世十里桃花，一心一意百行代码。</div>
</body>

四css文本属性可定义的外观，比如颜色，对齐文本，装饰文本，文本缩进，行间距
4-1 颜色

    <style>
        div {
            /* color: deeppink; */
            /* color: #cc00ff; */
            color: rgb(200, 0, 0);
        }
    </style>
</head>

<body>
    <div>有故事的人一般都很有意思啊.小姐姐们。</div>
</body>

4-2 对齐文本

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

<body>
    <h1>居中对齐的标题</h1>
</body>

4-3装饰文本

  <style>
        div {
            /*  下划线  */
            /*text-decoration: underline;  */
            /* 删除线  */
            text-decoration: line-through;
            /* 上划线 */
            /* text-decoration: overline; */
        }
    </style>
</head>

<body>
    <div>青春的点点滴滴</div>
</body>

4-4文本缩进

  <style>
        p {
            font-size: 24px;
            /*  文本的第一行首行缩进 多少距离  */
            /* text-indent: 20px;  */
            /* 如果此时写了2em 则是缩进当前元素2个文字大小的距离  */
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p>如果光已忘了将前方照亮，她会跟着我一起走吗，如果路会通往不知名的地方，一生好长，一瞬太短，夜里忽然醒来又选择遗忘，幸好啊，你的光又落在我身旁</p>
    <p>茫然走在海边，看那潮来潮去，突然想把每朵浪花拍尽.如果大海能够带走曾经的爱，就让我用深情等待，如果深情往事你也不再留恋，就让她随风飘远。</p>
    <p>十九岁的那一天，我来到黄淮的面前，</p>
</body>

4-5行间距

   <style>
        div {
            line-height: 26px;
        }
        
        p {
            line-height: 25px;
        }
    </style>
</head>

<body>
    <div>中国人</div>
    <p>如果光已忘了将前方照亮，她会跟着我一起走吗，如果路会通往不知名的地方，一生好长，一瞬太短，夜里忽然醒来又选择遗忘，幸好啊，你的光又落在我身旁</p>
    <p>茫然走在海边，看那潮来潮去，突然想把每朵浪花拍尽.如果大海能够带走曾经的爱，就让我用深情等待，如果深情往事你也不再留恋，就让她随风飘远。</p>
    <p>十九岁的那一天，我来到黄淮的面前，</p>
</body>

五
在这里插入图片描述