简单学习 CSS3

最新推荐文章于 2024-06-04 18:04:50 发布

开玩喜66

最新推荐文章于 2024-06-04 18:04:50 发布

阅读量198

点赞数

分类专栏：前端基础学习文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_34172440/article/details/119987085

版权

前端基础学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS 的学习

什么是 CSS
CSS 选择器（重点 + 难点）
盒模型
美化（文字、阴影、超链接、渐变等等）
浮动
定位
动画
等等

1、什么是 CSS

CSS（Cascading Style Sheet 层叠级联样式表）
- 表现于美化网页
  - 字体、颜色、边距、高宽、背景、网页定位
CSS 发展史：
- CSS1.0：最开始的 CSS，只能美化基本样式
- CSS2.0：DIV（块） + CSS，提出了 HTML 与 CSS 结构分离的思想，有利于SEO（搜索引擎优化）
- CSS2.1：浮动，定位
- CSS3.0：圆角边框，阴影，动画，等等。（有浏览器兼容性问题）

2、css 优势

使用 css 的优势：

建议使用独立于 html 的 css 文件
HTML 与 CSS 结构分离，即内容和表现分离
网页结构表现统一，可以实现复用
样式丰富
容易被搜索引擎收录，有利于 SEO

3、三种导入css的方式

优先级：就近原则

哪个样式离那个标签元素最近，则哪个优先级高

3.1 行内样式

在标签元素中，编写一个 style 属性，其中编写样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入css的方式</title>
</head>
<body>

<!--行内样式
在标签元素中，编写一个 style 属性，其中编写样式
-->
<h1 style="color: red">一级大标题</h1>

</body>
</html>

3.2 内部样式

在 style 标签中，可以编写 css 代码
语法：
选择器{
声明1；
声明2；
}
每一个声明，最好以分号结尾。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!--内部样式表-->
    <style>
        h1{
            color: red;

        }
    </style>

</head>
<body>

<h1>我是一级标题</h1>

</body>
</html>

3.3 外部样式

链接式
导入式

3.3.1 链接式（link）

HTML 与 CSS 结构分离，即内容和表现分离
推荐使用这种规范（link），独立于 html 的 css 文件
- rel：默认为层列样式表（stylesheet）
- href：指向的地址

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!--外部样式——链接式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<h1>我是一级标题</h1>

</body>
</html>

css：

/*外部样式表*/
h1{
    color: red;
}

3.3.2 导入式（@import）

@import 是 CSS2.1 特有的
缺点：打开一些大型网页，会导致先出现骨架，再美化，所以推荐使用链接式

<style>
    @import url("css/style.css");
</style>

3.3.3 链接式与导入式的区别

语法结构不同
- 链接式是 HTML 标签，只能放在 html源代码中使用
- 导入式是 css 样式，是 CSS2.1 特有的，使用时需要 style 标签

4、选择器（重难点）

选择器的作用：选择页面上的某一个或者某一类元素

4.1、3种基本选择器（重点）

标签选择器
类选择器（class）
id 选择器

优先级：（不遵循就近原则）

id选择器 > 类选择器 > 标签选择器

4.1.1 标签选择器

会选择页面上所有这个标签元素
格式：
标签的名称{
声明；
}

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*标签选择器，会选择页面上所有这个标签元素*/
        h1{
            color: black;
            background: #1efff5;
            border-radius: 20px;
        }
        p{
            font-size: 100px;
        }
    </style>
</head>
<body>
    
<h1>一级标题</h1>
<h1>第二个一级标题</h1>
<p>段落</p>
    
</body>
</html>

4.1.2 类选择器

选择所有 class 属性一致的标签，可以跨标签多个标签归类，可以复用
格式：
.class的名称{
声明；
}

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*类选择器*/
        .yi{
            color: red;
        }
        .ji{
            color: blue;
        }
    </style>
</head>
<body>

<h1 class="yi">一</h1>
<h1 class="ji">级</h1>
<h1 class="yi">标</h1>
<h1 class="ji">题</h1>
<p class="yi">归类</p>

</body>
</html>

4.1.3 id选择器

id 必须保证全局唯一！
格式：
#id名称{
声明；
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>

    <style>
        /*id选择器
        
        */
        #biaoti01{
            color: red;
        }
        #biaoti02{
            color: blue;
        }
    </style>

</head>
<body>

<h1 id="biaoti01">一级标题</h1>
<h1 id="biaoti02">一级标题</h1>

</body>
</html>

4.2 层次选择器

后代选择器
子选择器
相邻选择器（相邻兄弟选择器）
通用选择器

<body>
    <p>p0</p>
    <p class="duanluo">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
</body>

