今天来学习一下CSS的基础哦,大概理解一下,CSS就像是C语言里的.h文件(?),可以引用到html文件里并给html里面的类(结构)赋值修改。接下来看看css的基础。
CSS引入方式
内联方式
内联方式是指直接在 HTML 标签中的 style 属性中添加 CSS。
<div style="background: red"></div>
这种就是内联方式,我前面的的玩意就是这样写的,然后搜到说是一种最糟糕的书写方式,因为会让html文件中引入很多css代码,让html文件变得冗长且难以维护,所以过段时间我得把前面的玩意重写一下。
嵌入方式
嵌入方式指的是在 HTML 头部中的 < style > 标签下书写 CSS 代码。
<head>
<style>
.content {
background: red;
}
</style>
</head>
这种方式在前面的练习中我也用了,这种方式只对当前页面有效,emmmm,在单页面时还不错,可以一目了然的看出来,但是当多页面用到同一类css时,也会导致冗长且难以维护。
链接方式
链接方式指的是使用 HTML 头部的 < head > 标签引入外部的 CSS 文件。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
这种方法有良好的可维护性,且CSS代码只在CSS文件中,在HTML文件第一次加载时才会引入。过段时间把前面的用这种方式封装一下,先看看链接方式的写法。
CSS选择器
简单选择器
类型选择器
p{
color:blue;
}
这个css文件就可以修改html文件里的< p>标签的属性
类选择器
.paragraph{
color:red;
}
这个css文件可以修改html文件里的class="paragraph"的标签,比如:
<h1 class="paragraph">我是类选择器的对象</h1>
class命名方法可以使用BEM,要求可读性高就行了。
ID选择器
#para{
color:green;
}
这个css文件可以修改html里的id="para"的标签,比如:
<h1 id="para">我是类选择器的对象</h1>
优先级比较
这个时候可能有人会来刁难 问FY了,“哎呀FY,如果我在一个标签里用的类型、类和ID都有对应的css会显示什么样的呀?”,这个时候FY会建议你自己去试试(不是)。
我们直接把结果列出来吧:
ID选择器 > 类选择器 > 类型选择器
这样简单理解一下吧,ID的唯一的,class中可以包含多个id,而一种类型里可以分多个类,相当于是一个包含关系,越小的数量级他的优先级就会越高。
属性选择器
img[src]{
width: 100px;
}
这句话的意思是指定带src的img类型会固定宽度。
伪类选择器
a:hover{
color:red;
}
这句话的意思是鼠标放到超链接上,文字会变成红色。
后代选择器
div span{
color:red;
}
这句话的意思是< div >标签下的所有< span >元素的文字颜色修改。
<div>
<span>span 1.
<span>span 2</span>
</span>
</div>
<span>span 3</span>
在这个html文件中,只有span1和span2的颜色会被改变。
css的一些小基础大概就在这里了,剩下的有时间再进行补充吧。