第三阶段-day02_css
2022/4/3 6:19:58
本文主要是介绍第三阶段-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.实现导航如图
这篇关于第三阶段-day02_css的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14CSS-Module学习:轻松入门指南
- 2024-11-12CSS9资料入门指南
- 2024-11-12CSS浮动资料详解:初学者指南
- 2024-11-12CSS选择器资料详解与实战教程
- 2024-11-12CSS样式资料:初学者必备指南
- 2024-11-11CSS项目实战:从入门到上手
- 2024-11-11CSS定位项目实战:新手指南
- 2024-11-11CSS浮动项目实战:初学者指南
- 2024-11-11CSS选择器项目实战:从入门到上手
- 2024-11-11CSS样式项目实战:新手入门指南