博主废话少说，直接介绍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. 模板引擎Jinja2的基本用法

    Flask提供的模板引擎为Jinja2,易于使用,功能强大.模板仅仅是文本文件,它可以生成任何基于文本的格式(HTML.XML.CSV.LaTex 等等). 它并没有特定的扩展名, .html 或 . ...

  2. [转]Eclipse插件开发之基础篇(6) SWT简介

    原文地址:http://www.cnblogs.com/liuzhuo/archive/2010/09/01/eclipse_plugin_1_3_1.html SWT(Standard Widget ...

  3. greenlet实现协程

    #greenlet 1 import time from greenlet import greenlet # greenlet可以实现一个自行调度的微线程 def work1(): while Tr ...

  4. PHP转Go系列：字符串

    字符串的赋值 在PHP中,字符串的赋值虽然只有一行,其实包含了两步,一是声明变量,二是赋值给变量,同一个变量可以任意重新赋值. $str = 'Hello World!'; $str = 'hia'; ...

  5. Matplotlib 日期格式转换

    官网链接:https://matplotlib.org/api/dates_api.html#matplotlib.dates.date2num import numpy as np import d ...

  6. axios+vue实现动态渲染员工数据+数据是对象

    <style> table{ width: 600px; margin: 0 auto; text-align: center; border-collapse: collapse; /* ...

  7. 23.Java基础_ArrayList类

    ArrayList类的构造和使用方法 import java.util.ArrayList; public class test { public static void main(String[] ...

  8. Python面试题分享——图迹信息科技

    本帖最后由 逆风TO 于 2019-5-23 14:25 编辑 公司名称:西安图迹信息科技有限公司 公司地址:锦业路69号创业研发园瞪羚谷A座9层 主营概况:2013年成立,大数据应用工程中心,为五大 ...

  9. c# 第39节 抽象类、抽象方法

    本节内容: 1:抽象类的说明 2:抽象类的实例 1:抽象类的说明 抽象类定义:方法前有abstract就称为抽象类.抽象方法,抽象方法不提供任何实际实现. 注意点1: 抽象方法必须在抽象类中声明: 不 ...

  10. [C7] Andrew Ng - Sequence Models

    About this Course This course will teach you how to build models for natural language, audio, and ot ...