CSS知识总结(三)

CSS的常用样式

1.字体样式

  1)字体名称(font-family)

   font-family  :  <family-name>

   设置文字名称,可以使用多个名称,或者使用逗号分隔,浏览器则按照先后顺序依次使用可用字体。

   如果字体名称包含空格或中文,则应使用引号括起。

  例子 源代码:

/* CSS代码 */
p{
    font-family:"微软雅黑","宋体";
}
<!-- HTML代码 -->
<body>
    <p>文字,是承载语言的符号。</p>
</body>

  效果:

文字,是承载语言的符号。

  2)字体大小(font-size)

   设置文字的尺寸

   font-size : <length> | <percentage>

   <length>:用长度值指定文字大小,不允许负值。

   <percentage>:用百分比指定文字大小,其百分比取值是基于父对象中字体的大小,不允许负值。

  例子 源代码:

/* CSS代码 */
.length{font-size:20px;}
.percentage{font-size:20px;}
.percentage span{font-size:60%;}
<!-- HTML代码 -->
<body>
    <p class="length">文字,是承载语言的符号。</p>
    <p class="percentage">文字,<span>是承载语言的符号。</span></p>
</body>

  效果:

文字,是承载语言的符号。

文字,是承载语言的符号。

  3)字体加粗(font-weight)

   控制字体粗细

   font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

   normal:正常的字体,相当于数字值400

   bold:粗体,相当于数字值700

   bolder:定义比继承值更重的值

   lighter:定义比继承值更轻的值

   **推荐使用"bold"。

  例子 源代码:

/* CSS代码 */
.normal{font-weight:normal;}
.bold{font-weight:bold;}
<!-- HTML代码 -->
<body>
    <p class="normal">这是正常的字体</p>
    <p class="bold">这是加粗的字体</p>
</body>

  效果:

这是正常的字体

这是加粗的字体

  4)字体斜体(font-style)

   控制字体是否倾斜

   font-style : normal | italic | oblique

   normal:指定文本字体样式为正常的字体

   italic:指定文本字体样式为斜体

  例子 源代码:

/* CSS代码 */
.normal{font-style:normal;}
.italic{font-style:italic;}
<!-- HTML代码 -->
<body>
    <p class="normal">这是正常的字体</p>
    <p class="italic">这是斜体的字体</p>
</body>

  效果:

这是正常的字体

这是斜体的字体

  5)字体样式缩写(font

   font : font-style || font-variant || font-weight || font-size || / line-height || font-family

  例如:

/* CSS代码 */
p{
    font-style:italic;
    font-weight:bold;
    font-size:14px;
    line-height:22px;
    font-family:"宋体";
}

  缩写后:

/* CSS代码 */
p {font:italic bold 14px/22px "宋体"}

  6)字体颜色(color)

   color : <color>

   颜色属性值分为三种格式:

   1、英文单词,比如 red , yellow ,green …

   2、十六进制表示方式,#开头,6个十六进制的字符或数字组合,比如:#FFFFFF

   3、RGB模式,红 0-255,绿 0-255,蓝 0-255,比如: RGB(12,34,56)

      RGBA模式,最后的A表示透明度,比如:RGBA(0,0,0,0.5)

  例子 源代码:

/* CSS代码 */
p {color:red;}
<!-- HTML代码 -->
<body>
    <p>文字,是承载语言的符号。</p>
</body>

  效果:

文字,是承载语言的符号。

  7)文本装饰线条(text-decoration)

   控制文本装饰线条

   text-decoration : none | underline | blink | overline | line-through

   underline:下划线

   overline:上划线

   line-through:删除线

  例子 源代码:

/* CSS代码 */
.sup{
    text-decoration:overline;   /*上划线*/
}
.del{
    text-decoration:line-through;   /*删除线*/
}
.sub{
    text-decoration:underline;  /*下划线*/
}
<!-- HTML代码 -->
<body>
    <p class="sup">这是上划线</p>
    <p class="del">这是删除线</p>
    <p class="sub">这是下划线</p>
</body>

  效果:

这是上划线

这是删除线

这是下划线

  8)文字阴影(text-shadow)

   控制文字的阴影部分

   text-shadow: h-shadow v-shadow blur color;

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

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

   blur:可选,模糊的距离。

   color:可选,阴影的颜色。

  例子 源代码:

/* CSS代码 */
.shadow{
    font-size:20px;
    font-weight:bold;
    /*color: transparent;*/   /*字体透明*/
    text-shadow:3px 3px 3px #b28118;    /*水平距离 垂直距离 模糊距离 颜色*/
}
<!-- HTML代码 -->
<body>
    <p class="shadow">有阴影的哦</p>
</body>

  效果:

有阴影的哦

时间: 2024-10-23 13:26:33

CSS知识总结(三)的相关文章

HTML、CSS基础知识(三)

1.CSS样式 方式一:在head标签中增加style标签,在style标签中写CSS样式 方式二:在body中,直接在使用的标签中增加style属性,进行CSS编写 方式三:通过link标签引入写好的CSS样式表 <link rel="stylesheet" href="xx.css"> 接下来讲的都是方式一 2.ID选择器 ID选择器以#号来定位,所以在style标签中写样式时,要以#开头,一个HTML页面不可以存在相同的id <!DOCTYP

