开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第十一天,点击查看活动详情
1.选择器
1.1基础选择器
1.1.1 标签选择器
标签名 {
属性:值;
}
p {
color: red;
font-size: 20px;
…………
}
不能差异化显示
1.1.2 类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器
语法:
结构需要用class属性来调用 class 类的意思
css 中定义类 ( .name)[name 不能为标签名]
.red {
color:red;
}
HTML 中调用类(class="name" )
<div class="red">
选择css中的类,就可以改变相应的属性
</div>
<p class="red">
我也要变红
</p>
1.1.3 id 选择器
id选择器 可以为标有id的HTML元素指定特定的样式。
HTML 元素以id属性 来设置id选择器,css中的id选择器以 “ # ” 来定义
语法:
CSS 中,以 # 号开头定义 id
#name {
element: value;
……
}
HTML中,通过 id="name" 来调用
<p id="name">
……
</p>
注意:
一个 id 选择器只能被调用一次,过后就不能被调用了
1.1.4 通配符选择器
在CSS中,通配符选择器使用 "*"定义,它表示选取页面中所有元素(标签)。
语法:
*{
element: value;
……
}
2.字体属性
2.1 字体系列
CSS 使用 font-family 属性定义文本的字体系列。
p {font-family:"微软雅黑";}
div {font-family:Arial,"Microsoft","微软雅黑";}
2.2 字体大小
CSS 使用 font-size 属性定义字体大小
p {
font-size: 20px;
}
h1 {
font-size: 30px;
}
/*标题标签比较特殊,需单独指定*/
2.3 字体粗细
CSS 使用 font-weight 属性定义字体粗细
一般更提倡用 数字(不跟px) 表示粗细
语法:
p {
font-weight: 700;
}
注:400=normal 700=bold
2.4 字体样式
CSS 中使用 font-style 属性设置文本风格
p {
font-style: normal;
}
| 属性值 | 作用 |
|---|---|
| normal | 浏览器的默认字体样式 |
| italic | 倾斜体 |
2.5 字体复合属性
字体复合属性可以把以上文字样式综合起来写,这样可以更节约代码
语法:
body {
/*font-style font-weight font-size/line-height font-family*/
/*顺序不能改变,字体大小和字体不能省略*/
font: italic 700 20px "Microsoft yahei";
}