CSS边框及常用样式
一、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
此外还有 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>
height
1.3 宽度width
作用：设置标签的宽度，使用方法：width：宽度大小，这个跟上面的height是一样的，可以是具体大小：50px，也可以根据浏览器大小设置为百分比：80%
<style>
.c1{
border: 1px solid red;
height: 80px;
width: 70%;
}
</style>
width
1.4 字体大小 font-size
作用：设置标签内的字体大小，使用方法：font-size:字体大小，示例：font-size:20px
<style>
.c1{
border: 1px solid red;
height: 80px;
width: 70%;
font-size:20px;
}
</style>
font-size
1.5 字体颜色 color
作用：设置标签内的字体颜色， 使用方法： color：颜色，示例：color：red
<style>
.c1{
border: 1px solid red;
height: 80px;
width: 70%;
font-size:20px;
color: blue;
}
</style>
color
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>
font-weight
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>
text-align
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>
line-height
CSS边框及常用样式的更多相关文章
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- CSS边框闪烁呼吸样式
<html> <body> <head> .arrow_box{animation: glow 800ms ease-out infinite alternate; ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式
属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- CSS常用样式属性
1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...
- 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范
常用样式制作思路 学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...
- CSS 四种样式表 六种规则选择器 五种常用样式属性
新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...
随机推荐
- Django_分页
目录 基本语法 示例 示例1 使用django内置Paginator模块 示例2 改写Paginator 示例3 自定义pager组件 示例3.1 objs与pager各自单独使用 示例3.2 obj ...
- Vue 事件处理
原生的js事件处理 原生的js事件处理,可以分为:直接内联执行代码,或者绑定事件函数. 在内联的事件处理函数内部或者事件绑定的方法内部的作用域中的this都是指向当前的dom对象.如何在vue绑定的元 ...
- 我的寒假C（C++）学习计划
前言 要补缺加强C语言的想法由来已久,上学期因为种种原因,某些知识点学习得不是很理想,而且,许多地方也有加强的必要,所以这次布置的随笔可谓是来得恰到好处. 学习材料 C Primer Plus 师爷的 ...
- ThoughtWorks.QRCode类库
ThoughtWorks.QRCode一个二维码生成类库.
- lintcode-513-完美平方
513-完美平方 给一个正整数 n, 找到若干个完全平方数(比如1, 4, 9, ... )使得他们的和等于 n.你需要让平方数的个数最少. 样例 给出 n = 12, 返回 3 因为 12 = 4 ...
- Docker基础教程
一.Docker是什么? KVM, Virtualbox, Vmware是虚拟出机器,让每个实例看到一个单独的机器:而Docker是虚拟出操作系统,实现应用之间的隔离,让各个应用觉得自己有一个自己的操 ...
- C++ 游戏之点点水果
大二时利用C++编写的点水果小游戏 程序代码总共3个文件,main.cpp Fruit.h Fruit.cpp 代码将在图片下面给出 至于讲解,由于过了一年多的时间,有点忘记了,但我会努力回忆并即时 ...
- 微信小程序配置文件记录
最近公司要求,需要研究微信方面的问题,我有幸被选中了,一周时间,研究透做出个小程序来.我就从简单的开始了,记录一下,以后忘了,好来翻阅 app.json 配置文件 配置文件上写:是由哪些页面组成,配置 ...
- Rsyslog日志服务搭建
rsyslog是比syslog功能更强大的日志记录系统,可以将日志输出到文件,数据库和其它程序.Centos 6.x默认的rsyslog版本是5.x. 网上关于rsyslog的安装配置文档倒是不少,但 ...
- Ubuntu下面 PHPSTORM2017.2破解方法
Ubuntu下面 PHPSTORM2017.2破解方法 下载破解文件 在 http://idea.lanyus.com/上面新下载一个破解文件. 破解步骤 将JetbrainsCrack-2.6.3_ ...