style关键词

style 关键词

我们先新建一个项目

删掉src文件， 新建一个lesson01 的包 然后在包下面新建一个 css包用来放css的文件 在css包里面新建html

用法

我们在body里面输入一个一级标题

用浏览器打开发现是黑色的

那么怎么改变他的颜色呢？

我们按照规范在head的标签里面输入style关键词

我们在style标签里面输入 h1

在输入一个括号 ， 括号里面输入 color :red；

这一串代码是什么意思呢？

在style标签里面的 h1 是选着器， 是用来选择body标签里面所有的h1标签

color 关键词 是颜色的意思 red 是红色的 意思

h1{
    color:red;
}
<!--我们选中了 这个h1标签   并把它变成  红色 -->

我们用浏览器打开

就会发现 字体颜色 变成了 红色

语法

<!-- 选择器{
    声明1；
    声明2；
}-->

每一个声明，最好使用分号结尾

分离

为了让代码更规范一点，我们要把他分离

在css包中，我们在新建一个styleheet 的css文件

然后在 style.css中

输入

这样在index.html中就不用在写style标签了， 我们把他删掉

但是光在style.css中书写是没有用的

我们需要用link标签把index.hyml和style.css给链接起来

link 是链接的意思

rel =“stylesheet” 是 链接到什么文件 stylesheet 是style.css的文件

href ="css/style/css"是地址的意思 指向style.css文件

这样就可以链接起来了

我们在用浏览器打开，就会发现

字体变成红色的了

css的优势

1. 内容和表现分离
2. 网页结构表现统一，可以实现复用
3. 样式十分丰富 ，比html多很多
4. 利于SEO，容易被搜索引擎收录!