CSS是层叠样式表（Cascading Style Sheets）的简称，有时称为CSS样式表或级联样式表，主要用于美化网页、布局页面。也是一种标记语言。
CSS规则由两部分组成：选择器和声明。格式：选择器 { 声明1;声明2;声明3; ……}
在<head></head>里面写一个<style></style>标签，将所有的CSS写在style里面即可。
选择器：分为基础选择器和复合选择器。
基础选择器又分为标签选择器、类选择器、id选择器、通配选择器
说明 | 格式 | |
标签选择器 | 用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签制定统一的CSS样式 | 选择器 { 属性1 :属性值1; 属性2 :属性值2; …… } |
类选择器 | 如果想要差异化选择不同的标签，单独选择一个或者某几个标签，选择类选择器 HTML标签调用时要设置class="类名"，多个类名之间用空格连接 类名：不要使用纯数字、中文等命名，也不要用关键词 | .类名 { 属性1 :属性值1; …… } 类名前有个点“.”不要忽略了 |
id选择器 | 可以为标有特定id的HTML元素指定特定的样式。 HTML标签调用时要设置id="id名" 只能调用一次，因为id是唯一的 | #id名 { 属性1 :属性值1; …… } |
通配选择器 | 自动给所有标签使用该样式 特殊情况下才使用 | * { 属性1 :属性值1; …… } |
字体属性
属性含义 | 属性 | 说明 |
字体样式 | font-family | 若要设置多种字体，则用英文逗号隔开。一般字体是由多个单词加空号组成的，则要加引号。只有电脑下载的字体才能用。 |
字体大小 | font-size | 单位：px（像素）。标题标签需要单独设置字体大小。谷歌默认为16px |
字体粗细 | font-weight | 默认normal(400)，还有bold(700)、bolder、lighter、自定义数字 |
文字样式 | font-style | 默认normal，斜体italic |
复合属性 | font: font-style font-weight font-size/line-height font-family; | 顺序不能颠倒。文字样式->字体粗细->字体大小/行高->字体样式。节约代码，size和family必须有，其余可以省略 |
文本属性
属性含义 | 属性 | 说明 |
文本颜色 | color | 可以用预定义的颜色值（red、blue等），也可以用十六进制（#FF0000），还可以用RGB代码rgb(255,0,0)或rgb(100%,0%,0%) |
对齐文本 | text-align | 默认left水平左对齐，还有right水平右对齐、center水平居中 |
装饰文本 | text-decoration | 默认none没有装饰线，还有underline下划线、overline上划线、line-through删除线 |
文本缩进 | text-indent | 单位px和em，有正负值，常用2em表示当前元素2个文字大小的缩进 |
行间距 | line-height | 单位px，行间距=上间距+文本高度+下间距 |
CSS引入方式
1、行内样式表（行内式）：在元素标签内部的style属性中设定CSS样式，适合修改简单样式。要用双引号，只能控制一个标签。
2、内部样式表（嵌入式）：把CSS写在HTML的<style></style>标签中，理论上可以放在任何地方，一般放在<head>中，只能控制一个页面。
3、外部样式表（链接式）：用的最多。样式单独写到CSS文件，之后再引入CSS文件。步骤：1）新建一个后缀名为.css的文件，把所有的CSS代码都放在这个文件里。2）在HTML页面中，使用<link>标签引入这个文件<link rel="stylesheet" href="css文件路径">。可以控制多个页面。
Chrome调试工具
打开调试工具：Chrome浏览器，按下F12或空白处鼠标右击选检查
使用调试工具：1）Ctrl+鼠标滚轮放大/缩小开发者工具代码的大小
2）HTML元素结构和CSS样式是分开的
3）CSS样式可以改动数值和查看颜色
4）Ctrl+0复原浏览器大小
5）如果点击元素，发现右侧没有样式引入，极可能是类名或样式引入错误
6）如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误
扫一扫
2379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
