html5+css3,html不会再出第六版。css3是里面是分模块的,比如字体模块,盒子模块等等这些。每个模块都有各自不同的版本,所以css3是统一命名的,不用纠结。
回顾
回顾一下网页的三个部分:结构(html)、表现(css)、行为(JavaScript)。
之前的h标签等等其他标签,样式都是浏览器默认的,改变样式就是css的工作内容。
只要是表现就应该用css来改变,而不是着重于标签的样式,因为标签的样式是浏览器默认的,html标签只关注语义。
层叠样式表
其实网页的样式是分层的,我们看到的网页其实是立体的,底面有一层,左边右边有一层等等。不同的样式通过层叠来实现,可以通过css分别为网页的每一个层设置样式。
我们从上往下看,就是俯视一个网页(类似化妆,一层一层化妆,只是看到表面),这叫css的层叠样式表,相当于css就是给网页化妆的。
使用css修改元素样式
内联样式(通过标签的style属性来设置样式)
在style属性里面,样式名和样式值使用冒号来连接,使用分号来分隔不同样式名
这叫做内联样式(行内样式)
<p style="color:red;font-size:60px;">你好</p>
在开发中绝对不要使用内联样式,因为只对设置了style属性的标签有效,如果需要其他标签也含有这个效果,就要再次复制一个。在样式发生变化时就会一个个修改,不方便维护。
内部样式(编写到head中的style标签里面)
我们可以通过在<head>
标签里面写style标签来统一做到样式统一修改,
但是这样直接复制过去肯定是不行的,因为之前这些css语法是写到p标签的style属性里面的,现在复制去head的style里面,究竟是对哪一个标签生效呢?。所以在style标签里面写样式,就需要先写对哪个标签进行生效,这就是css的选择器
这样就可以做到统一修改。但是其他html也想用这个样式呢?是不是也要复制到另一个文件中的head标签里面。
外部样式(创建css文件)
将样式编写到另外的css文件中通过link标签引入外部的css文件
外部css文件
p{ color:blue; font-size:60px; }
引入:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>你好</p> <p>aaa</p> </body> </html>
在开发中必须使用外部样式,将样式编写到外部的css文件中,可以使用到浏览器的缓存机制,从而加快网页的加载速度,提供用户体验。
css编写的位置
在html文件中头部里面的<style>
标签里面的内容不属于html,而是属于css,所以只能写css的语法。
css的注释的语法是
/** css 注释 css 基本语法: 选择器 声明块 */
选择器
通过选择器可以选中页面中的指定元素 比如选择器是p,他的作用就是将声明块所定义的样式应用到所有p标签里面
声明块
通过声明块指定为元素设置的样式,声明块由一个一个的声明组成。声明是一个名值对结构,一个样式对应一个样式值,名和值之间用:连接,以;分隔。
那么如何知道可以对