CSS的使用方式

努力成为高手V1

于 2024-03-12 18:03:31 发布

阅读量875

点赞数 20

文章标签： css 前端

本文链接：https://blog.csdn.net/NanandV1/article/details/136655633

版权

如果前面我们学习的HTML是表面，那么CSS就是给这个表面穿了一件衣服，CSS有三种有三种方式表达，给大家讲解一下：

一、第一种使用方式：行内样式

所有标签自带style属性：style="color（字体颜色、样式）：选择颜色；banckground（背景颜色、样式）：选择颜色；”，如果有多个样式，样式和样式之间我们用分号；隔开，记住一个小问题，行内样式的缺点就是容易代码混编，不方便阅读代码。

 <h1 style="background:yellow;color:green" >哈哈哈哈哈哈</h1>

用h1标签给大家演示一下效果：

我们把背景颜色（banckground）改为的是黄色（yellow），字体颜色（color)改成绿色(green)。

二、第二种使用方式：內嵌样式

在head标签中写一对style标签，在style标签中，去找到想加的样式的标签。

  <head>
    <style>
            /* 标签{
                样式1：样式1值;
                样式2：样式2值;
                样式3：样式3值;
            } */

            h1{
                background:blue;
                color:red;
            }
            li{
                color:green;
            }
        </style>

</head>

在head里面加入h1背景颜色蓝色（blue）字体颜色red（红色）我们在body输入内容就可以了。图如下所示：

三、外部链接样式（在外部加一个css文件，在当前网页中去链接css文件）

在head（头部）中使用link标签，比如：<link rel（属性文档）=“stylesheet（样式表）”heaf（来链接文件路径）=" ”

记住一点：行内样式>內嵌样式、外连接样式，样式使用谁离内容近谁优先使用颜色

关于HTMl的小补充了解两个双标签：div 块标签，可以将这个通过页面分成很多块。还有一个span标签可以采取一小段内容样式化。

四、通过class类名称获取标签

class类名前面加 . 类名，class类名可以重复使用。

在标签中加入class属性，class=“类名”在class中通过类名的形式去写样式

   <h1>选择权</h1>
    <p class="a">远远嘟嘟</p>
    <div id="a">为了明天吃早饭</div>

五、选择器

（1）表签选择器:在head中加入style中改

  <style>
        <div>
        border :red}
  </style>

（2）类别选择器：可以重复使用，在style中修改比如 .aa

.aa{
            background:skyblue;
            color:red;
        }

(3)id选择器：唯一标识用（#加样式）不能重复

   <style>     
        #a{
            color:orange;
        }
        #b{
            color:aqua
        }

        #c{
            color:blueviolet
        }
   </style>
 <ul>
        <li id="a">1</li>
        <li id="b">2</li>
        <li id="c">3</li>
 </ul>

六、常用css（在style里修改）

width （宽):w 100=width 100px;(px计算机单位）

 width: 100px;

hegiht （高）：h 100=hegiht 100px;

 width: 100px;

font-size（文字）改变文字大小，文字默认大小是16px

font-size:30px;

font-weight（体重）改变文字加粗

font-weight: 700;

文字水平对齐方式：text-align=“属性”可以填入strat（左对齐）end（右对齐）center（中间）

 text-align:center;

七、边框

边框为四个边，我们还要设置边框颜色，尺寸，材质（线条）

  border-top:red 5px solid;
            /* 下边框 */
            border-bottom:black 3px dashed;
            /* 左边框 */
            border-left:orange 5px double;
            /* 右边框 */
            border-right:blueviolet 1px solid;
            /* 同时设置4个边 */

如果只打出一个border它会同时设置4个边框。

okok，我的学习到这里先结束一下了，欢迎大家阅读，每天有新的学习就来更新。

努力成为高手V1

关注

20
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
CSS的使用方式

我们把背景颜色（banckground）改为的是黄色（yellow），字体颜色（color)改成绿色(green)。在head里面加入h1背景颜色蓝色（blue）字体颜色red（红色）我们在body输入内容就可以了。文字水平对齐方式：text-align=“属性”可以填入strat（左对齐）end（右对齐）center（中间）在标签中加入class属性，class=“类名”在class中通过类名的形式去写样式。边框为四个边，我们还要设置边框颜色，尺寸，材质（线条）四、通过class类名称获取标签。
复制链接

扫一扫