前端日记 - 2019年1月14日

复杂选择器,CSS基础属性字体,边框,利用border画三角形

想法

这学期实验室的汇报总算告一段落了,要开始复习经济与管理了。

笔记

选择器

父子选择器/派生选择器

1
div span { }

直接子元素选择器

1
div > em { }

浏览器内核在查找选择器时,是从右向左查找的,节省时间。

并列选择器

1
2
3
4
5
6
7
<div>1</div>
<div class="demo">2</div>
<p class="demo">3</div>
<!-- 只让2染色 -->
<style>
div.demo { }
</style>

分组选择器

1
2
3
em,
strong,
span { }

权重问题

复杂选择器权重相加即可。

CSS基础属性

字体

1
2
3
4
5
6
7
8
9
div {
font-size: 12px;
font-weight: bold;
font-style: italic;
font-family: arial;
color: darkblue; /* 土鳖式写法,开发时禁用。 */
color: #fff #ff4400; /* 颜色编码,开发时使用。 */
color: rgb(255, 255, 255); /* 颜色代码 */
}
  • font-size:浏览器默认字体大小为16px,但一般都使用12px。设置的是字体的高,而不是宽。
  • font-weightbold值为600,当bolder、lighter没有效果时,是因为字体不支持多种样式。
  • font-family:最通用字体arial,乔布斯的第一个产品。
  • color:设置字体颜色,注意没有font-color属性!

边框

1
2
3
4
5
6
7
8
div {
border: 1px solid black;
border-width: 2px;
border-style: dotted; /* 点状虚线,dashed(条状虚线)用的较多。 */
border-left-color: red;
border-top-color: green;
border-right-color: #00f;
}

边界实际上是平分的斜线。

在画对话框的三角时可以拿border来画,方法:将widthheight属性置零,放大border-width,将其他方向的border-xxx-color置为透明色transparent即可。

其他

CSS速查手册