（vscode）css学习记录一

//结构HTML
样式CSS Cascading Style Sheet 层叠样式表

//css基础选择器
1.标签选择器
直接用标签名来选择

2.类选择器
给需要修改样式的所有元素都加上一个类class=“”
一个标签可以有多个类名
class=“tony tom jack”
类名不能和标签名重复
.类名 {}
！！！就是提取各个标签相同的属性 提取最大公约数然后再分类 节省代码 方便管理

3.ID选择器
#ID名 调用
只能被标签调用一次 不能被下一个ID名一样的调用
就是ID是惟一的 不能重复

4.通配符选择器

• {} 选择当前页面所有的元素进行样式修改
  常用于清楚所有的元素标签的内外边距

//CSS字体属性
font-family:‘’ 字体形式 微软雅黑
font-family: ‘Microsoft Yahei’, Times, serif;
第一个字体存在就用第一个 不存在就找下一个 最后都没有就使用浏览器默认的
基本把font-family赋给body标签 （全文）

font-size 字体大小 px pixel 像素
通常16
可以给body指定整个页面文字大小
但是标题标签不受影响 得单独改

font-weight 文字粗细
normal bold bolder lighter number（700就是bold，400 normal）
实际开放更偏向于数字

font-style 文字样式
normal
italic 斜体

复合字体属性代码格式 复合属性
font: font-style font-weight font-size/line-height font- family
font: italic 700 16px ‘Microsoft Yahei’;
必须严格按照格式来书写 不能更换顺序
有些属性可以省略 但size和family必须保留
font: 16px ‘Microsoft Yahei’;

12px/24px 后面是行间距
12px/1.5 后面代表行间距是当前文字大小的1.5倍 font-size后面子类还可以改

//文本属性
color 文本颜色
text-align 对齐文本
属性：left right center（默认left）
text-decoration 装饰文本
属性：none underline overline line-through
默认没有 下划线 上划线 删除线
常用于给a取消下划线
text-indent 文本缩进
通常是第一行的缩进
text-indent：2em；
em是一个相对单位
1em就是当前元素一个文字大小=12px 若没有当前元素 则继承父元素的一个文字大小
line-height 行间距=文本高度+上下高度

//CSS的引入方式
1.行内样式表（行内式）
2.内部样式表（嵌入式）
3.外部样式表（链接式）
.css外部链接

引用外部链接格式

//Emmet语法 快速生成html结构

//复合选择器
1.后代选择器
ol li {}空格隔开
可以是儿子也可以是孙子
2.子选择器 （亲儿子选择器）
div a{}包含div里面所有的a
div>a{}只有div下一级的a
3.并集选择器
4.伪类选择器
给链接点击或者点过或者光标移入加特效
元素:link {}未访问时的状态
元素:visited {}访问后的状态
元素:hover {}光标移入的状态 （最常用）
元素:active {}鼠标按下时的状态

• 必须按照lvha的顺序写
• 链接a有默认样式 不会受body样式影响 要改需要单独改

focus为类选择器 一般对input表单元素使用
input:focus {background-color:yellow; color:red}当光标点上去时 背景色和字色都变