1.选择器
标签选择器:p{},a{},h{}等
类选择器:.className{},在标签内加入属性class="className"
id选择器:#idName{},在标签内加入属性id="idName"
通配符选择器:*{}
后代选择器:p .className{}
子元素选择器:.nav>a,仅会选择儿子标签
并集选择器
div,
p,
.pig li {
color: pink;
}
伪类选择器(用于给链接不同状态加效果,前后顺序不可颠倒)
/* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */
a:link {
color: #333;
text-decoration: none;
}
/*2. a:visited 选择点击过的(访问过的)链接 */
a:visited {
color: orange;
}
/*3. a:hover 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
}
/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: green;
}
focus选择器(给input框加特效)
input:focus {
background-color: pink;
color: red;
}
2.字体属性
复合写法:/* font: font-style font-weight font-size/line-height font-family; */
font-weight:字体粗细,100-700,400为正常,700加粗
font-size/line-height 字高/行高
3.文本外观
color: rgb(255, 0, 255);
/* 对齐方式 */
text-align: right;
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
text-decoration: overline;
/* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离 */
text-indent: 2em;
/* 行间距 */
line-height: 25px;
4.行内式、内链式、外链式
<p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>
<style>
div {
color: pink;
}
</style>
<head><link rel="stylesheet" href="style.css"><head>
5.emmet语法快速写html
div>a.links{$只小猪}*4回车
<div>
<a href="" class="links">1只小猪</a>
<a href="" class="links">2只小猪</a>
<a href="" class="links">3只小猪</a>
<a href="" class="links">4只小猪</a>
</div>
6.块元素与行内元素
块元素:div,h1-h6,p,ul,ol,li等
行内元素:span,a等
7.文字垂直居中
设置盒子height=文字行高inline-height
8.背景属性
9.属性权重