CSS边框及常用样式
CSS 常用 样式 边框
2023-09-14 09:08:29 时间
一、CSS设置样式
1.1 边框border
作用:设置标签周围的边框,方法 board:宽度 样式 颜色,一般情况下样式使用 solid实体的,和dotted虚线的
<head> <meta charset="UTF-8"> <title>css边框</title> <style> .c1{ border: 1px solid red; } </style> </head> <body> <div class="c1"> 今天天气真好 </div> </body>
此外还有 border-top,border-left,border-right,border-bottom,分别是边框顶部,边框左边,边框右边,边框底部
1.2 高度height
作用:设置标签的高度的,使用方法:height: 高度大小 ,可以是具体的数字大小比如说:20px,也可以是百分比:80%,但是高度没有固定的值,这个设定要在一个边框内,否则没有意义。
<head> <meta charset="UTF-8"> <title>css边框</title> <style> .c1{ border: 1px solid red; height: 80px; } </style> </head> <body> <div class="c1"> 今天天气真好 </div> </body>
1.3 宽度width
作用:设置标签的宽度,使用方法:width:宽度大小,这个跟上面的height是一样的,可以是具体大小:50px,也可以根据浏览器大小设置为百分比:80%
<style> .c1{ border: 1px solid red; height: 80px; width: 70%; } </style>
1.4 字体大小 font-size
作用:设置标签内的字体大小,使用方法:font-size:字体大小,示例:font-size:20px
<style> .c1{ border: 1px solid red; height: 80px; width: 70%; font-size:20px; } </style>
1.5 字体颜色 color
作用:设置标签内的字体颜色, 使用方法: color:颜色,示例:color:red
<style> .c1{ border: 1px solid red; height: 80px; width: 70%; font-size:20px; color: blue; } </style>
1.6 字体加粗 font-weight
作用:给你标签内的字体加粗。使用方式:font-weight:bold
<style> .c1{ border: 1px solid red; height: 80px; width: 70%; font-size:20px; color: blue; font-weight: bold; } </style>
1.7 水平居中
作用:能把标签内的字体,进行水平居中。使用方法:text-align:center
<style> .c1{ border: 1px solid red; height: 80px; width: 70%; font-size:20px; color: blue; font-weight: bold; text-align: center; } </style>
1.8 垂直居中
作用:能把标签内的字体,进行水平居中。使用方法:line-height:标签高度值。
<style> .c1{ border: 1px solid red; height: 80px; width: 70%; font-size:20px; color: blue; font-weight: bold; text-align: center; line-height:80px; } </style>
相关文章
- wordpress添加二级导航功能CSS代码
- 在html中加入外部css样式,如何引入CSS样式表?
- 【说站】css自定义属性如何继承
- 【说站】css中first-letter是什么
- CSS中常用的一些函数
- 常用的HTML和CSS(content)特殊字符图标
- CSS颜色操作案例Demo【彩色标记笔】
- CSS 实现水平和垂直居中的三种方法
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- 【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )
- CSS常用的属性命名详解编程语言
- CSS如何影响MySQL的使用(css影响MySQL)
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- 采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
- jQuery使用手册之三CSS操作
- CSS优化2-(常用CSS缩写语法总结)
- css布局网页水平居中常用方法
- 顶级经典常用的CSS属性收集整理
- 校内网css代码添加背景图片常用代码
- asp.netCheckBoxList各项最小宽度CSS样式(兼容性good)
- 纯CSS实现鼠标放上去改变文字内容