使用CSS定义页面元素的外观样式

栏目: CSS · 发布时间: 5年前

内容简介:回到我们的按钮例子:页面上有一个按钮,目前是没有任何自定义样式的,只有一个默认的样式。这里没有直接设置按钮的宽度,而是设置了按钮内边距,这样按钮的宽度会根据文字的长度而撑开。

CSS 在网页里的作用,我分成两块:一是定义页面元素的外观样式,二是定义页面元素的排版布局。本篇就通过例子来说明:如何使用 CSS 来定义页面元素的样式?

回到我们的按钮例子:页面上有一个按钮,目前是没有任何自定义样式的,只有一个默认的样式。

<html>
  <head>
    <title></title>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button onclick="buttonHandler()">
      按钮
    </button>
  </body>
</html>
复制代码

1、设置按钮的宽度和高度

<html>
  <head>
    <title></title>
    <style>
      /* 元素通过选择器与样式关联 */
      .button {
        /* 设置按钮高度 */
        height: 32px;
        /* 设置按钮内边距 */
        padding: 0 15px;
      }
    </style>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">
      按钮
    </button>
  </body>
</html>
复制代码

这里没有直接设置按钮的宽度,而是设置了按钮内边距,这样按钮的宽度会根据文字的长度而撑开。

2、让这个按钮变靓

<html>
  <head>
    <title></title>
    <style>
      /* 元素通过选择器与样式关联 */
      .button {
        /* 设置按钮高度 */
        height: 32px;
        /* 设置按钮内边距 */
        padding: 0 15px;
        /* 设置背景颜色 */
        background-color: #1890ff;
        /* 设置边框颜色 */
        border-color: #1890ff;
        /* 设置文字的颜色 */
        color: #fff;
        /* 设置字号 */
        font-size: 14px;
        /* 设置圆角 */
        border-radius: 4px;
        /* 给文字加上阴影 */
        text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
        /* 给边框加上阴影 */
        box-shadow: 0 2px 0 rgba(0,0,0,0.045);
      }
    </style>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">
      按钮
    </button>
  </body>
</html>

复制代码

现在这个按钮就长得和 ant-design 一样了,我填加了注释来说明不同属性的作用。通过设置不同属性的值, CSS 支持你把页面元素定义成自己想要的任何外观!其它的属性可以查阅 CSS 文档。

让按钮的样式响应交互

<html>
  <head>
    <title></title>
    <style>
      /* 元素通过选择器与样式关联 */
      .button {
        /* 设置按钮高度 */
        height: 32px;
        /* 设置按钮内边距 */
        padding: 0 15px;
        /* 设置背景颜色 */
        background-color: #1890ff;
        /* 设置边框颜色 */
        border-color: #1890ff;
        /* 设置文字的颜色 */
        color: #fff;
        /* 设置字号 */
        font-size: 14px;
        /* 设置圆角 */
        border-radius: 4px;
        /* 给文字加上阴影 */
        text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
        /* 给边框加上阴影 */
        box-shadow: 0 2px 0 rgba(0,0,0,0.045);
      }
      /* CSS伪类 */
      .button:hover {
        /* 设置透明度 */
        opacity: 0.8;
      }
    </style>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">
      按钮
    </button>
  </body>
</html>
复制代码

当鼠标经过按钮的时候,按钮会变成半透明。

给按钮添加(过渡)动效

<html>
  <head>
    <title></title>
    <style>
      /* 元素通过选择器与样式关联 */
      .button {
        /* 设置按钮高度 */
        height: 32px;
        /* 设置按钮内边距 */
        padding: 0 15px;
        /* 设置背景颜色 */
        background-color: #1890ff;
        /* 设置边框颜色 */
        border-color: #1890ff;
        /* 设置文字的颜色 */
        color: #fff;
        /* 设置字号 */
        font-size: 14px;
        /* 设置圆角 */
        border-radius: 4px;
        /* 给文字加上阴影 */
        text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
        /* 给边框加上阴影 */
        box-shadow: 0 2px 0 rgba(0,0,0,0.045);
        /* 设置透明度变化时的过渡效果 */
        transition: opacity 0.5s;
      }
      /* CSS伪类 */
      .button:hover {
        /* 设置透明度 */
        opacity: 0.2;
      }
    </style>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">
      按钮
    </button>
  </body>
</html>
复制代码

为了让效果看起来明显,我将鼠标经过时的透明度设置成了0.2。设置 transition 属性后,按钮的透明度变化就会有一个过渡效果,而不是直接从1变成0.2。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

交互设计

交互设计

. / 刘晓晖、张景 / 电子工业出版社 / 2003-6 / 39.00元

一起来看看 《交互设计》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具