CSS教程
第三阶段-day02_css
(day02上午第二节课半开始）
1 CSS
主要用于修饰html显示,
可以创建一个专门的css页面来写。也可以在html页面写。
CSS历史
- web的 衰落：
在web早期（1990-1993）,html是一个很局限的语言。几乎完全由用于描述段落，超链接，列表和标题的结构化元素组成。随着万维网的出现（用户交互体验的加强），对html的要求越来越大，人们迫切需要html增加新的元素，去完成一个特定的功能。
- 一片混乱：
迫于压力，html开始出现<font>，<i> , <s> 等标签,还增加了某些标签的很多属性。但是html是一种描述结构的语言，也开始描述外在表现了。几年之后这种随便的做法暴露出严重的问题：1：由于html既写结构又写样式，导致页面缺乏结构性，降低了网页的可访问性。2：页面维护越来越困难
- 在1995年w3c开始发布CSS的计划(work-in-prrgress)。
CSS概念
CSS 指层叠样式表 （级联样式表）
- 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等等外观显示样式。
- CSS以HTML为基础，提供了丰富样式功能。
0创建css文件
1.1 在html页面引入css
行内写在<body>中，内联&外联（链接和导入）写在<head>标签里。
- 行内: 在html页面的标签上增加一个style属性, style属性的值,就是css代码
<body>
<p style=" color:#FFFFFF">
p标签段落内容。
</p>
</body>
- 内联： 写在html页面的<head>标签里,用<style>标签包裹
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>
- 外联: 写在head标签内部
- 链接
<head> <link rel="stylesheet" type="text/css" href="css_3.css" /> </head>
-
- 导入
<head>
<style type="text/css">
@import url(css_3.css);
</style>
</head>
1.2 选择器
就是把css样式用过某种途径和html标签相互关联起来---->选择器
- 标签选择器
- 类选择器
- Id选择器
- 复合选择器
- 伪类选择器
- 伪元素选择器
- 属性选择器
1.2.1 标签选择器
通过标签名实现关联
Eg:// 对所有<p>标签
<style>
p {color:red;}
</style>
1.2.2 类选择器（最常用）
通过类名(class)关联起来
- 类选择器的选择符是 “.“
- 类选择器在css样式编码中是最常用到的
在html代码中, 标签有一个class属性, class属性所指向的值,就是这个标签的css类名
在css中(style标签里) 可以创建一个 以 .类名{} 的样式和html对应的标签绑定起来
<head>
<style>
.aaa{
background: green;
}
</style>
</head>
<body>
<hr>
<div class="aaa">
我是一个div
</div>
</body>
这里类名可以重复。
1.2.3 Id选择器
通过id属性关联起来
- ID选择器以 "#" 来定义
- 不同于类选择器，ID 选择器不能结合使用
- 不提倡用id 去写样式，因为他的权重太高。 Id 主要是为了 js 做准备。
在html代码中, 标签有一个id属性, id属性所指向的值,就是这个标签的css id
在css中(style标签里) 可以创建一个 以 #id{} 的样式和html对应的标签绑定起来
注意: id是一个唯一标识, 在一个html文档中, id是不可重复的
Id选择器,不是那么常用, (dom, id一帮会用于dom操作, js内容。对使用id选择器没有任何影响,但就是很少用。)
1.2.4 其它选择器(稍微看看即可）
1.复合--选择器
1.关联选择器（包含选择器）--->嵌套
p b { color:#FF000;}
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
2.组合选择器
多个不同选择器要用逗号分隔开
p,div { color:#FF0000;}
类组合
.aaa ,div { color:#FF0000;}
<p class="aaa">P标签显示段落。</p>
<div>DIV标签显示段落</div>
2.属性选择器
[attribute] 用于选取带有指定属性的元素
[target]{
}
div[id]{
background-color:yellow;
}
[attribute=value] 用于选取带有指定属性和值的元素。
a[href="http://www.w3school.com.cn/"][title="W3School"] {
color: red;
}
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[title~=flower]{
background-color:yellow;
}
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
a[href*="w3school.com.cn"] {
color: red;
}
3.伪类--选择器
CSS伪类是用来添加一些选择器的特殊效果。
其实就在html中预先定义好的一些选择器。
:link 应用于未被访问过的链接；
:hover 应用于鼠标悬停到的元素；
:active 应用于被激活的元素；
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。
:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child() 选择某个元素的一个或多个特定的子元素；
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type() 选择指定的元素；
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择的元素是它的父元素的唯一一个子元素；
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty 选择的元素里面没有任何内容。
Eg:
<a class="red" href="https://www.baidu.com/" target="_blank">CSS 语法</a>
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
a.red:link {color:#FF0000;} /* 未访问的链接 */
a.red:visited {color:#00FF00;} /* 已访问的链接 */
a.red:hover {color:#FF00FF;} /* 鼠标划过链接 */
a.red:active {color:#0000FF;} /* 已选中的链接 */
4.伪元素--选择器
伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多
:first-letter 选择元素文本的第一个字（母）。
:first-line 选择元素文本的第一行。
:before 在元素内容的最前面添加新内容。
:after 在元素内容的最后面添加新内容。
div::before {
content: "1111";
height: 40px;
width: 100px;
background-color: blue;
display: block;
}
5.区别(伪元素/伪类)
伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。
伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。
1.2.5 选择器优先级
如果有两个相同 的样式同时作用于某一个html元素, 那么就会在这两个样式间产生一个优先级问题
- !important > 行内 > ID选择器 > 伪类|类 | 属性选择 > 标签 > 通配符*
在满足上述优先级的基础上, 要满足一个’就近原则’(上下结构的就近原则)
eg1:
<head>
<style>
div{
background: yellow;
font-size: 100px;
}
.div1{
background: silver;
}
</style>
</head>
<body>
<div class="div1">
我是一个div1
</div>
</body>
显示灰色。类选择器优先级＞标签选择器。
Eg2:
eg3:
两个都是标签选择器，∈同级选择器，就近原则。Div显示黄色，如果两个位置换换，就是红色（css.css文件中div是红色）
Html代码,在浏览器中解析的时候, 是从上向下解析的
1.3 盒子模型
我们把html的标签在页面上所占据的位置看成一个矩形的盒子
这个盒子分为四部分:
- 元素内容(context)
- 内边距(padding)
- 边框(border)
- 外边距(margin)----------参数方式上右下左
这个盒子是可控大小, 但是控制大小的方式需要注意
注意1: 宽高仅是元素内容的宽高
width: 100px;
height: 100px;
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
height: 30px;
background: red;
}
.div2{
height:50px;
background: silver;
/*margin:100px;*/
/*margin: 10px 100px;*/
/*margin: 10px 100px 200px;*/
margin: 10px 100px 200px 300px;
/*margin-top: 10px;*/
/*margin-bottom: 10px;*/
/*margin-left: 10px;*/
/*margin-right: 10px;*/
padding: 50px;
padding-top: 100px;
border: 10px solid wheat;
}
.div3{
height: 30px;
background: yellow;
}
</style>
</head>
<body>
<div class="div1">
我是一个div
</div>
<div class="div2">
我是一个div
</div>
<div class="div3">
我是一个div
</div>
</body>
注意2: 背景色 = 元素内容的区域+ 内边距的区域
注意3: 如果要设置边框, 那么必须要把边框设置为固体
如果不设置solid，不显示边框。
1.4 标签的分类和盒子模型
1.4.1 块级元素
独占一行, 上下排列
- 独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
- 可以直接控制宽度、高度以及盒子模型的相关css属性
- 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度 (宽度能继承)
- 在不设置高度的情况下，块级元素的高度是它本身内容的高度 (高度不能继承)
- 块级元素是指本身属性为display:block;的元素。
- 通常使用块级元素来进行大布局（大结构）的搭建
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div-f{
width: 200px;
height: 200px;
}
.div-s{
background: yellow;
}
</style>
</head>
<body>
<div class="div-f">
<div class="div-s">
123
</div>
</div>
</body>
1.4.2 行级元素
在一行排列, 从左向右
- 和其他内联元素从左到右在一行显示
- 不能直接控制宽度、高度以及盒子模型的相关css属性，(但是直接设置内外边距的左右值是可以的)
- 内联元素的宽高是由本身内容的大小决定（文字、图片等）
- 内联元素只能容纳文本或者其他内联元素（不要在内联元素中嵌套块级元素）
- 内联元素是指本身属性为display:inline;的元素。
通常使用行级元素来进行文字、小图标（小结构）的搭建
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
b{
width: 100px;
height: 100px;
background: yellow;
margin: 100px;
padding: 100px;
}
</style>
</head>
<body>
<b>123</b>
123
<br>
1223456789876543
</body>
1.4.3 行内块
本质上是一个行级元素(在一行排列), 有一些块级元素的特性(可以控制宽高和内外边距)
- 本质属于行级元素
- 可以与其他行内元素、内联元素共处一行
- 可以设置宽高、内外边距
- 属性为display:inline-block;的元素。
注意: 父元素, 子元素
实际上就是嵌套的关系,
子元素,所占据的盒子模型空间, 是父元素的元素内容区域
注意4: 关于元素的嵌套问题
行级元素内部, 不能嵌套块级元素, 可以嵌套行级元素
块级元素内部可以嵌套行级和块级
注意5: 默认的display属性
我们可以修改html元素的默认属性, 来做行和块的转变
不推荐使用(如果块级元素转化为行级元素之后,仅一行内容, 可以用, 不推荐)
1.4.4 外边距合并
在html页面元素排列中, 在垂直方向, 有两个外边距 ‘紧’相邻, 那么就会产生一种现象----叫外边距合并
合并之后的值? 是产生合并现象的最大的那个外边距, 就是最终合并值
1.5 浮动
1.5.1 标准文档流, 标准流
元素(标签) 根据元素特性(行级,块级, 行内块) 从左向右, 自上而下顺序排列
这就是标准文档流
1.5.2 设计的初衷
浮动设计的初衷是为了做文字环绕效果
浮动一般用来布局(把一个块级元素, 变成行内块元素)
1.5.3 浮动
float: left;
把一个元素’漂浮起来’
浮动使元素脱离了标准文档流
1.5.4 浮动特性
1：浮动只影响后面的元素
因为浮动脱离了标准文档流, 浮动元素本来占据的空间, 就空了出来
后面的元素,要想复合标准文档流规范, 它就要占据它前面的空间
所以,浮动影响后面的元素
2：浮动找浮动，不浮动找不浮动
3：浮动以元素顶部为基准对齐
4：浮动可是实现模式转换（eg:span 设置浮动可以设置宽高）
5：让块级元素在一行显示
1.5.5 清除浮动
谁被浮动效果影响了, 那么就在谁之上清除浮动
如图，div4被浮动效果影响了，就在div4上清除浮动。
清除后，效果：
Clear: 谁受影响谁清除
- left:在左侧不允许浮动元素。
- right:在右侧不允许浮动元素。
- both:在左右侧不允许浮动元素，同时清除左右方向的浮动
clear: both;
.text { clear:both; }
为什么要清除浮动？
1.5.6 撑开和塌陷
- 当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。
- 一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。
- 出现这种情况，我们需要清除浮动
2 重点
1, 选择器(三个: 标签, id 类)(其它选择器了解)
2, 盒子模型(理解)
3, 浮动 (熟悉)
3 作业
1.代码动手敲一遍
2.实现点击导航如图
3.实现导航如图
-
CSS9资料入门指南11-12
-
CSS浮动资料详解：初学者指南11-12
-
CSS选择器资料详解与实战教程11-12
-
CSS样式资料：初学者必备指南11-12
-
CSS项目实战：从入门到上手11-11
-
CSS定位项目实战：新手指南11-11
-
CSS浮动项目实战：初学者指南11-11
-
CSS选择器项目实战：从入门到上手11-11
-
CSS样式项目实战：新手入门指南11-11
-
CSS基础知识详解：从入门到实践教程11-05
-
如何用 Jest 测试 CSS Font Loading API（介绍）10-25
-
10 个每个 UI 开发人员都应该知道的 CSS 代码段10-25
-
怎么检测是否已经安装了scss（Sass）-icode9专业技术文章分享10-22
-
TailwindCSS开发入门指南10-22
-
TailwindCSS项目实战：从入门到简单应用10-22
