CSS样式学习-基本用法

news2024/11/16 17:31:03

html超文本传输标签，属性等权重

outline 标签轮廓

outline: none; 表示无轮廓（开发时用的比较多）

CSS 轮廓（outline）属性 | 菜鸟教程

css匹配流程（从下到上，从右到左）

Butten去掉边框

CSS 按钮 | 菜鸟教程

<style>
    .btn {
        outline: none;
        background-color: white;
        height: 36px;
        font-size: 14px;
    }
    .btn.success{
        background-color: #5cb85c;
    }
    .btn.warning{
        background-color: #f0ad4e;
    }
    .btn.danger{
        background-color: #d9534f;
    }
</style>
<body>
    <div>
        <button class="btn">按钮</button>
        <button class="btn success">按钮</button>
        <button class="btn warning">按钮</button>
        <button class="btn danger">按钮</button>
    </div>
</body>
</html>

复合词 id 下划线类中连线

CSS参考手册_web前端开发参考手册系列

宽高

前三个用的比较多

（overflow 溢出可隐藏，或者滚动等等）

字体

浏览器默认字体大小16px 字体大小设置的是高度，宽度是自动缩放

常用（14，16，12）标题18

font-weight 字体粗细 lighter normal bold bolder(特粗)

font-style : oblique （可以强制斜体）

（em 指强调可以将font-style 置normal）

(可以填写符复合值)

font-family:"TIME NEW ROMAN ",Georgia,serif;

font-family:cursive; 楷体

p标签color

边框

text-align 对齐

一行占据的高度（默认行高22）文字居中

text-indent 文本缩进

text-decoration 文本修饰

光标

光标常用值。

不换行

隐藏显示省略号3大件

内联块

可以将A标签写成按钮

：hover 伪类选择器，可以控制鼠标移入按钮的颜色变化

height：指定区域的高度

line-height：一行的高度，简称行高。

header实例

<style>
    .header{
        width: 100%;
        min-width: 1442px;
        height: 60px;
        background-color: black;
    }
    a{
        text-decoration: none;
    }
    .ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .header ul{
        height: 100%;
    }
    .header ul li{
        float: left;
        width: 150px;
        height: 100%;
    }
    .header ul li a{
        display: block;
        height: 100%;
        width: 100%;
        color: #fff;
        line-height: 60px;
        text-align: center;
        font-size: 16px;
    }
    .header ul li.active a{
        color:#FD5;
        background-color: #333;
    }
    .header ul li a:hover{
        color:#FD5;
        background-color: #333;
    }
</style>
<body>
    <div class="header">
        <ul>
        <li class="item">
            <a href="">首页</a>
        </li>
        <li>
            <a href="">服务号</a>
        </li>
        <li>
            <a href="">微课堂</a>
        </li>
        <li>
            <a href="">系列课</a>
        </li>
        <li>
            <a href="">直播课程</a>
        </li>
    </ul>
    </div>
</body>
</html>

按钮禁用