萌新入门第三天，css第一天，小白新手入门必看

首先css规范使用

体验CSS语法规范要写在head最下方，虽然不影响使用，但是写在这里最方便观看 Css语法格式选择器 { 属性: 值; 属性: 值; } 选择器之间和属性和值之间要保留空格选择器共有四种类选择器 .red { width: 100px; height: 100px; background-color: red;} .green { width: 100px; height: 100px; background-color: green;}

标签选择器
h3 {
color: blue;
font-size: 48px;}
li {
color: red;
font-size: 24px;}

Id选择器
#one {
color: blueviolet;
}

通配符选择器

{
margin: 0;
padding: 0;
}
基础选择器总结
基础选择器作用特点使用频率
标签选择器选出相同标签不能差异化选择较多
类选择器(.) 按需选择标签根据需求选择非常多
id 选择器(#) 选中唯一标签针对唯一标签通常与 JavaScript 联用
通配符选择器(*) 选中所有标签选择的太多，有部分不需要特殊情况使用

font-family 设置字体系列
.hh {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}

Font-size字号大小
li {
font-size: 22px;
}
Font-weight字号粗细
em {
font-weight: 700;
}
Font-style字号样式
em {
font-style: normal;
}

字体属性总结

属性含义注意事项
font-size 字号单位通常是 px（像素），字号一定要有单位
font-family 字体工作中按照团队约定即可
font-weight 字重 700 加粗 / 400 普通，数字字重不带单位
font-style 字体样式 italic 斜体 / normal 正常，把 em 改成不倾斜
font 连写 font-style font-weight font-size/line-height font-family
文本颜色 color
文本对齐 text-align
分为
1.left：左对齐（默认）；
2.right：右对齐；
3.center：居中。
文本装饰 text-decoration

属性值描述
none 默认，没有装饰线，最常用
underline 下划线，常用
line-through 删除线，不常用
overline 上划线，几乎不用

文本缩进 text-indent
缩进单位为em字符，无论字号多大，就缩进两个字符

行间距 line-height
单位也是em，
后期也会当做上下居中使用
CSS 文本属性总结
属性含义注意事项
color 颜色 #fff / rgba(r, g, b, 透明度)
text-align 对齐 left / right / center
text-indent 首行缩进 text-indent: 2em;
text-decoration 文本修饰 text-decoration: underline; / text-decoration: none;
line-height 行高行高等于盒子高度会垂直居中

Css又分为内部样式表
行内样式表
外部样式表
有需要pink老师文档资料请留言

萌新入门第三天，css第一天，小白新手入门必看

相关推荐