内容简介:回到我们的按钮例子:页面上有一个按钮,目前是没有任何自定义样式的,只有一个默认的样式。这里没有直接设置按钮的宽度,而是设置了按钮内边距,这样按钮的宽度会根据文字的长度而撑开。
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。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。