博主废话少说，直接介绍css常用的属性和属性值；属性和值只需过一遍，页面的结构还是需要布局，布局的只是后期会更新的。

提供一些图标的网站：font-awesome:     http://fontawesome.dashgame.com/   |       iconfont:      http://www.iconfont.cn/

文本样式

　　1、字体样式

　　　　color 为字体指定颜色 ，取值如下：

　　　　　　颜色的英文单词：white、RGB值rgb(255,255,255)、RGBA值rgba(255,255,255,0.5)、16进制值#ffffff

　　　　font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体，取值如下：

　　　　　　通用字体

　　　　　　　　• serif :有衬线的字体,笔画结尾有特殊的装饰线或衬线

　　　　　　　　• sans-serif :无衬线的字体，笔画结尾是平滑的字体

　　　　　　　　• monospace :等宽字体，用于代码，字体中每个字宽度相同

　　　　　　　　• cursive :草书，这种字体有的有连笔，有的还有特殊的斜体效果。

　　　　　　　　• fantasy :装饰字体 ，具有特殊艺术效果的字体

　　　　　　常用字体

　　　　　　　　• Microsoft YaHei

　　　　　　　　• 微软雅黑

　　　　　　　　• 宋体

　　　　　　注意：可以连续去多个值，当第一种没有就使用第二种，以此类推

　　　　　　导入系统外的字体

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>样式表的引入方式</title>

        <style>

        div{

            font-family: myFont;   /*使用自定义字体*/

        }

        @font-face{

                        /* 自己定义的字体名字，src找出字体的安装路径*/

            font-family: "myFont";

            src: url("字体的安装路径");

        }

    </style>

</head>

<body>

    <div>

            测试自己定义下载安装的字体样式

        </div>

</body>

</html>

　　　　font-style 用于打开和关闭斜体文本，取值如下：

　　　　　　normal:正常字体、 italic：斜体、oblique：模拟斜体

　　　　font-weight 为字体设置粗细程度，取值如下：

　　　　　　normal,bold:正常，加粗字体、lighter,bolder:比父元素更细，更粗、 100-900：数值类型的粗细程度

　　　　font-size 为文字指定大小，取值如下：

　　　　　　类似于16px、20px、30px

　　　　text-align 文字排列方式，取值如下：

　　　　　　center:居中对齐、left：靠左对齐、right：靠右对齐

　　　　text-transform 设置或者取消字体改变，取值如下：

　　　　　　none :防止任何改变 、uppercase: 将文本转换为大写 、lowercase: 将文本转换为小写 、capitalize: 将所有单词第一个字母转换为大写 、 full-width: 转换为类似于一个等宽字体

　　　　text-decoration 设置或者取消文本修饰，取值如下：

　　　　　　none : 取消所有文本修饰 、underline : 为文本添加下划线 、 overline : 为文本添加上划线 、 line-through : 为文本添加删除线

　　　　text-shadows 设置或者取消文本阴影，语法：text-shadow:h-shadow v-shadow blur color;  取值如下：

　　　　　　none : 取消所有阴影

　　　　　　h-shadow : 必需。水平阴影的位置。允许负值。

　　　　　　v-shadow : 必需。垂直阴影的位置。允许负值。

　　　　　　blur : 可选。模糊的距离。

　　　　　　color : 可选。阴影的颜色。参阅 CSS 颜色值。

　　2、列表样式

　　　　list-style-type : 设置列表项标志类型，取值如下：

　　　　　　none：没有标志、

　　　　　　无序列表：

　　　　　　　　disc：默认实心圆、circle：空心圆、square：正方形、

　　　　　　有序列表：

　　　　　　　　decimal：数字从1开始、lower-roman：小写的罗马i ii iii iv、upper-roman：大写的罗马I II III IV、lower-alpha：小写字母

　　　　list-style-position : 设置列表项标志出现的位置，取值如下：

　　　　　　outside : 列表项标志出现在主块框的外部 、 inside : 列表项标志出现在主块框的内部

　　　　list-style-image : 自定义设置列表项标志，取值如下：

　　　　　　url(“存放地址”)

　　　　list-style : 列表样式的速记写法，取值如下：

　　　　　　[<type>][<image>][<position>]

　　　　line-height 设置列表的行高

　　3、文本样式

　　　　cursor : 调整光标悬浮到链接上的时候光标的形状，取值如下：

　　　　　　pointer:手势、wait：等待、。。。。

　　　　outline : 调整环绕链接的框

　　　　text-decoration : 自定义设置列表项标志

　　　　text-align : 文本对齐方式

盒子

HTML5中有两种盒子模型，但是我们常用的都是默认盒子模型/W3C盒子模型/标准盒子模型；还有一种是边框盒子模型/IE盒子模型。这两种盒子模型的转换有属性名box-sizing,默认盒子模型的值是content-box,边框盒子模型的值是border-box。

