CSS样式入门

hello_ world.

已于 2024-07-15 11:21:26 修改

阅读量93

点赞数 2

分类专栏：笔记文章标签： css

于 2024-07-07 17:14:14 首次发布

本文链接：https://blog.csdn.net/weixin_44586352/article/details/140248970

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS用来美化HTML标签

1,CSS应用方式

直接写在标签上
在head 标签中写style标签
写到文件中

写在标签上

<div style="color: aqua;"> hello world</div>

head标签中写style标签

<head>
    <title>hello</title>
    <style>
        .co{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="co">hi color</div>
</body>

3.写在文件中
暂不使用此方法

2,选择器

ID选择器
类选择器
标签选择器

<head>
    <title>样式</title>
    <style>
        .co1{
            color: red
        }
        #co2{
            color: gold;
        }
        li{
            color: pink;
        }
    </style>
</head>
<body>
    <div class=co1> cctv</div>
    <div id=co2> 中国黄金    </div>
    <ul>
        <li>长城汽车</li>
        <li>吉利汽车</li>
        <li>长安汽车</li>
    </ul>
</body>

在这里插入图片描述

属性选择器

<head>
    <title>hello</title>
    <style>
        input[type='password']{
            border: 1px solid gold;
        }
        .co[xx="123"]{
            color: red;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="password">

    <div class="co" xx="123">hello</div>
    <div >world</div>

</body>

后代选择器

<head>
    <title>hello</title>
    <style>
        .yy li{
            color: pink;
        }
        .yy a{
            color: blue;
        }
        .yy > a{
            color: green;
        }
    </style>
</head>
<body>
    <div class="yy">
        <a>百度</a>
        <div>
            <a>谷歌</a>
        </div>
        <ul>
            <li>facebook</li>
            <li>telegram</li>
        </ul>
    </div>
</body>

> a 表示只匹配儿子(a标签)

3.高度和宽度

<head>
    <title>hello</title>
    <style>
        .co{
        width: 100px;
        height: 10px; 
    }
    </style>
    
</head>
<body>
    <div class="co">
        world
    </div>
</body>

注意:

宽度支持百分比, 但是高度不支持
块级标签默认生效
行内标签默认无效

<head>
    <title>hello</title>
    <style>
        .co{
        display: inline-block;
        width: 100px;
        height: 90px; 
        border: solid blue;
    }
    </style>
    
</head>
<body>
    <span class="co">
        world
    </span>
    <span> !!</span>
</body>

span换成则可以根据自身大小, 占据空间

<head>
    <title>hello</title>
    <style>
        .co{
        display: inline;
        width: 100px;
        height: 90px; 
        border: solid blue;
    }
    </style>
    
</head>
<body>
    <div class="co">
        world
    </div>
    <span> !!</span>
</body>

inline使得div具备块级标签的特性
block使得span 具备行内标签的特性

4.居中

水平方向居中 text-align: center;
垂直方向居中 line-height: <高度>px;

5.浮动

<head>
    <title>hello</title>
    
</head>
<body>
    <span >左</span>
    <span style="float: right;"> 右</span>
</body>

div是行级标签但是, 浮动起来就不一样了.

<head>
    <title>hello</title>
    <style>
        .co{
            float: left;
            width: 90px;
            height: 90px;
            border: 1px solid goldenrod;
        }
    </style>
</head>
<body>
    <div class="co"></div>
    <div class="co"></div>
    <div class="co"></div>
</body>