欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

前端开发CSS3——文本样式和盒子及样式

程序员文章站 2022-06-04 10:31:47
博主废话少说，直接介绍css常用的属性和属性值；属性和值只需过一遍，页面的结构还是需要布局，布局的只是后期会更新的。 提供一些图标的网站：font-awesome: http://fontawesome.dashgame.com/ | iconfont: http://www.iconfont.cn ......

博主废话少说，直接介绍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 : 标题位于表格的右方

 

上一篇： itchat 运行记录

下一篇： 北漂程序员的真实奋斗史：有辛酸，更有成长

推荐阅读