4.2.1 后代选择器（空格）

在某个元素的后面
例如：body 后面所有层级的所有 p

/*后代选择器*/
body p{
    color: red;
}

4.2.2 子选择器（ > ）

只有一代，某个元素后一代，儿子
例如：body 下一层级的所有 p

/*子选择器*/
body>p{
   color: red;
}

4.2.3 相邻兄弟选择器（ + ）

同级，当前选中元素向下的一个，且这一个还得挨着当前元素，对下不对上。
例如：.duanluo 只对向下紧挨着的，且同一层级的一个 p

/*相邻兄弟选择器*/
.duanluo+p{
    color: red;
}

4.2.4 通用选择器（ ~ ）

同级，当前选中元素向下的所有，对下不对上。
例如：.duanluo 只对向下同一层级的所有 p

/*通用选择器*/
.duanluo~p{
    color: red;
}

4.3 结构伪类选择器（结构伪类选择器）

所有带冒号的就是伪类。

<body>

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

</body>

匹配其父元素中的第一个子元素（例如：匹配 ul 列表的第一个子元素）

/*ul的第一个子元素*/
ul li:first-child{
    color: red;
}

匹配其父元素中的最后一个子元素（例如：匹配 ul 列表的最后一个子元素）

/*ul的最后一个子元素*/
ul li:last-child{
    color: red;
}

匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。（例如：选择当前 p 元素的父级元素，选中父级元素的第二个，并且是当前 p 元素才生效）

/*选中 p1，定位到父元素，选择当前的第一个元素，如果这个元素是 p 元素才生效*/
p:nth-child(1){
    background: green;
}

匹配同类型中的第 n 个同级兄弟元素。（例如：选择当前 p 元素的父级元素中，第二个类型为 p 元素的元素）

/*选择 p 元素的父元素中，第二个类型为 p 的元素*/
p:nth-of-type(2){
    background: red;
}

在鼠标移到链接上时添加的特殊样式

p:nth-of-type(3):hover{
    color: red;
}

4.4 属性选择器（常用、重点）

/*格式*/
标签[属性 + 符号 + 属性值]{
    声明；
}

符号
- =（绝对等于）
- *=（包含）
- ^=（以什么开头）
- $=（以什么结尾）

/*存在id属性的元素*/
a[id]{
    background: red;
}

/*class元素为last的元素*/
a[class=last]{
    background: green;
}

/*class 中包含有 links的元素*/
a[class*=links]{
    background: red;
}

/*href 中以 abcd 开头的元素*/
a[href^=abcd]{
    background: red;
}

/*href 中以 pdf 结尾的元素*/
a[href$=pdf]{
    background: red;
}

5、页面美化

5.1 页面为什么需要美化

有效传递页面信息
吸引用户
突显页面主题
提高用户体验

5.2 span

重点元素，一般都是用 span 标签扩起来
类似于 div 标签

<html lang="en">
<head>
    <style>
        #impo{
            font-size: 50px;
        }
    </style>
</head>
<body>
<span id="impo">这里专门放置重要的元素的</span>
</body>
</html>

5.3 字体样式

字体样式常用：
- color：颜色
- font-size：字体大小
- font-weight：字体粗细
- font-family：字体

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: 新宋体;
            color: #ff1333;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>
</head>
<body>
<h1>中国知识产权四十年</h1>
<p>
    截止目前，我国颁布的知识产权的相关法律法规包括《中华人民共和国专利法》、《中华人民共和国专利法实施细则》、《国防专利条例》、《集成电路布图设计保护条例》、《中华人民共和国着作权法》、《计算机软件保护条例》、《中华人民共和国海关关于知识产权保护的实施办法》等。
</p>
<p class="p1">
    以上法律的提出和完善是一个相当漫长的历史过程，客观上也需要中国内部商业动能的推动下，以及中国企业和外部商业世界长期交往与博弈。
</p>
</body>
</html>

可以将字体样式写成一条

<style>
    /*字体：字体风格 字体粗细 字体大小 字体样式*/
    p{
    font: oblique bolder 20px 宋体;
    }
</style>

5.4 文本样式

