第三阶段-day02_css

2022/4/3 6:19:58

本文主要是介绍第三阶段-day02_css,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

(day02上午第二节课半开始)

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 撑开和塌陷

  • 当父容器没有设置高度,里面的盒子没有设置浮动的情况下会将父容器的高度撑开。
  • 一旦父容器中的盒子设置浮动,脱离标准文档流,父容器立马没有高度,下面的盒子会跑到浮动的盒子下面。
  • 出现这种情况,我们需要清除浮动

 

重点

1, 选择器(三个: 标签,  id  类)(其它选择器了解)

2, 盒子模型(理解)

3, 浮动 (熟悉)

 

作业

 1.代码动手敲一遍

2.实现点击导航如图

 

 

 3.实现导航如图

 



这篇关于第三阶段-day02_css的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程