CSS初识

成叠样式表,主要用于设置html页面的外观

产生原因:为了解决混乱的结构和样式,使结构和样式相分离。

CSS注释

  1. /*这是CSS注释*/

CSS样式规则

1、选择器用于指定css样式作用的html对象,{}里面是对该对象设置的具体样式。

2、属性和属性值以“键值对”的形式出现。

3、属性是对指定对象设置的样式属性,例如:字体大小、文字样式。

4、属性域属性值之间用英文冒号分开。

5、属性域属性之前用英文分号分隔。

  1. <style type="text/css">
  2. h2{
  3.  
  4. font-size: 40px;
  5. color:pink;
  6. font-family: "Microsoft YaHei",tahoma,arial,"Hiragio Sans GB";
  7. }
  8. h4{
  9. font-size: 30;
  10. color:purple;
  11. font-family: "宋体";
  12. }
  13.  
  14. </style>

CSS字体样式属性

font-size

1、现在网页中普遍使用14px;

2、尽量使用偶数,奇数在老版本ie中容易bug。

  1. font-size: 40px;

font-family

  1. font-family: "Microsoft YaHei",tahoma,arial,"Hiragio Sans GB";
    font-family: "宋体";

1、多个字体之间必须使用英文逗号隔开,依次按所写顺序去和系统里面有的字体匹配,直到匹配到。

2、中文字体名必须加英文引号。当需要设置英文字体时,必须放于中文字体名之前。

3、字体名包含 空格、#、$等符号时,必须加英文引号。例如:"Hiragio Sans GB"。

4、尽量使用系统默认字体,保证在任何用户浏览器都能正确显示。

font-weight

  1. <style type="text/css">
  2. /*字体粗细:
  3. 可以用数字,400-900,步长为100.
  4. normal:相当于400
  5. bold:相当于700
  6. */
  7. div{font-weight: normal;}
  8.  
  9. </style>

font-style

  1. <style type="text/css">
  2. /*
  3. italic:斜体
  4. normal:让斜体不再倾斜
  5. oblique:让没有斜体属性的文字倾斜
  6. */
  7. div{
  8. font-style: oblique;
  9. }
  10.  
  11. </style>

font

  1. <style type="text/css">
  2. /*
  3. 1、用途:综合设置字体样式
  4. 2、语法格式:选择器{font-style font-weight font-size/line-height font-family;
    3、顺序必须严格按照语法,前2个可以省略,后两个必须写
  5. */
  6. div{
  7. font: italic bold 14px "微软雅黑";
  8. }
  9. </style>

unicode字体

使用中尽量用Unicode字体写 宋体 和 微软雅黑。

开发者工具chrome

1、学会使用:F12

2、学会页面调整颜色和字体大小(方向键)

3、ctrl+“+”:放大页面

CSS学习笔记1:字体样式属性的更多相关文章

  1. Html和Css学习笔记-html进阶-html5属性

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  2. 【CSS学习笔记】字体的控制

    关于font-family: "无衬线体"(Sans-serif),比如黑体,微软雅黑 "有衬线体"(Serif),比如宋体,新宋 程序员设置的字体,客户电脑上 ...

  3. CSS学习笔记-边框图片等属性

      1.边框图片:        1.1含义:            告诉浏览器指定一张图片作为边框        1.2格式:             border-image-source:url ...

  4. CSS学习笔记之样式声明

    目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...

  5. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  6. CSS学习笔记04 CSS文字排版常用属性

    字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使 ...

  7. css 文本外观属性(text) 和 字体样式属性(font)

    css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...

  8. 0010 CSS字体样式属性:font-size、font-family、Unicode字体、font-weight、font-style、综合设置、color、 text-align、line-height、text-indent、text-decoration、、、

    CSS字体样式属性.调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. Java高级数据类型转换:包装类、String字符串、Date类等与其他类型转换

    1.包装类过渡类型转换 一般情况下,我们首先声明一个变量,然后生成一个对应的包装类,就可以利用包装类的各种方法进行类型转换了.例如: 当希望把float型转换为double型时: float f1=1 ...

  2. Sql Server主副本和辅助副本间账号同步以及权限同步

    问题描述 SqlServer如果配置了AlwaysOn,其数据库账号信息同步会出现问题. 我遇到的情况是在主副本添加了账号信息,且给某个数据库添加了权限,这个账号会同步至辅助副本,但是数据库角色信息没 ...

  3. Qt5 对xml文件常用的操作(读写,增删改查)

    转自:https://blog.csdn.net/hpu11/article/details/80227093 项目配置 pro文件里面添加QT+=xml include <QtXml>, ...

  4. java定时任务详解

    首先,要创建你自己想要定时的实体类 @Service("smsService")@Transactionalpublic class SmsSendUtil { @Autowire ...

  5. linux下查看Apache的访问日志及ip

    linux下查看Apache的实时访问日志:tail -f  /etc/httpd/logs/access_log 查看有哪些ip访问过:cat access_log |awk '{print $1} ...

  6. 微信小程序的短信接口

    使用聚合数据 (网址)  https://www.juhe.cn/docs? 注册部分略! 这是登录部分的. 一: 二.我的接口

  7. Python3实现文本预处理

    1.数据集准备 测试数据集下载:https://github.com/Asia-Lee/Vulnerability_classify/blob/master/testdata.xls 停用词过滤表下载 ...

  8. Java架构师需要掌握的技术栈

  9. [资料] 常见的IC芯片解密方法与原理解析!

    其实了解芯片解密方法之前先要知道什么是芯片解密,网络上对芯片解密的定义很多,其实芯片解密就是通过半导体反向开发技术手段,将已加密的芯片变为不加密的芯片,进而使用编程器读取程序出来.   芯片解密所要具 ...

  10. Express 中配置使用 art-template模板引擎

    art-template 官网 https://aui.github.io/art-template/ 安装: npm install --save art-template npm install ...