文本样式中大概有：
1. 颜色
  - 颜色单词
  - RBG（#FFFFFF）[0~F]
  - rbg(255,255,255)[0~255
  - rbga(255,255,255,1)[0_{255,透明度：0}1]
2. 文本对齐方式：text-align
3. 首行缩进：text-indent
4. 行高：line-height（和块或者标签的高度一致，单行文字就可以上下居中）
5. 装饰：下划线 text-decoration（a 标签默认有下划线）
6. 文本与图片水平对齐：vertical-align（middle 水平对齐，需要有参照物，例如：a,b{}）

<html lang="en">
<head>
    <style>
        h1{
            color: rgba(255,0,0,0.9);
            text-align: center;
        }
        .p1,.p1+p{
            text-indent: 2em;
        }
        .p3{
            background: #1efff5;
            height: 210px;
            line-height: 70px;
        }
        .a1{
            text-decoration: underline;
        }
        .a2{
            text-decoration: line-through;
        }
        .a3{
            text-decoration: overline;
        }
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p class="a1">123abc</p>
<p class="a2">123abc</p>
<p class="a3">123abc</p>
<h1>中国知识产权四十年</h1>
<p class="p1">
    截止目前，我国颁布的知识产权的相关法律法规包括《中华人民共和国专利法》、《中华人民共和国专利法实施细则》、《国防专利条例》、《集成电路布图设计保护条例》、《中华人民共和国着作权法》、《计算机软件保护条例》、《中华人民共和国海关关于知识产权保护的实施办法》等。
</p>
<p>
    以上法律的提出和完善是一个相当漫长的历史过程，客观上也需要中国内部商业动能的推动下，以及中国企业和外部商业世界长期交往与博弈。
</p>
<p class="p3">
    Up to now, the relevant laws and regulations on intellectual property issued by China include the patent law of the people's Republic of China, the detailed rules for the implementation of the patent law of the people's Republic of China, the regulations on national defense patents, the regulations on the protection of integrated circuit layout designs, the copyright law of the people's Republic of China, the regulations on the protection of computer software Measures of the customs of the people's Republic of China for the implementation of intellectual property protection, etc.
</p>
<p>
    <span>这</span>
    <img src="images/what.png" alt="what">
    <span>是神魔</span>
</p>
</body>
</html>

5.5 阴影

text-shadow：水平偏移，垂直偏移，阴影半径，阴影颜色

text-shadow: 10px 10px 2px #ff1333;

5.6 超链接伪类

a 超链接
a:hover 鼠标悬停时
a:active 鼠标点击时
a:link 鼠标未点击时
a:visited 鼠标点击后

/*取消链接下划线，默认字体颜色*/
a{
    text-decoration: none;
    color: #000000;
}
/*鼠标悬停时*/
a:hover{
    color: red;
    font-size: 50px;
}
/*鼠标点击时*/
a:active{
    color: green;
}
/*鼠标点击后*/
a:visited{
    color: #75d0d4;
}

5.7 列表

list-style
- none：去掉圆点
- circle：空心圆
- decimal：有序数字
- square：正方形
- 等等

ul li{
    height: 30px;
    list-style: none;
}

ul li a{
    text-decoration: none;
    color: black;
    font-size: 14px;
}

ul li a:hover{
    color: red;
    text-decoration: underline;
}

5.8 背景图片

background-image 图片布置方式是默认全部平铺的
background-repeat 设置布置方式
- repeat：默认布置方式，平铺
- repeat-x：水平平铺
- repeat-y：垂直平铺
- no-repeat：不平铺，只有一个
background-position：图片位置（x轴 y轴）

div{
    width: 1880px;
    height: 1072px;
    /*border 边框*/
    border: 1px solid red;
    /*
    background-image ,图片布置方式是默认全部平铺的
    */
    background-image: url("../images/what.png");
}

.div1{
    background-repeat: repeat-x;
}
.div2{
    background-repeat: repeat-y;
}
.div3{
    background-repeat: no-repeat;
}

5.9 渐变

推荐此网站：渐变网站

background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);

5.10 透明度（opacity）

通常用来设置背景透明度
IE8 以及更早的版本用的是 filter 属性。filter:Alpha(opacity=50)

opacity: 0.5;

6、盒子模型

6.1 什么是盒子模型

margin：外边距

border：边框

padding：内边距

在这里插入图片描述

6.2 边框

边框属性
1. 粗细
2. 样式
3. 颜色

选择器{
    boreder:粗细 样式 颜色；
}

6.3 内外边距

内边距：padding
外边距：margin

选择器{
    padding:上 左 下 右；
    padding:上下 左右；
	margin:上 左 下 右;
    margin:上下 左右；
}

6.4 盒子模型计算方式

margin + border + padding + 内容

6.5 圆角边框

6.5.1 边框圆角

border-radius：左上右上右下左下（顺时针）

/*顺时针 （左上 右上 右下 左下） */
border-radius: 100px 50px 25px 5px;

6.5.1 圆形、半圆、1/4圆

一个圆（前提是正方形）= 宽度的一半 + 边框宽度

width: 500px;
height: 500px;
border: 10px solid black;
border-radius: 260px;

半圆（选择什么方向的半圆），例如：上半圆

