7. CSS装饰网页的样式

CSS中有哪些用来装饰网页的样式呢?在这里我们对一些常用的样式做了总结。

字体样式

 1 /*
 2  * 一般样式书写
 3  */
 4 .font_style_1{
 5     font-family: "华文行楷";
 6     font-size: 20px;
 7     font-style: italic;
 8     font-weight: lighter;
 9 }
10 /*
11  * 字体样式简写
12  * 顺序:font-style > font-variant > font-weight > font-size/line-height > font-family
13  * 缺失的字体样式采用浏览器默认的
14  */
15 .font_style_2{
16     font:italic lighter 20px "华文行楷";
17 }
18 /*
19  * 字体样式设置难点
20  * 字体:按照设置的字体,从左到右,采用系统中存在的字体
21  * 大小:字体大小18px,行高2.5em
22  */
23 .font_style{
24     font-family: Microsoft YaHei,"华文楷体";
25     font-size: 18px/2.5;
26 }

如上所示就是一些常见的字体样式,在这里我们注意的关于自己的样式既有分开的写法,也有简写的形式,在实际开发中我们一般会先用分开的写法实现效果,然后再项目后期稳定的时候整理成简写的形式。另外希望大家特别注意在代码最后的内容,都是特别有意思的地方。

文本样式

 1 /* 文本装饰 */
 2 .text_style{
 3     color: #1D82FE;
 4     text-align: justify;
 5     text-indent: 30px;
 6     line-height: 24px;
 7     /*
 8      * 尽管这个样式后代元素无法继承,但是如果后代元素中没有设置这个样式,上级元素
 9      * 设置的这个样式会延伸到后代元素上
10      */
11     text-decoration: line-through;
12 }

如上就是一些CSS相关的文本样式,这里我们需要注意的是 text-decoration 样式的操作。

列表装饰

 1 /* 列表装饰 */
 2 .list_style_1{
 3     list-style-type: decimal;
 4     list-style-position: outside;
 5 }
 6 .list_style_2{
 7     list-style-image: url(./img-1.jpg);
 8     list-style-position: inside;
 9 }
10 .list_style{
11     /*如果图片存在显示图片标记内容,反之显示list-style-type样式值装饰*/
12     list-style: square inside url(./img-1.jpg);
13 }

如上是列表相关的样式内容,我们需要注意这些内容,通过这些样式我们列表的装饰不再只局限在HTML中提供的标记符号。

原文地址:https://www.cnblogs.com/yunxiansheng/p/9190676.html

时间: 2024-10-11 10:04:13

7. CSS装饰网页的样式的相关文章

web的各种前端打印方法之CSS控制网页打印样式

来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措.如果你也有这种现象,那么我告诉你吧,在W3school查到CSS的midia的作用. midia 定义和用法: media 属性规定被链接文档将显示在什么设备上. media 属性用于为不同的媒介类型规定不同的样式. 原来用到media来指定css的媒体类型,它的

4月6日学习笔记——css设置网页打印样式

有三种方法 1. 为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: <link rel="stylesheet" href="css/noprint.css" media="screen" />  用于打印的css:<link rel="stylesheet" href="css/print.css" media="print" />

精通CSS.DIV网页样式与布局系列学习

精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式 精通CSS.DIV网页样式与布局(四) ——页面背景 精通CSS.DIV网页样式与布局(三)——中秋效果图 精通CSS.DIV网页样式与布局(二)—— 段落 精通CSS.DIV网页样式与布局(二) 精通CSS.DIV网页样式与布局(一) 神奇的验证码,我们一起来探究

精通CSS+DIV网页样式与布局--图片效果

提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:     精通CSS+DIV网页样式与布局--初探CSS 精通CSS+DIV网页样式与布局--CSS文字效果 精通CSS

精通CSS+DIV网页样式与布局--初探CSS

CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求."DIV+CSS&q

CSS+DIV网页样式与布局——文字样式&amp;段落(一)

一个网页要说最多的还是文字,上篇博客说CSS样式是一个网页的精髓,那网页中最直接表现出来的就是文字和图片,还有一些所谓的表单,首先先说最为熟悉和常用的文字.让CSS控制网页中的文字,使它不再那么枯燥平淡,从此网页文字变得绚丽多彩. 一.文字样式 文字样式主要包括文字的大小.颜色.字体等,具体包括如下 写一个小例子,综合运用上述所有的文字效果样式: 代码: <html> <head> <title>文字字体</title> <style> body

css对网页样式控制

1.方便修改网页格式:css对网页样式的控制可以独立地进行,因而修改.更新起网页起来都显得异常轻松容易. 2.轻松增加网页的特殊效果:在网页中过多的使用图像会破坏原有文字的存储格式,并且会加长下载时间,如果使用了css中的图像滤镜,就可以在不增加网页体积的情况下实现一些特殊的视觉效果,为网页添加生气. 3.使用网页元素更准确的定位:之前HTML中使用的表格用来定位表格元素,而且表格只适用于规则的网页排版,对于复杂的不规则的网页结构就显得力不从心,而css能很好的解决排版问题. 4.良好的适应性:

CSS(2)---css字体、文本样式属性

css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size).字体粗细(font-weight).字体风格(font-style).字体颜色(color). 1.字体设置(font-family) 网页中常用的字体有 宋体.微软雅黑.黑体 等,例如将网页中 所有p标签的字体设置为微软雅黑,可以使用如下CSS样式代码: p { font-family:"微软雅

CSS的内联样式和外链样式简单介绍

CSS的内联样式和外链样式简单介绍:关于标题中的概念可能很多朋友根本就有在意过,或者没有特别的注意,但并不说明他们就没有使用对应的方式设置样式,但是能够明白各自的代表那种方式总比不明白的好,下面就介绍一下它们各自的概念.一.内联样式:所谓的内联样式就是直接写在标签内部的样式,代码如下: <div style="color:red">蚂蚁部落</div> 以上代码可以将字体颜色设置为红色.二.外链样式表:外链样式表就是通过在网页头部利用link标签引用一个单独的c