我们对默认盒子模型设置宽高就是相当于对盒子的内容区域设置宽高；对边框盒子模型设置宽高就是设置整个盒子的宽高，之后都是针对默认盒子模型展开的。

　　width & height 用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度

　　padding 代表内容盒子的外边界与外边框的内边界之间的距离

　　border 设定介于padding的外边缘与 margin的内边缘之间，默认值为0

　　margin 代表盒子四周的区域。设值方法 与padding类似。相邻元素的边 框会合并（margin collapsing ）

　　1、盒子背景样式：

　　　　background-color 为元素设置一种颜色，取值如下：

　　　　　　和上面取颜色的值是一样的

　　　　background-image 为元素设置一个背景图片， 取值如下：

　　　　　　none：不设置图片、url()： 图片的存放地址

　　　　background-clip 设定背景的覆盖范围，指的是将背景图片一整张放置上面，如果是content-box，就会把content-box之外的图片裁剪掉，取值如下：

　　　　　　• border-box : 背景位于边框以内 • padding-box : 背景位于内边距以内 • content-box : 背景位于内容区

　　　　background-origin 设定背景的起始点，指的是从哪里开始放置图片，取值如下：

　　　　　　• border-box : 背景图片从边框的外边缘开始绘制 • padding-box : 背景图片从内边距的外边缘开始绘制 • content-box : 背景图片绘制在内容区

　　　　background-position 设置为背景图像初始位置，相当于background-origin定义的位置，给个坐标就行，类似于 background-position: 200px 100px;

　　　　background-repeat 设置背景图片的重复方式，取值如下：

　　　　　　• repeat : 为了覆盖整个背景范围，背景图片尽可能多的重复，在背景 边缘切割(clipping)最后一个图片以使用整个背景范围。

　　　　　　• space : 使用空白分隔开图片，尽可能使背景图片占满整个屏幕而不 使用切割(clipping)

　　　　　　• round : 将图片压缩或者是扩展以适应整个背景范围，不使用切割；如果区域能容纳两种，就会绘制两张

　　　　　　• no-repeat : 不重复

　　　　background-attachment 设置背景图片的固定点，取值如下：

　　　　　　• fixed : 背景固定在视口上 • scroll : 背景固定在自身元素上 • local : 背景固定在自身元素的内容上

　　　　background-size 设置背景的大小，取值如下：

　　　　　　• cover : 背景宽高等比例铺满整个屏幕，（尽量不要使用大图覆盖小范围）

　　　　background 背景设置的速记写法

　　　　　　[<attachment>][<clip>][<color>][<image>][<position>][<repeat>]

　　2、盒子边框样式

　　　　border-width 为元素指定边框的宽度，给个具体的值就行，类似于1px、2px

