当前位置：首页 > news >正文

CSS样式学习

news 2025/7/30 0:25:40

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>

按钮禁用