CSS 初阶语法(一)

92 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 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";
}