Css基本样式字体的详细介绍

一、css字体属性定义文本的字体系列、大小、加粗、风格和变形

二、属性

    font-family        设置字体系列

    font-size        设置字体尺寸

    font-style        设置字体风格

立即学习“前端免费学习笔记(深入)”;

    font-variant        以小型大写字体或正常字体显示文本

    font-weight        设置字体的粗细

p{    font-size: 30px;    font-family: monospace;}

在CSS3之后对字体有了很大的改进,以前必须使用一些安全的字体,以保证用户的PC上必须存在这个字体,在Css3之后不用担心这一点了。

@font-face{    font-family:myfont;    src:url();}

   

以上就是 Css基本样式字体的详细介绍的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1608301.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 21:40:08
下一篇 2025年12月23日 21:40:28

相关推荐

  • CSS中的绝对定位与相对定位详细介绍

    层级关系为: 效果图: 为改变参照物(橘色框)后的效果层级关系为: 效果图: 参照物为最顶级的元素情况。层级关系为: 效果图: 立即学习“前端免费学习笔记(深入)”; 仅使用margin属性布局绝对定位元素的情况此情况,margin-bottom 和margin-right的值不再对文档流中的元素产…

    2025年12月23日 好文分享
    000
  • CSS中left属性详细介绍

    定义和用法 left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。 注释:如果 “position” 属性的值为 “static”,那么设置 “left” 属性不会产生任何效果。 说明 对于…

    2025年12月23日
    000
  • 必看高效整洁的CSS代码原则

    1.使用全局reset不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset:*{ margin:0; padding:0; }  这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内…

    好文分享 2025年12月23日
    000
  • 详解为Drupal 7网站添加自定义CSS的步骤

       当我们在逛聊天室或者论坛时,经常会碰到有人提问怎么向 drupal 网站中添加自定义css —— 通常来讲,通过 drupal 主题来进行添加最好。不过在某些情况下,因为环境限制或网站管理员没有访问主题文件的权限,而不得不考虑其它办法。   今天本文就来介绍一下,如何使用CSS Injecto…

    2025年12月23日 好文分享
    000
  • 详解使用CSS气泡框实现方法

    气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头就容易了。一种方法就 是制作这样一个三角形箭头的图片,然后定位在矩形框上。但这种解决办法在后期更改气…

    2025年12月23日 好文分享
    000
  • css更改input单选和多选的样式详解

    在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法。 在这之前先简单介绍一下:before伪类 :before 选择器向选定的元素前插入内容。使用content 属性来指定要插入的内容(content是必须的哦)。 相信这并不…

    好文分享 2025年12月23日
    000
  • 关于css选择器知识详解

    导入外部css样式表的方法 使用link标签导入外部css样式表 在样式表中import(导入)外部样式表@import url(“/crazy-html5/06css/css/demo01.css”); 使用内部样式表 内部样式表只能作用于某一个网页,定义方式为在head头部添加style标签,在…

    好文分享 2025年12月23日
    000
  • 如何使用CSS实现分隔线

    下面是几种简单实现分隔线的方法,个人比较喜欢第二种,我也给出了最后第五种比较2的写法,请大家拍砖,或者提供其他好的方法。 单个标签实现分隔线: .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-lef…

    好文分享 2025年12月23日
    000
  • CSS中hight属性的详解

    目录结构: contents structure [-] hight属性值类型一览表 valuedescribtionauto默认length绝对长度%相对长度inherit继承 这里笔者主要介绍相对长度的用法,关于绝对长度读者可以参考CSS尺寸单位px % em rem详解获取更多信息。  hei…

    2025年12月23日
    000
  • css3新特性应用之视觉效果详细解读

    目录 padding 背景与边框第一部分 背景与边框第二部分 形状 视觉效果 字体排印 立即学习“前端免费学习笔记(深入)”; 用户体验 结构与布局 过渡与动画 源码下载 一、单侧阴影 box-shadow属性的应用,格式:h-shadow v-shadow blur spread color in…

    2025年12月23日 好文分享
    000
  • CSS盒子模型知识总结

    本章内容: 知识点一: 盒子模型:Box Model,由有内容(element content)、填充(padding)、边框(border)、边界(margin)这四个组成部分,这四个部分都包含有top/right/bottom/left四个组成部分。 从w3school上下载的图片,以图来看看盒…

    2025年12月23日 好文分享
    000
  • 如何在css中让背景图片拉伸填充避免重复显示

    如何让背景图片拉伸填充,这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。 比如一个容器(body,p,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。 所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-r…

    好文分享 2025年12月23日
    000
  • css中padding填充详解

    语法: padding:[ | ]{1,4} 默认值:看每个独立属性 适用于:所有元素,除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外 继承性:无 动画性:是…

    2025年12月23日
    000
  • 用css3简单的制作3d半透明立方体图片详解

    new document //css部分html{font-size:62.5%;}img{width:300px;height:300px;} #stage{//搭建一个舞台margin-top:200px;margin-left:auto;margin-right:auto;width:300p…

    好文分享 2025年12月23日
    000
  • 详细介绍css常用效果总结

    font: 14px/26.6px ‘Microsoft Yahei’, ‘Trebuchet MS’, Georgia, ‘Times New Roman’, Times, sans-sercss有不少常用的效果,你在平时浏览…

    2025年12月23日
    000
  • 详解Css常用操作图片方法

    这篇文章主要为大家详解Css常用操作图片方法的相关资料,需要的朋友可以参考下 body{ background-color: #0078b3;} .image{ border: 1px solid darkgray; width: auto; height: auto; float: left; t…

    好文分享 2025年12月23日
    000
  • 详解Css常用操作导航栏方法

    这篇文章主要为大家详解css常用操作导航栏方法的布局类,感兴趣的小伙伴们可以参考一下 一、垂直导航栏 ul{ list-style-type: none; margin: 0px; padding: 0px;} a:link,a:visited{ text-decoration: none; dis…

    好文分享 2025年12月23日
    000
  • 详解CSS中单行居中,两行居左,超过两行用省略号结尾

    解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍。 5、单行居中显示文字,多行居左显示,最多两行超过用省略号结尾 这题就厉害了我的哥。 题目就是如上要求,使用纯 CSS,完成单行文本居中显示文…

    2025年12月23日 好文分享
    000
  • CSS全兼容的多列均匀布局问题解决方法

    解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 css 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍。 6、全兼容的多列均匀布局问题 如何实现下列这种多列均匀布局(图中直线为了展示容器宽度,不算在内): 法一:display:flex CSS3…

    2025年12月23日 好文分享
    000
  • 使用CSS巧妙地制作背景色渐变动画实例

    解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍。 正文从这里开始。有的时候,嗯,应该说某些特定场合,我们可能需要下面这样的动画效果,渐变 + animation : 假设我们渐变的写法如下: …

    2025年12月23日 好文分享
    000

发表回复

登录后才能评论
关注微信