前端工程师实战开发:一文彻底弄懂CSS选择器!(包含伪类、伪元素选择器)

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标签里面

声明块

通过声明块指定为元素设置的样式,声明块由一个一个的声明组成。声明是一个名值对结构,一个样式对应一个样式值,名和值之间用:连接,以;分隔。

那么如何知道可以对元

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值