CSS知识回顾--读《CSS 那些事儿》笔记

由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开,以做记录和日后翻查之用. 1.CSS的基本结构 Selector {property:value;} 由 选择符(Selector ),声明({}),属性(property),属性值(value)组成: 2.CSS的简写 颜色的简写: 有以下几种形式: #RRGGBB(16进制),RGB(125,0,255)

CSS知识体系

我个人学习比较重视系统性,学习的一个重要目标就是不断完善知识体系.逻辑严密.结构清晰的知识体系能够给人一种全局性的视野和稳健的思维框架,避免出现“只见树木,不见森林”的片面性和知识盲区. 好的知识框架在于全面和条理性,它的核心应该是简单的,简单到一句话就能提纲挈领,概括清楚.比如啥是计算机,计算机就是一种能储存和处理数据的设备.(A computer is a device that can store, retrieve, and process data.)越是简洁凝练的总结越是代表着对本质

web基础知识(三)关于ajax,Jquery传值最基础东西

今天补充一下两个小功能,一个是关于radio单选框的情况,如何在前面选了后,传到后台,编辑修改的时候再次传回来,并且在当时选的那个上:再一个就是关于添加小标签的时候添加接着弹出在下面,并点击出现删除. 一:radio 1 <div class="newlylist"> 2 <div class="newlyhead">图示商品:</div> 3 <div class="newlycontent">&

你该学点HTML/CSS知识的9大理由

每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢?好吧,下面我会告诉你为什么懂点HTML和CSS会让你的职业生涯发生巨大的改变.学习技术不仅仅是生产助理亦或是印刷设计师的事——无论你是小企业主.销售经理.事件协调员还是魔术师,都能让你受益于HTML和CSS知识. 不要怀疑,让我给你9大理由,看看能不能说服你. 1.为客户设计超棒的电子邮件电子邮件被普遍认为是最好的网

spring基础知识(三)——aop

spring基础知识(三)--aop面向切面编程 1.概念术语 aop面向切面编程(Aspect ariented Programming) 在开始之前,需要理解Spring aop 的一些基本的概念术语(总结的个人理解,并非Spring官方定义): 切面(aspect):用来切插业务方法的类. 连接点(joinpoint):是切面类和业务类的连接点,其实就是封装了业务方法的一些基本属性,作为通知的参数来解析. 通知(advice):在切面类中,声明对业务方法做额外处理的方法. 切入点(poin

Java基础知识的三十个经典问答

Java基础知识的三十个经典问答 1.面向对象的特点 抽象: 抽象是或略一个主题中与当前目标的无关的因素,一边充分考虑有关的内容.抽象并不能解决目标中所有的问题,只能选择其中的一部分,忽略其他的部分.抽象包含两个方面:一是过程抽象:一是数据抽象. 继承 继承是一种联接类的层次模型,允许和鼓励类的重用,提供了一种明确的共性的方法.对象的一个新类可以从现有的类中派生,这叫做类的继承.心累继承了原始类 的特性,新类称为原始类的派生类或者是子类,原始类称为新类的基类或者父类.子类可以从父类那里继承父类的

C#编译基础知识(三)

本文章我们将来重点介绍强命名程序集,强命名程序集的出现其实是为解决版本控制问题,比如说,在新版程序集发布后,我们希望在系统中对旧程序集的引用继续保留,而有些地方又可以引用新的程序集,再比如说不同的公司提供了不同功能的程序集,这些类库存放在一个公共目录,有时候可能会出现名称相同的情况.使用强命名程序集可以解决这些问题,一个强命名的程序集是靠公钥标示.程序集版本号.区域属性.程序集名称这四个属性来唯一标识的,这样一来,新发布的库文件版本与前面发布的不同,不同的版本引用可以在元数据里面标识,相互不会受

HTML与CSS入门——第三章 理解HTML和XHTML的关系

知识点: 1.以HTML创建一个简单网页的方法 2.包含每个网页必须有的所有HTML标签的方法 3.用段落和换行组织页面的方法 4.用标题组织内容的方法 5.HTML.XML.XHTML和HTML5之间的差别 3.1 从一个简单的网页开始: 作者建议:从简单的文本编辑器开始学习,之后再转向可视化工具. 扩展名支持:.htm以及.html 如.jsp,.asp,.php之类的文件类型使用超出了HTML范围的服务器端技术,需要专门的服务端支持.比如Apache服务器 3.2 每个XHMTL网页必须有

网络基础实用知识(三)

十.大对数电缆(Multipairs Cable) 一般用于电话语音传输 1.说明 线径为0.4mm的电话电缆每公里损耗为1.64dB.环阻为296Ω:如果允许用户线路的最大衰减为7.0dB,则线径为0.4mm的电话电缆在衰减7.0dB时,长度可达4.26Km:如果按用户线路(话音)环阻不大于1700Ω计算,则线径为0.4mm的电话电缆最大通信距离为5.74Km,但此时衰减为9.42dB.而开通ADSL业务的用户线路环阻应当小于900欧姆,则最大传输距离不大于3Km. 大对数线缆一般分为3类大对