CSS3:网页变美指南

云浮万里_1

已于 2024-02-05 20:31:45 修改

阅读量1.6k

点赞数 36

分类专栏： web前端开发文章标签： css3 前端 css

于 2024-02-05 20:30:30 首次发布

本文链接：https://blog.csdn.net/weixin_74889578/article/details/136024567

版权

web前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.简介

CSS (Cascading Style Sheets，层叠样式表），用于HTML文档元素样式的定义。是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，其文件扩展名为 .css，该文件内只能写CSS。

使用唯一目的：让网页美观一致

语法：

css规则由两部分构成：

选择器：通常为需要改变样式的HTML元素；eg:h3
以及一条或多条声明（样式）：每条声明由一个属性和一个属性值组成;eg:{}内的内容

<html>
<head>
	<title>第一个网页</title>
	<style>
		h3 {
			color: red;
			font-size: 30px;
		}
	</style>
</head>
<body>
	<h3>标题</h3>
	<h3>标题2</h3>
</body>

2.CSS引入方式

把CSS和HTML关联上

内联样式（行内样式）：缺乏整体性和规划性，维护成本高（当多个标签需颜色大小一致时style属性要写多遍）

使用style属性

<p style="color: blue;font-size: 30px;">内联样式引入</p>
	<h3>标题</h3>

内部样式：单个页面内具有统一性和规划性，便于维护，但多个页面间容易混乱。

在头部使用style标签

<style>
		h3 {
			color: red;
			font-size: 30px;
		}
</style>
<h3>标题</h3>
<h3>标题2</h3>

外部样式：（推荐）当应用于多页面时，使用外部样式表可通过改变一个文件来改变整个站点的外观。

每个页面使用<link>标签链接样式表,<link>标签在头部。

<link rel="stylesheet" href="./public.css">
在public.css文件中定义：
h4{
    color: brown;
    font-size: 30px;
}

3.选择器

全局选择器：可与任何元素匹配，优先级最低，一般做样式初始化

*表示

元素选择器：如介绍终所用，不论嵌套多深都会被选中。

元素名称表示

类选择器：规定用圆点定义，优点：灵活

.class属性名来表示

ID选择器：针对某个特定的标签来使用，其名字只能使用一次。

CSS中以#来定义，id=""来使用
ID唯一
不能以数字开头

合并选择器：提取共同样式，减少重复代码

选择器的优先级：CSS中，优先级（权重）用数字衡量

行内样式1000>ID选择器100>类选择器10>元素选择器1

4.属性

下列属性均写在声明中，如：

<style>
		h3 {
			color: red;
			font-size: 30px;
		}
</style>

字体属性：

color颜色：字母、16进制：#fff00、三原色rgb( , , )、三原色加透明度rgba( , , , )
font-size大小：最小字体12px，再小可用缩放
font-weight粗细：100~400~900、bold粗、bolder更粗、light细、lighter更细
font-style样式：normal默认、italic斜体字
font-family样式:微软雅黑Microsoft YaHei、Simsun、SimHei

背景属性：

background-color背景颜色:
b-image背景图像：url("路径")
b-repeat平铺方式：当容器宽高高于图像时，默认进行复制图片沿xy进行填充，沿xy轴平铺：repeat-x/y、不平铺：no-repeat
b-size图像大小：通过百分比自定义，length设置宽高、cover保持图像纵横比最小覆盖容器区域、contain最大覆盖
b-position：设置起始位置（图像在容器显示位置），默认0%，0%，

文本属性：

text-align文本位置:左右中
t-decoration划线：下划线underline、上划线overline、删除线line-through
t-transform大小写：首字母大写captialize、全大写uppercase、全小写lowercase
t-indent首行缩进：两字符30px

表格属性：

表格边框：table, td{boder:1px solid black;}
折叠边框(单边框)：table{boder-collapse:collapse;}
表格文字对齐：水平td{text-align:center}、垂直td{vertical-align:bottom/top/center;}
表格填充：td{padding:15px;}(和宽高效果差不多)
表格颜色：td{b-color:背景颜色 color:文本颜色}

5.关系选择器

后代选择器：选择所有被E元素包含的F元素，定义时空格隔开

 
<style>
ul li{
            color:red;
        }
</style>
<ul>
        <li>列表1</li>
        <li>2</li>
        <li>3</li>
        <div>
            <li>4</li>
        </div>
    </ul>

子代选择器：只选择直接子元素，即再嵌套中的不选择，>表示

 ul>li{
            color:red;
        }
<ul>
        <li>列表1</li>
        <li>2</li>
        <li>3</li>
        <div>
            <li>4</li>
        </div>
    </ul>

相邻兄弟选择器：向下选择相邻的第一个元素，不包含嵌套中的，+表示

h2+p{
            color:red;
        }
</style>
    <h2>2</h2>
    <p>1</p>
    <p>1</p>

通用兄弟选择器：向下选择E元素之后的所有F元素，不包含嵌套中的，~表示

h2~p{
            color:red;
        }
</style>
    <h2>2</h2>
    <p>1</p>
    <p>1</p>

6.盒子模型box model

可理解为网页针对于一个元素的布局方式之一。如设置网页两个区域间的间隔。本质是一个盒子，封装周围的HTML元素。包括：

内容content：盒子内容，显示文本、图像
内边距padding：清除内容周围区域，即撑大自身大小给元素一些空隙，让其更好展示。padding: （上下）50px （左右）10px；当然也可以四个方向独立设置，-left/bottom/top即可
边框boder：围绕在内边距和内容外的边框
外边距margin：边框外区域，透明。（两个值第一个值上下第二个值左右，一个值时默认上下左右）

如果把盒子模型看做一个快递，那么内容等同于买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离。

当指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，还必须添加内边距，边框和外边距。

下面的例子中的元素的总宽度为 450px=300px (宽)+ 50px (左 + 右填充)+ 50px (左 + 右边框)+ 50px (左 + 右边距）

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

7.弹性盒子模型flex box

CSS3的一种新布局模式。是一种当页面需使用不同屏幕大小及设备类型时，确保元素拥有恰当行为的布局方式。目的即提供一种更加有效的方式来对一个容器中的子元素进行排列对齐和分配空白空间。小程序中常用。

弹性盒内容：

由弹性容器flec container和弹性子元素flex item组成。
弹性容器通过设置display属性的值为flex将其定义为弹性容器
弹性容器内包含一个或多个弹性子元素，元素默认水平摆放

弹性盒子主要针对在一个大的容器当中有很多的小盒子，考虑这些小盒子如何摆放。

display属性用于控制元素的显示方式。它指定了元素在页面布局中所占的空间以及如何与其他元素进行交互。

以下是几种常见的display属性值：

block: 元素将被显示为块级元素

inline: 元素将被显示为内联元素

inline-block: 元素将被显示为内联块级元素

none: 元素将不会被显示，完全隐藏。元素不会占据空间，也不会对布局产生影响。

flex: 将元素显示为弹性盒子，实现灵活的布局。通过设置其子元素的flex属性，可以控制各个子元素的大小和位置。

grid: 将元素显示为网格容器，通过设置行和列来创建具有灵活布局的网格结构。

弹性容器属性

flex-direction属性：写在弹性盒中，定义子元素在父容器中的位置

row:横向从左到右排列(左对齐),默认的排列方式
row-reverse:反转横向排列(右对齐),从后往前排最后一项排在最前面
column:纵向排列
column-reverse:反转纵向排列,从后往前排最后一项排在最上面

justify-content属性：写在弹性盒中，改变子元素摆放位置

flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

align-items 属性:设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

<head>
	<title>第一个网页</title>
	<style>
		.container{
			width: 500px;
			height: 500px;
			background-color: #555;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.box1{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.box2{
			width: 100px;
			height: 100px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>
</body>

子元素上的属性

对齐：设置 margin: auto; 可以使得单个弹性子元素在两上轴方向上完全居中，下面展示一个和两个子元素:

auto是一个关键字，用于指定某些属性值为自动计算的结果。当设置外边距为auto时，浏览器会自动计算外边距的值，以在父容器中水平居中元素

容器定义和上面一致
.box1{
			width: 100px;
			height: 100px;
			background-color: red;
			margin: auto;
		}
		.box2{
			width: 100px;
			height: 100px;
			background-color: blue;
			margin: auto;
		}

flex 属性：用于指定弹性子元素如何分配空间。即权重：比例大，权重大

.box1{
			width: 100px;
			height: 100px;
			background-color: red;
			flex: 2;
		}
		.box2{
			width: 100px;
			height: 100px;
			background-color: blue;
			flex: 3;
		}

8.文档流

文档流是文档中可显示对象在排列时所占用的位置或空间，也就是一些默认效果。标准流（文档流）中限制很多，如高矮不一、空格折叠（只会在网页显示一个空格)。所以遇到默认格式不适用时，才采用脱离文档流。

脱离文档流：不用元素默认方式，方法有：

浮动
绝对定位
固定定位

浮动

float属性定义元素往哪个方向浮动，任何元素都可以浮动。可解决如两个img放一起有空隙的问题

浮动以后使元素脱离文档流
只有左右浮动，没有上下（默认上下）
也可以理解为脱离后和原来不在一层了，当元素浮动时，即脱离了标准流那一层，便会出现下面的覆盖情况。

元素左右浮动：

左浮动：float:left;
右浮动：float:right;
box2在标准层，box1在另一层

</head>    
    <style>
    .box1{
			width: 200px;
			height: 200px;
			background-color: red;
			float: left;
		}
    .box2{
			width: 400px;
			height: 400px;
			background-color:blue;
		}
    </style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>

如设置导航栏:

ul li{
			float:left;
			margin: 0 20px;
		}

<ul type="none">
		<li>导航1</li>
		<li>导航2</li>
		<li>导航3</li>
</ul>

容器不足时：

清除浮动

浮动副作用：

浮动元素会造成父元素高度塌陷
后续元素会受到影响

当父元素没有设置高度时，子元素有浮动此时父元素将不被撑开，即不显示。此时后续的元素处在标准层将被浮动元素覆盖。父元素设置有高度时将不存在这些问题

.container {
			width: 500px;
			background-color: #555;
		}
.box1 {
			width: 100px;
			height: 100px;
			background-color: red;
			margin: 5px;
			float: left;
		}
.box2 {
			width: 100px;
			height: 100px;
			background-color: blue;
		}
<body>
	<div class="container">
		<div class="box1"></div>
		<div class="box1"></div>
		<div class="box1"></div>
		<div class="box2"></div>
	</div>
</body>

后续元素为子元素：

后续元素与父元素同级：

清除浮动方法：

父元素设置高度：此方法只将父元素正常显示
受影响的后续元素添加clear：both属性
父级元素增加overflow:hidden
伪对象形式

.box2 {
			width: 100px;
			height: 100px;
			background-color: blue;
			clear: both;
		}

定位

定义：先position属性指定了素的定位类型。设置定位类型之后可在四个方向left、right、top、bottom调整位置。

relative:相对定位
absolute：绝对定位
fixed：固定定位

.box2 {
			width: 100px;
			height: 100px;
			background-color: blue;
			position: relative;
			left: 200px;
			top: 100px;
            z-index:100;
		}

相对定位：父级元素一般采用此定位类型。

绝对定位：会脱离文档流。且每设置一次会出现新的一层。

如果父级元素具有定位，子级元素采用相对定位和绝对定位时，会随着父级元素的位置改变而改变。如果父级元素没有定位，子级元素相对于文档进行位置调整。

固定定位：会脱离文档流。一般只用于网页需固定的区域。不随滚动而滚动。

z-index:即层级，层级越大，位于层次越靠前。即大层级覆盖小层级。

9.CSS3新特性

圆角

border-radius属性：

一个值：四个圆角值相等
两个值：第一个值为左上角与右下角、第二个值为右上角与左下角
四个值：左上角、右上角、右下角、左下角
百分比：50%即为圆

阴影

box-shadow属性：四个值含义，前两个必选：水平阴影位置h-shadow、垂直阴影位置v-shadow、模糊距离blur、阴影的颜色

div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
            border-radius: 20px;
            box-shadow: 0 0 10px black;
        }

动画

用百分比来规定变化的时间，或用关键词from和to等同于0%和100% ，0%是动画的开始100%是动画的完成。分为创建和执行两部分。

<style>
        /* 创建动画 */
        @keyframes myanim{
            0%{
                width: 200px;
                background-color: red;

            }
            50%{
                width: 400px;
                background-color: green;

            }
            100%{
                background-color: blue;
            }  
        }
        div{
            width: 200px;
            height: 200px;
            background-color: grey;
            /* 执行动画 */
            animation: myanim 3s linear 0s infinite;
        }
/*div:hover表示当鼠标悬停在<div>元素上时触发的样式效果*/
        div:hover{
            /* 鼠标放上动画停止 */
            animation-play-state: paused;
            background-color: coral;
        }
    </style>

呼吸效果 :

10.媒体查询

能使页面在不同终端设备下达到不同的效果。根据设备的大小自动识别加载不同的样式。

设置meta标签： 设置此标签后才能使页面在不同设备即不同分辨率下自适应调整大小。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

媒体查询语法：

通过此方法可以使在不同设备即不同分辨率下显示结果也不同。如设计网页时根据屏幕变化有选择的隐藏内容。

    <style>
        .box{
            width: 100px;
            height: 100px;
        }
        /* 手机 */
        @media screen and (max-width:768px) {
            .box{
                background-color:red;
            }
        }
        /* 平板 */
        @media screen and (min-width:768px) and (max-width:996px){
            .box{
                background-color: blue;
            }
        }
        /* 电脑 */
        @media screen and (min-width:996px) {
            .box{
                background-color:green;
            }   
        }
    </style>

11.雪碧图

也叫精灵图，是网页图片应用处理方式允许将一个页面涉及到的所有零星图片包含到一张大图中去。优点：减少图片的字节;减少网页的http请求,从而提高页面性能.

原理：

通过background-image引入背景图片
通过back-position移动背景图片到自己需要的位置：两个值：水平（左移为负）、垂直

    <style> 
        .icon{
            width: 26px;
            height: 27px;
            /* 行内元素变为块级元素 */
            display: block;
            /*边框*/
            border: 1px solid red;
            background-image: url(2.webp);
            background-position: -31px 0;
        }
    </style>

12.字体图标

使用图标时往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢，所以可使用字体图标的方式来显示图标。既解决了失真问题，也解决了图片占用资源的问题

常用字体图标库：阿里字体图标库

优点：

轻量性：加载速度会减少HTTP请求
灵活性：可利用CSS设置大小颜色等
兼容性：网页字体支持所有现代浏览器

<head>  
    <link rel="stylesheet" href="D:\Edge下载\download\font_8csnfwd84pe\iconfont.css">
    <style>
        .haha{
/*覆盖iconfont中的字体大小，按需求调整图标*/
            font-size: 50px;
            }
    </style>
</head>
<body>
    <span class="iconfont icon-name haha">
    </span>
</body>