CSS 简介及书写规则—行内样式

大家好，欢迎来到IT知识分享网。

CSS简介

　　CSS 英文全称【cascading  style  sheet】   汉语意思：层叠样式表

　　作用：CSS 用于美化网页，还可以进行网页布局

　　【前端三层是什么？】

　　前端三层分为：HTML（结构层）CSS（样式层）JavaScript（行为层）

　　总结：

　　CSS 前端人当中称之为“样式层”，可以对网页进行美化【比如文字设置颜色、设置文字大小、设置文字字体】，可以进行网页的页面布局

书写规则

CSS （层叠样式表，简称样式）根据在网页中书写的位置不同，分为3种：行内样式、内嵌样式和外链样式

1.1 行内样式写法：

• 任意标签【容器级别标签和文本级别标签】都可以添加行内样式
• 需要在双标签、单标签的开始标签位置书写
• 在开始标签名字后面，别忘记有空格，给这个标签添加一个style（英文：样式，风格）属性
• style属性值得写法：样式属性名字 + ：+ 样式属性的属性值 + ；
• 别忘记在样式属性值后面加一个分号，代表当前这一个样式设置完毕，进行下一个样式属性
• 一个标签可以同时设置多个样式，多个样式之间用分号隔开

　　示例如下：

　　效果如下：

1.2 常用的行内样式

在制作网页的时候，我们经常和网页中的文字打交道，比如设置文字颜色、文字大小、文字的字体

1.2.1 color

• 主要作用：设置文字颜色
• 属性值：英文单词或16进制的数字

　　1、英文单词

　　　　注：一个样式一般只书写一次，如果书写多次，右侧覆盖左侧样式

　　示例如下：

　　效果如下：

　　2、16进制数字

• 生活中比较常用的是10进制数字（逢十进一）而16进制的数字是逢16进一
• 组成：0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f（英文不区分大小写）
• 16进制的颜色表示不用记忆，参考W3C 网站即可
• 链接：https://www.w3school.com.cn/html/html_colors.asp
• 如果 color 样式的属性值为16进制数字，书写格式以 # 开始，以分号结束

　　示例如下：

　　效果如下：

1.2.2 font-size

• font-size ：字体大小
•  主要作用：设置文字大小
• 属性值：数字 + px单位（px– pixel  像素）

　　示例如下：

• 谷歌浏览器，一般标签默认文字大小是16px，最小字体是12px，如果比12px 小，系统默认显示12px
• IE 浏览器，一般标签默认文字大小是16px，最小字体是1px，如果比1px 小，系统默认显示1px
• 任意浏览器的字体大小都是上不封顶的，注意：比如 h 系列标签，默认字体大小，还有一些浏览器是自带默认样式的

　　谷歌与IE 的对比图 ：

1.2.3 font-family

• font-family:  中文含义：字体、系列
• 主要作用：设置文字字体
• 文字：分为中文、英文

　　1、常用中文字体：

　　　　微软雅黑、方正粗黑宋简体，楷体

　　示例如下：

　　效果如下：

　　2、常用英文字体：

　　　　Arial、Comic、Sans MS、Webdings

• 谷歌默认字体是微软雅黑
• 语法注意事项：
• 属性值外层需要加一对单引号
• 可以同时设置多个字体，多个字体间用逗号隔开，从左到右，前面字体覆盖后面字体设置
• 英文字体不用记忆
• 如果文字内容为纯英文，设置多个英文字体，前者覆盖后者
• 文字内容为文字 + 英文，设置多个中英文字体，从左到右找到第一个符合自己字体进行设置

　　示例如下：

　　效果如下：

1.2.4 盒模型样式

• 盒模型样式包括：width、height、background-color；
• width：设置样式宽度，属性值：数字 + px单位
• height: 设置样式高度，属性值：数字 + px单位
• background-color : 设置样式背景颜色，属性值与color一致，为英文单词或16进制
• 网页的执行顺序：从上到下，从左到右

 　　示例如下：

　　效果如下：