一、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. React.js - 入门

    React.js - 第1天 1. React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 ...

  2. Final阶段中间产物

    空天猎功能说明书:https://git.coding.net/liusx0303/Plane.git 空天猎代码控制:https://coding.net/u/MR__Chen/p/SkyHunte ...

  3. 20172319 2018.04.11-16 《Java程序设计教程》 第6周学习总结

    20172319 2018.04.11-16 <Java程序设计教程>第6周学习总结 目录 教材学习内容总结 教材学习中的问题和解决过程 代码调试中的问题和解决过程 代码托管 上周考试错题 ...

  4. WebGL学习笔记五

    本章主要是对纹理的进一步讲解,我们很多时候需要将现实中已有 的图片在网页中展示出来而不是去创造图片,通过纹理 我们可以将光栅化的图形和图片纹理形成映射并且将图片在图形 中显示出来.基本过程与前几章一致 ...

  5. 我是一名IT小小鸟

    我是一只it小小鸟 书中介绍了it界大牛们大学期间的学习方法和对未来的职业规划,相比他们,自我感觉相距甚远,对这学科的热情程度也远远比不上他们. 就拿目前数据结构这门高深的课程,应通过更多的课外扩展来 ...

  6. 项目冲刺Beta第一篇博客

    Beta版本冲刺计划安排 1.当天站立式会议照片: 2.工作分工: 团队成员 分工 张洪滨060  排行榜界面美化 陈敬轩059  注册成功界面美化 黄兴067  登录界面美化 林国梽068  答题界 ...

  7. 第三章 深入Servlet技术

    3.1 配置Servlet <servlet-name>,<servlet-class>是必须配置的,以便于web容器知道浏览器具体访问的是哪个servlet. <ini ...

  8. NET Core 部署到 Windows服务

    https://www.cnblogs.com/linezero/p/5159927.html https://www.cnblogs.com/emrys5/p/nssm-netcore.html h ...

  9. Spring 2.0

    ProductBacklog:继续向下细化; 1.界面美化,统一界面风格,以简洁美观为主: 2.丰富版面的内容,吸引用户: 3.尝试增加新的版面: Sprint 计划会议:确定此次冲刺要完成的目标 1 ...

  10. 网页访问过程(基于CDN)

    1. 全局负载均衡(基于DNS) 如果有多台 WEB 服务器同时为一个域名提供服务时,即一条 URL 对应多个 IP 地址,那么该 URL 的权威域名服务器可能会根据该 URL 解析出多个 IP 地址 ...