一、CSS样式规则

1、基本结构

<html>

　　<head>

　　　　<style>

　　　　　　h1{

　　　　　　　　color: orange;

　　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　</body>

</html>

二、font字体

1、字号与字体

font-size: 字号大小

font-family: 字体 font-family: "宋体";

使用技巧：

网页中普遍使用14px 字号；

尽量使用偶数的字号；

使用多个字体，字体间用“,”逗号隔开，中文字体需加引号，英文字体可以不加，

英文字体放在中文字体之前,字体有空格要加引号；

尽量使用默认字体；

2、unicode字体

对于不支持中文字体

方案一、可以用使用英文来替代，如font-family: "Microsoft Yahei";

方案二、在css直接使用unicode 编码来写字体名称可以避免这些错误，使用unicode写

中文字体，浏览器可以正确解析 如: font-family:"\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”

注：尽量写宋体、微软雅黑

3、Css注释

/*注释内容*/

4、字体加粗

font-weight: 字体粗细

font-weight: bold;字体加粗 700=blod nomal=400 尽量使用数字

5、字体倾斜

font-style: 字体风格

默认值： normal 正常 italic 倾斜

注：平时我们很少让字体倾斜，反而让倾斜的字体变成普通模式

6、font综合设置字体样式（重点）

选择器{font: font-style font-weight font-size/line-height font-family}

如：font{italic bold 14px "微软雅黑"}/*font 综合写法 更简洁*/

注：必须按照这个顺序写，必须保留font-size,font-family属性否则不起作用

第十一课 CSS介绍与font字体 css学习1的更多相关文章

  1. CSS基础 和 font字体、背景属性连写 与 清除浮动方法

    1.伪类 1. :link 2. :visited 3. :hover(重要) 4. :active 5. :focus(input标签获取光标焦点) 2.伪元素 1.:first-letter 2. ...

  2. CSS font字体知识学习

    字体系列 [1]5种通用字体系列:拥有相似外观的字体系列 serif字体:字体成比例,且有上下短线(衬线字体),包括Times\Georgia\New century Schoolbook sans- ...

  3. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

  4. 前端 CSS 介绍

    CSS介绍 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML标签的样式需要为每个HTML标签单独定义样 ...

  5. 1.css介绍

    CSS介绍 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样 ...

  6. CSS颜色及文本字体

    CSS颜色及文本字体 CSS颜色表示法 CSS文本设置 CSS边框属性 背景属性 元素溢出 CSS颜色及文本字体 CSS颜色表示法 颜色名表示,比如:red 红色,yellow黄色,pick粉色 16 ...

  7. NeHe OpenGL教程 第二十一课：线的游戏

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  8. css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法

    Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...

  9. 2018年最完整5大网页设计图标解决方案：Font Awesome奥森图Unicode、CSS 和、Font以及国产zfont图标集

    网上有很多高质量的图标,基于icon的关键词能在Google上搜索到不少内容,不考虑版权外还要修改大小.颜色等等,现在介绍一些替代方案:Unicode.CSS 和 Font,它具有更高的灵活性. 方案 ...

随机推荐

  1. ASP.NET Core - 利用Windsor Castle实现通用注册

    问题引入 在ASP.NET Core - 依赖注入这篇文章里面,我们知道了如何利用ASP.NET Core原生的容器来实现依赖注入的,那我们为什么要替换掉默认的 IoC容器呢?从ASP.NET Cor ...

  2. JS 各种宽高

    1.window的各种宽高   outerWidth.innerWidth.outerHeight.innerHeight outerHeight 获取浏览器窗口外部的高度(单位:像素).表示整个浏览 ...

  3. Thymeleaf【快速入门】

    前言:突然发现自己给自己埋了一个大坑,毕设好难..每一个小点拎出来都能当一个小题目(手动摆手..),没办法自己选的含着泪也要把坑填完..先一点一点把需要补充的知识学完吧.. Thymeleaf介绍 稍 ...

  4. [PHP]日志处理error_log()函数和配置使用

    1.error_log($message,$message_type,$destination,$extra_headers)函数, 2.message_type 是0,发送信息到php.ini配置的 ...

  5. boostrap中模态框显示在阴影之下

    boostrap中模态框显示在阴影之下 出现这种情况的原因我开始也搞了很久,问题出现在哪里呢? 有事问百度,在百度上查了一下资料,他们主要的解决办法:是 修改标签的z-index属性的值, 我试着改了 ...

  6. css公共库——简介中超过长度显示省略号

    在简介.引言中常见:文字只有一排,超出宽度以省略号显示,像这样 实现方法:在公共库定义otw类 .otw{ overflow: hidden; text-overflow: ellipsis; whi ...

  7. apache-jmeter-5.0的简单压力测试使用方法

    同事交接工作,压测部分交给我,记录一下使用方法 我将下载下来的压缩包解压后放置在E盘 然后配置环境变量: 变量名JMETER_HOME,变量值 E:\javatool\apache-jmeter-5. ...

  8. Web前端 前端工程师首选的几款编辑器/IDE以及Markdown的编辑器、语法

    前端工程师常使用的编辑器/IDE 本地在线工具 webstrom 推荐指数 ***** vs code 推荐指数 **** atom 推荐指数 **** subline-text 推荐指数 **** ...

  9. iOS 11: CORE ML—浅析

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/OWD5UEiVu5JpYArcd2H9ig 作者:l ...

  10. Spring Boot 2.2 增加了一个新功能，启动飞起~

    前几天栈长分享了一个好玩的框架:一个比Spring Boot快44倍的Java框架!,是不是感觉 Spring Boot 略慢?今天讲一下 Spring Boot 添加的这个新特性,可以大大提升 Sp ...