目录
选择器
- 基础选择器：标签选择器、类选择器、id选择器、通配符选择器
- 复合选择器
基础选择器
- 标签选择器：标签名作为选择器，某一类标签指定样式，不能差异化设置
- 类选择器：用 .类名 来定义类，在标签中需要class属性来调用类
<style> .red { color: red; } </style> </head> <body> <ul> <li>12333333333124</li> <li>325555551</li> <li class="red">68356251</li> <li>12413</li> <li>222</li> </ul> </body>可以给一个标签指定多个类名，从而达到更多选择目的，调用的时候用空格隔开。
多类名使用场景：便于复用与修改
- id选择器：以id属性来调用样式，css中id选择器以#来定义，id只能有一个，类可以有多个，id相当于身份证，别的标签无法使用，开发时使用类选择器最多。
- 通配符选择器：选择所有的标签，css中选择器以*来定义，权重很低容易被覆盖
* { margin: 0; padding: 0; }
id>class>标签>通配符
字体
字体系列
font-family: "Microsoft YaHei";
多个字体用逗号分隔（写多个字体是为了防止用户没有该字体，按顺序显示，特殊字体写前面），有多个英文单词的字体需要用引号括起来
字体大小
font-size: 20px;
标题标签比较特殊，需要单独指定文字大小
字体粗细
font-weight:
normal：正常的字体。相当于数字值400。
bold：粗体。相当于数字值700。
bolder:定义比继承值更重的值
lighter：定义比继承值更轻的值
用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
数字后面不用加单位，实际开发中更提倡用数字
文字样式
font-style: normal
normal:把倾斜的字体变正 （<em></em> <i></i>标签倾斜字体)
italic: 倾斜
字体复合属性
格式：
font: font-style font-weight font-size/line-height font-family;
p {
font: italic 700 16px "Microsoft yahei";
}是否斜体 粗体 字号/行高 字体
不能更换顺序
font-size和font-family文字大小和字体必须有
文本
文本颜色
color: red;
一般用十六进制表示颜色
对齐文本
text-align文本内容的水平对齐方式。左对齐left（默认）、右对齐right、居中对齐center。
装饰文本
text-decoration添加下划线、删除线、上划线
none 无装饰线：可以去掉超链接的下划线
underline 下划线
overline 上划线
line-through 删除线
a {
text-decoration: none;
color: black;
}文本缩进
text-indent 文本的第一行的缩进，通常是段落的首行缩进
可以缩进多少像素px 也可以用相对单位em，缩进当前文本字体的两个大小
一般2em
行间距
line-height 单位px
行间距=上间距+文本高度+下间距
CSS引入方式
行内样式表 行内式
在标签内添加style属性，适合修改简单样式，只能控制当前标签样式
<p style="color: deeppink;">11111</p>内部样式表 嵌入式
写在html页面内部，css代码放在<style>标签中，style一般放在body中
控制当前整个html页面样式，没有实现结构和样式完全分离（练习时常用）
外部样式表 链接式
使用最多，实际开发使用。完全实现结构和样式相分离。
样式单独写到css文件中，之后把css文件引入html页面中使用
在html页面中用<link>标签引入，在head中
<link rel="stylesheet" href="css文件路径">
Chrome调试工具
打开chrome浏览器 F12打开 或右键 检查
elements：左html，右css，css可以改动数值和查看颜色
ctrl+滚轮可以放大缩小代码
ctrl+0恢复浏览器大小
点击元素 无样式引入，说明类名或样式引用错误
有样式但有黄叹号，说明属性书写错误
扫一扫
938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