width: 500px;
height: 250px;
border: 10px solid black;
border-radius: 260px 260px 0 0;

1/4 圆，例如：左上角的 1/4圆

width: 250px;
height: 250px;
border: 10px solid black;
border-radius: 260px 0 0 0;

6.6 盒子阴影

box-shadow: x轴 y轴模糊半径颜色

box-shadow: 10px 10px 30px black;

7、浮动

7.1 标准文档流

块级元素：独占一行（h1~h6… p div 列表等等）
行内元素：不独占一行（span a img strong 等等）
行内元素 可以被包含在 块级元素中，反过来就不行

7.2 display

这也是一中实现行内元素排列的方式，但更多情况下都是用 float
display：
- none：不显示
- block：块级元素
- inline-block：块级元素，但同时保持行内元素的

display: none;
display: block;
display: inline-block;

7.3 float

左浮动

float: left;

右浮动

float: right;

7.4 父级边框塌陷问题

clear
- right：右侧不允许有浮动元素
- left：左侧不允许有浮动元素
- both：两侧都不允许有浮动元素
- none：允许

7.4.1 解决父级边框塌陷问题的 4 打解决方案：

增加父级元素的高度

增加一个空的 div 标签，清除它的浮动，且内外边距为 0

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

overflow
- 在父级元素中增加一个 overflow： hidden
```
 overflow： hidden
```
父类添加一个伪类：after
- 避免了在程序中增加空的 div，所以这种方法时最常用的
- 父级元素后增加空内容，变成块级元素，清除左右浮动
```
#father：after {
    content: '';
    display: block;
    clear: both;
}
```

7.4.2 小结

浮动元素后面增加空的 div
- 优点：简单
- 缺点：有空的 div，代码中尽量避免空的 div
设置父级元素的高度
- 优点：简单
- 缺点：有了固定的高度限制，当新增的元素超过了设定的高度，就不行了
设置父级元素的 css 样式，overflow
- 优点：简单
- 缺点：如果使用下拉，会使你的网页变丑！
（推荐）父类添加伪类：after（最常用的）
- 优点：以上的缺点他都没有，只是简单的书写了 css 样式，简单来说没有副作用
- 缺点：写法复杂一点点，也不太复杂。

7.5 display 与 float

对比
- display：方向不可控制，会自动对齐，不需要担心父级边框塌陷问题
- float：方向可以控制，浮动起来会脱离标准文档流，有父级边框塌陷问题

8、定位

8.1 相对定位（relative）

position:relative;
- 相对于原来的位置，进行指定的偏移，且仍处于标准文档流中，原来的位置会被保留。
- 例如：top：-100px；上边离原来的位置偏移 -100px（向上移动 100px）

position: relative;
top: -100;/*向上位移100px*/

8.2 绝对定位（absolute）

基于某个东西，来进行定位
1. 没有父级元素定位的前提下，是基于浏览器的定位
2. 父级元素拥有定位的时候，就是基于父级元素的定位
在父级元素范围内移动：相对于父级的位置，进行偏移，绝对定位，会是它不在标准文档流中，原来的位置也不会被保留

position: absolute;/*绝对定位*/
left: 200px;

8.3 固定定位（fixed）

无论怎么移动窗口，怎么移动下拉框，都无法改变

position: fixed;

8.4 z-index

层级，图层
默认是 0，最高是无限
例如：背景层在文字层上，就可以使用 z-index 来改变层级，从而达到文字在背景层上

9、简单了解动画（@keyframes）

@keyframes 规则
animation：设置时间
animation-iteration-count：动画次数
animation-direction: 动画是否在下一周期逆向地播放

#color-bibi{
    width: 500px;
    height: 500px;
    background-color: black;
}
#color-bibi:hover{
    animation: myfirst 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes myfirst {
    from{background-color: black}
    to{background-color: white}
}
文档流中，原来的位置会被保留。

  * 例如：top：-100px； 上边离原来的位置偏移 -100px（向上移动 100px）

```css
position: relative;
top: -100;/*向上位移100px*/

开玩喜66

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单学习 CSS3

CSS 的学习什么是 CSSCSS 选择器（重点 + 难点）盒模型美化（文字、阴影、超链接、渐变等等）浮动定位动画等等1、什么是 CSSCSS（Cascading Style Sheet 层叠级联样式表）表现于美化网页字体、颜色、边距、高宽、背景、网页定位CSS 发展史：CSS1.0：最开始的 CSS，只能美化基本样式CSS2.0：DIV（块） + CSS，提出了 HTML 与 CSS 结构分离的思想，有利于SEO（搜索引擎优化）CSS2.1：浮动，定位
复制链接

扫一扫