一、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边框及常用样式的更多相关文章

  1. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  2. CSS边框闪烁呼吸样式

    <html> <body> <head> .arrow_box{animation: glow 800ms ease-out infinite alternate; ...

  3. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  4. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  5. #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

  6. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  7. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  8. 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范

    常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...

  9. CSS 四种样式表 六种规则选择器 五种常用样式属性

    新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...

随机推荐

  1. 为什么找程序员一定要看他的 GitHub

    听说 最开始听到这句话是某知名互联网公司大牛告诉我的,我很不以为然,不过迫于他是"leader"我也注册了一个 highsea (广告 0.0):当然我可懒得 push 更别提 c ...

  2. 字幕字体滚动插件——scroxt.js

    README scroxt.js Overview scroxt.js是一个字体滚动的插件库,包括视频弹幕滚动,直播弹幕.直播弹幕强制模式.单行水平左右滚动.文本垂直滚动上下,用于简单快捷生成滚动字体 ...

  3. No.1000_第五次团队会议

    光辉的一夜 今夜注定是不平凡的一夜.是崔强同学伟大的一夜. 昨天因为实验室项目,我刚上完编译课就被学院叫走去做项目,当时我就很无奈,因为说好了要和崔强一起实现下午的前端,他写界面我写底层逻辑,这样我们 ...

  4. 信安实践——自建CA证书搭建https服务器

    1.理论知识 https简介 HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HT ...

  5. PAT 甲级 1010 Radix

    https://pintia.cn/problem-sets/994805342720868352/problems/994805507225665536 Given a pair of positi ...

  6. json对象与json字符串的区别

    最近糟了这个坑,同一个方法,android和ios返回的数据不一样,一个是json字符串,另一个是json对象(至于为什么后台返回的是json对象,还没找到原因,但是我看到的后台的代码是有在返回之前给 ...

  7. Robot Framework 教程 (7) - 使用For循环

    在自动化测试过程中,使用For循环来对某个动作进行重复操作是很普遍的行为.在Robot Framework中,各种测试库中均提供了多种方式的For循环结构,在其中覆盖了大部分类型的循环类型.而Robo ...

  8. laravel多环境配置(local,testing,production)

    根据不同的环境有不同的配置,laravel中,可以把配置写到.env文件中 在系统中,可以使用env(key, "默认值")来获取env中的配置信息 在laravel中运行时,会运 ...

  9. (转)web开发流程

    a.项目经理与公司决策层的沟通,以确定这个需求有没有足够的人手和可行性去实现,以及与现有产品的依存关系. b.公司决策层与市场/策划部门的交流,这个过程将进行的相当充分,并且是反复.长期的,它致力于从 ...

  10. JS贪吃蛇小游戏

    效果图展示: 具体实现代码如下: (1)html部分 !DOCTYPE html> <html> <head> <meta charset="utf-8& ...