CSS一

发表于 | 分类于

font color

文字相关font

1
2
3
4
5
6
7
p{
  font-size: 30px;                 //文字大小
  font-family: 微软雅黑/"SimSun"           //文字字体
  font-weight: bold/normal/400     //文字加粗
  font-style: normal/italic               //文字斜体
  line-height: 20px                //文字行高
}

联写 font: font-style font-weight font-size/line-height font-family

1
2
3
p{
  font: italic 700 30px/20px 宋体;
}

颜色相关color

1
2
3
4
5
6
p{
  color: red;
  color: #fff;
  color: #ffffff;
  background-color: rgba(0,0,0,0.5)
}

背景background

1
2
3
4
5
6
7
div {
  background-color: red;                                        //背景颜色
  background-image:url('gradient2.png');                        //背景图片
  backgroun-size: 100px;                                        //背景大小
  background-position: 5px 5px/top left;                        //背景图像的起始位置。
  background:#ffffff url('img_tree.png') no-repeat right top;   //连写
}

文本text

文本对齐

1
2
3
4
5
p {
  text-align:center;             //文本居中
  text-align:left;              //文本居左
  text-align:right;             //文本居右
}

文本修饰

1
2
3
4
5
6
p {
  text-decoration:none;            //没有线
  text-decoration:overline;        //线在头部
  text-decoration:line-through;    //线穿透
  text-decoration:underline;       //线在询问
}

文本缩进

1
2
3
p {
  text-indent:50px;  //用来指定文本的第一行的缩进。
}

a链接

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
L-V-H-A: love hate

1
2
3
4
a:link {background-color:#B2FF99;}    /* 未访问链接 */
a:visited {background-color:#FFFF85;} /* 已访问链接 */
a:hover {background-color:#FF704D;}   /* 鼠标移动到链接上 */
a:active {background-color:#FF704D;}  /* 鼠标点击时 */

组合选择器

并集选择器

1
2
3
div,p,span{
  color: red;
}

后代选择器

1
2
3
div p {
  color: red;
}

子代选择器

1
2
3
div>p {
  color: red;
}

相邻兄弟选择器

1
2
3
div+p {
  color: red;
}

后续兄弟选择器

1
2
3
div~p {
  color: red;
}