　　　　border-style 为元素指定边框样式，取值如下：(1个值--》上下左右；2个值--》上下，左右；3个值--》上，左右，下；4个值--》上，右，下，左

　　　　　　• none : 不设置 • hidden : 隐藏 • dotted : 显示一系列的点 • dashed : 显示一系列小线段

　　　　　　• solid : 显示一条单一的实心直线 • double : 显示两条实心直线 • groove : 边框雕刻效果(与ridge相反)

　　　　　　• ridge : 与groove相反 • inset : 嵌入式边界框(与outset相反) • outset : 突出的边界框

　　　　border-color 为元素指定边框颜色，和上面的颜色取值一样

　　　　border-radius 为元素指定圆角边框的半径，给个具体的数值就行

　　　　border-image 为元素设定边框背景

　　　　　　border-image-source 用于加载作为边框的图片

　　　　　　　　• url()

　　　　　　border-image-slice 用于切割边框图片

　　　　　　　　• one value : 每边都是这个值切割

　　　　　　　　• Two values : 上下边是一个值，左右边是一个值

　　　　　　　　• Three values : 上边一个值, 左右一个值, 下边一个值

　　　　　　　　• Four values : 上右下左都取一个值

　　　　　　border-image-repeat 用于设置边框图片重复方式

　　　　　　　　• stretch : 拉伸，不推荐；repeat : 重复切割；

　　　　　　　　• round : 重复自适应； space : 重复自适应；

　　　　border 边框相关属性的速记写法

　　3、表格样式

　　　　table-layout 指定显示表格的盒子，行，列的算法，取值如下：

　　　　　　• auto : 【默认值】绝大多数浏览器采用的一种布局表格的方式。table以及 cell的宽度取决于包含在其中的内容

　　　　　　• fixed : table的宽度以及列的宽度取决于表格的第一行各列设定的宽度

　　　　border-collapse 指定表格的边框是合并还是分开，取值如下：

　　　　　　• separate: 【默认值】分开模式，表示相邻的两个格子都有独立边框

　　　　　　• collapse: 合并模式，表示相邻的两个格子共享边框

　　　　caption-side 指定caption坐落在表格的哪个位置上，取值如下：

　　　　　　• top : 标题位于表格的上方

　　　　　　• bottom : 标题位于表格的下方

　　　　　　• left : 标题位于表格的左方

　　　　　　• right : 标题位于表格的右方

前端开发CSS3——文本样式和盒子及样式的更多相关文章

  1. web前端开发:css3实现loading

    web前端开发:css3实现loading 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE ...

  2. 1+x 证书 Web 前端开发 CSS3 专项练习

    官方QQ群 1+x 证书 Web 前端开发 CSS3 专项练习 http://blog.zh66.club/index.php/archives/196/

  3. web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式

    12.  文字和字体相关样式 12.1  CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...

  4. 前端开发CSS3——使用方式和选择器

    CSS是Cascading Style Sheets(层叠样式表)的简写,用于修饰文档的语言,可以修饰HTML.XML.SVN.每个语言都有每个语法的规则:CSS声明.CSS声明块.CSS选择器.CS ...

  5. 1+x证书Web前端开发CSS3详细教程

    web 前端开发之 CSS3 新特性 http://blog.zh66.club/index.php/archives/189/ web 前端开发之 html5 新特性 http://blog.zh6 ...

  6. 1+x 证书 web 前端开发初级对应课程分析

    响应国家号召 1+X 证书 Web 前端开发考试样题 官方QQ群 1+x 证书 web 前端开发初级对应课程分析 http://blog.zh66.club/index.php/archives/19 ...

  7. 响应国家号召 1+X 证书 Web 前端开发考试模拟题

    1+x证书Web前端开发初级理论考试样题2019 http://blog.zh66.club/index.php/archives/149/ 1+x证书Web前端开发初级实操考试样题2019 http ...

  8. HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型

    本教程案例在线演示 有路网PC端 有路网移动端 教程配套源码资源 教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页分割为独立的.不同的部分. 可以看成 ...

  9. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

随机推荐

  1. 利用Fiddler模拟通过Dynamics 365的OAuth 2 Client Credentials认证后调用Web API

    微软动态CRM专家罗勇 ,回复337或者20190521可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me. 配置Dynamics 365 & PowerApps 支 ...

  2. HTTP协议中的Range和Content-Range

    " 琢磨HTTP协议的每一个细节." HTTP协议博大精深,每一个细节都应细细体会. 否则,在协议还原的过程中,你会遇到各种问题. 今天,本文中将对HTTP协议的Range和Con ...

  3. [20190913]完善vim的bccacl插件2.txt

    [20190913]完善vim的bccacl插件2.txt --//继续完善vim的bccacl插件.--//\bc 计算也可以直接使用 \bb 操作,这样操作更快一些.--//增加直接写好算式计算的 ...

  4. Lustre 文件系统安装

    制作一个本地镜像 reposync configfile: [root@localhost html]# cat lustre-repo.conf [lustre-server] name=lustr ...

  5. javascript 生成指定范围内的随机数

    js 生成任意2个区间内的随机整数,js 生成两个数之间的随机数 function random(m,n) { return Math.floor(Math.random() * (n - m)) + ...

  6. 一些有价值bug产生的思考

    1.异步处理时防止重复点击的逻辑校验 场景 打款请求时,进入异步处理的队列,生成一个任务号,存在如数据库,且状态为未完成.此时,如果并发操作,如重复点击或者重复调用接口,则发出的两条请求可能被分配到不 ...

  7. pycharm添加断点，分段运行，以及继续运行；

    1.打断点,只需在代码的前面单机左键即可:2.运行,点击Debug...(如图,像贝壳一样的图标),只会运行第一个红点前的代码: 3.此时若想将第2个红点前的代码运行完毕:点击Resume Progr ...

  8. 肖哥讲jquery：

    jquery 是一个模块 一个库 js封装的一个库 导入jq  <script src="jquery.js"></script>   <script ...

  9. Feign的介绍与使用（五）

    一.Feign的介绍 Feign是一个声明式 WebService 客户端,使用Feign能够让编写Web Service 客户端更加简单,它的使用方法是定义一个接口,然后在上面添加注解,同时也支持J ...

  10. 浅谈DFS序

    浅谈DFS序 本篇随笔简要讲解一下信息学奥林匹克竞赛中有关树的DFS序的相关内容. DFS序的概念 先来上张图: 树的DFS序,简单来讲就是对树从根开始进行深搜,按搜到的时间顺序把所有节点打上时间戳. ...