首页 > 其他分享> > 第三阶段-day02_css

第三阶段-day02_css

2022-04-03 05:00:08 作者：互联网

(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: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>