HTML——day4(css)
今天开始涉及到css的相关知识。
css本质上是和HTML一样的标记语言,准确的来说他是一种层叠式样式表,主要是我们用来美化页面。
css主要有两种东西构成:选择器,声明。
与HTML相似但不同的是HTML代码一般写在body标签中而我们的css一般写在head标签中
首先我们在head标签中写下:
<style></style>标签在其中进行我们选择器的设定以及声明的设定。
我们的标签选择器分为4种:标签选择器、类选择器(非常常用)、id选择器、通配符选择器
标签选择器:
这里我们说的选择器可以简单的说成是标签的名字例如<p></p>标签我们要设置样式的时候
p {
font-size: 12px
color: red;
}
这里表示我们将p标签中的内容设置为红色以及字体大小为12px,在这里要注意的是我们的p作为选择器,花括号内的东西叫做声明,声明一般一键值对的形式出现,并且我们在写着几行代码时候p要和后面有个空格,声明中的属性与属性值之间有冒号和一个空格。
从上面我们可以直到这种设置的方法,他有一个优点就是我们可以设置很多的同名标签,也就是说我们下方body中所有的p标签都会是这样的样式
,批量操作起来非常快捷。但是我们实际运用中并不是这样的,肯定是有不一样的样式需要去设置,这时后用这种梦办法就行不通了。接下来我们讲述另几种可以单独给标签设置的方法。
类选择器:
我们单独想改变某一个标签样式时,我们在style标签内声明一个类,然后在下面的标签中我们可以直接调用,这样就实现了我们单独设置样式的目的,
.red{
color: red;
属性: 属性值;
}
.size {
font-size:50px
}
上面是我们类标签选择器的语法,我们用的类可以在下面调用
<p class="red size">我是红色</p>
同时我们也可以在p标签内中的class属性中的属性值中同时写两个类,他们之间用空格隔开。值得我们注意的是我们的类名不能是我们的标签名这点很重要。
id选择器:
我们的id选择器和类选择器非常类似都是采用上放弃昂进行声明下方进行调用,声明的方法和类一样不管类名前面不再是小黑点而是#,同时他们最大的区别就是,我们的类选择器可以调用无数次而ID选择器只能被调用一次。
同时在下方调用的时候我么用的属性为id而不是class。
通配符标签;
其作用是全局设定,不需要调用,直接在style标签中写即可;
*{
color: red;
}