字符设置
@charset "UTF-8";
导入其它css文件
@import "page2.css";
color
transparent 完全透明
CSS属性-文本
text-decoration
none 没有装饰线
overline 上划线
underline 下划线
line-through 中划线
spacing
div {
/*字间距*/
letter-spacing: 5px;
/*词间距*/
word-spacing: 20px;
}
text-transform
none 没有效果
capitalize 首字母大写
uppercase 所有字符变成大写
lowercase 所有字符变成小写
text-indent
p {
width: 200px;
background-color: #f00;
text-indent: 2em; /*首行缩进2个字符 */
/* px为绝对单位，em为相对单位，1 em = 1 font-size */
}
text-align
设置元素内容在元素中的水平对齐方式
left 左对齐
right 右对齐
center 中间对齐
justify 两端对齐
span和div显示文字有所区别
CSS属性-字体
font-size
font-size: 20px;
font-size: 200%; /* font-size为父元素font-size的2倍 */
font-size: 2em; /* font-size为父元素font-size的2倍 */
font-family
从左到右查找字体，直到可用的字体为止
英文字体只适用于英文，中文字体适用于中文和英文
如果希望中英文使用不同字体，应该将英文字体写在前面，中文字体写在后面
font-family: "Courier New", "华文彩云";
@font-face
@font-face {
/*设置字体路径*/
src: url("fonts/GSKA00H.TTF");
/*自定义字体名称*/
font-family: "长城行楷体";
}
div {
font-family: "长城行楷体";
}
font-weight
可选值为100到900整百数
normal为400
bold为700
strong b h1~h6标签font-weight属性默认为bold
font-weight: normal;
font-style
em, i, address, cite, var, dfn等元素font-style属性默认值为italic
font-style: normal; /* 正规字体 */
font-style: italic; /* 用字体的斜体显示 */
font-style: oblique; /* 将字体倾斜显示 */
font-variant
若属性值为small-caps，则将字符的小写字母替换为缩小后的大写字母
font-variant: small-caps;
选择器
类型选择器
对选择元素起作用
div {
color: aquamarine;
}
通用选择器
对所有元素起作用
* {
color: aquamarine;
}
id选择器
对id相同元素起作用
单个页面不要出现两个id相同的元素
<p id="p1">i am p</p>
#p1 {
color: cadetblue;
}
class选择器
对class相同元素起作用
单个页面可以出现多个class相同的元素
一个标签可以多个class
<p class="main">i am p</p>
.main {
color: cadetblue;
}
属性选择器
拥有title属性的元素
[title] {
color: cadetblue;
}
/* 对title = "1"的元素起作用 */
[title= "1"] {
color: cornflowerblue;
}
<span title="1">i am span</span>
<span>i am span</span>
<span title="">i am span</span>
后代选择器
后代组合
满足嵌套顺序的元素，直接后代或者间接后代
div span {
color: cadetblue;
}
<div>
<span>span2</span>
<p>
<span>span3</span>
</p>
</div>
子组合
满足嵌套顺序的元素，直接后代
div>span {
color: cadetblue;
}
<div>
<span>span2</span>
<p>
<span>span3</span> /* 对这个元素不起作用 */
</p>
</div>
兄弟选择器
相邻兄弟组合
按顺序相邻的一个兄弟
div+span {
color: cadetblue;
}
<div>
<span>span1</span> /* 无效 */
<div>div</div>
<span>span2</span> /* 有效 */
<span>span3</span> /* 无效 */
</div>
全体兄弟组合
按顺序的所有兄弟
div~span {
color: cadetblue;
}
<div>
<span>span1</span> /* 无效 */
<div>div</div>
<span>span2</span> /* 有效 */
<span>span3</span> /* 有效 */
</div>
选择器组
交集
满足div且class为"test"的标签
div.test {
color: cadetblue;
}
<div class="test">i am div</div>
并集
满足p或者class为"test"的标签
p, .test {
color: cornflowerblue;
}
<p>p</p>
<span class="test">span</span>
伪类
设置鼠标放上去的效果
.titleBar:hover {
background-color: royalblue;
/* 鼠标变成小手 */
cursor: pointer;
}
