跟随小甲鱼老师每天学习一点CSS和HTML，其乐无穷

学习目录

好，今天学的就是CSS的基础部分了

CSS是什么

先上一段最纯粹的CSS代码：

body{background: #E77E22}

这一段代码，大名叫规则，小名叫一条样式。

选择器就是上面代码的body，选择器是规则的应用对象。

方括号内的就是声明的集合了，每条声明包含属性/值对，每条声明后面都要加上一个分号。

CSS的继承

先上样例代码：

<!doctype html>
<html>
<head><title>css的继承</title><meta charset='utf-8'><style>#first{color: #F06}</style>
</head><body><div id='first'>这是1<div id='second'>这是2<div id='third'>这是3</div></div></div></body>
</html>

猜猜效果会是什么呢？

效果如下：

可以看出来它们的颜色都一样，为什么呢？？

third,second,first的关系就好像父子一样，

first是second的父节点,second是third的父节点，所以当给first设置了颜色属性后，second和third就继承过来了相应的属性。

然后我们再重新设置一下CSS：

<style>#first{color: #F06}#second{color:#F67;}#third{color: #F98}</style>

效果图如下：

由此我们可以得到一个结论：CSS的继承就是

儿子有定义，听自己的；

没有，听老子的

CSS选择器

CSS有三种最基础的选择器：标签选择器，id选择器和类选择器。

这三种选择器不仅可以分开使用，还能组合使用。

比如：

多个标签需要设置共同的颜色：

h1,h2,...hn{color: red}

2.父子标签联合使用设置CSS

section h1{
font-size:33px;
}

3.还可以具体到孙子，，，

section article h1{
font-size:33px
}

4.标签+类选择器

section .red{
color:F#66F;
font-size:33px;
}

注意：写CSS 的时候，不同元素要用空格分开。

CSS是什么及其继承与选择器相关推荐

[前端笔记——CSS] 10.层叠与继承+选择器
[前端笔记--CSS] 10.层叠与继承+选择器 1.层叠与继承 1.1 冲突规则 1.2 继承 1.3 层叠 1.4 CSS位置的影响 2.选择器 2.1 选择器是什么? 2.2 选择器列表 2.3 ...
CSS基础「二」复合选择器 / 元素显示模式 / 背景 / 三大特性
本篇文章为 CSS 基础系列笔记第二篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 ...
CSS基础、盒子模型、选择器与权重
CSS基础.选择器与权重.盒子模型一.CSS的字体属性 CSS Fonts(字体)属性用于定义字体系列,例如大小.粗细.和文字样式(斜体之类). 1.字体 CSS使用font-family属性定义文 ...
css基础，盒子模型，选择器与权重
1.css基础 1.1css简介 css(叠层样式表)是一种标记语言 1.1.1css语法规则选择器加声明 <style>/* 选择器{样式} *//* 给谁改样式{改什么样式} */p ...
[转载] CSS模块化【封装-继承-多态】
第一次听到"CSS模块化"这个词是在WebReBuild的第四届"重构人生"年会上,当时我还想,"哈,CSS也有模块化,我没听错吧?"事实上 ...
[css] 标签、class和id选择器三者的区别是什么？分别在什么时候用？
[css] 标签.class和id选择器三者的区别是什么?分别在什么时候用? 标签选择器:tag{} 选取对应的标签例如 a span div class选择器:.class-name{} 选取对应c ...
[css] 请举例说明css有哪些不可继承的属性？
[css] 请举例说明css有哪些不可继承的属性? 1.display:规定元素应该生成的框的类型2.文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本 ...
妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么一.总结一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...

CSS是什么及其继承与选择器

学习目录

CSS是什么

CSS的继承

CSS选择器

CSS是什么及其继承与选择器相关推荐

最新文章

热门文章