CSS 基础

羊角不拖没
178 阅读18分钟

CSS

CSS 概念

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。是一组样式设置的规则，用于控制页面的外观样式,是一门样式表语言.

与HTML文件连接

  1. 打开 index.html 文件，然后将下面一行粘贴到文档头（也就是 <head> 和 </head> 标签之间）。
<link href="styles/style.css" rel="stylesheet">
  1. 保存 index.html 并用浏览器将其打开。

CSS结构（规则集）

css-declaration-small.png

语法

<head> 
    <style> 
        选择器{ 
            属性名：属性值; 
            属性名：属性值; 
            } 
     </style>
 </head>

整个结构称为 规则集（通常简称“规则”），各部分释义如下：

  • 选择器（Selector）

    HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。

  • 声明（Declaration）

    一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

  • 属性（Properties）

    改变 HTML 元素样式的途径。（本例中 color 就是 [<p>] 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。

  • 属性的值（Property value）

    在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

注意其他重要的语法：

  • 每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
  • 在每个声明里要用冒号（:）将属性与属性值分隔开。
  • 在每个规则集里要用分号（;）将各个声明分隔开。

如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

[多元素选择]

也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：

p, li, h1 {
  color: red;
}

CSS的引用

外部样式表

使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入

  • 使用 link标签 链接外部样式文件选择器的标签都起作用
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

提示：type属性可以省略

  • @import 指令 导入外部样式文件
<style>
	@import "CSS样式文件路径";
	@import url(CSS样式文件路径);
</style>

内部样式表

内部样式表直接写在html文件中的head标签内，需要使用style标签声明，对当前页面中所有符合样式

行内样式表

也称为嵌入样式，使用HTML标签的style属性定义 只对设置style属性的标签起作用

语法

<标签名 style="样式属性: 属性值;">.......</标签名>

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* 1.内部样式 */
		p{
			color:blue;
		}
	</style>
	<!-- link链接外部样式文件 -->
	<!-- <link rel="stylesheet" type="text/css" href="style/hello.css"> -->
	<!-- 3.import导入外部样式文件 -->
	<style>
		/* @import "style/hello.css" */
		@import url(style/hello.css);
	</style>
</head>
<body>
	<p>welcome to CSS!</p>
	<p>欢迎来到CSS课堂!</p>
	<hr>
	<h2 style="color:red;">WEB前段工程师</h2>
	<h2>JAVA开发工程师</h2>
	<hr>
	<div>嘿嘿</div>
	<div>哈哈</div>
</body>
</html>

CSS的选择器

常用选择器

选择器名称选择的内容示例
元素选择器（也称作标签或类型选择器）所有指定 (该) 类型的 HTML 元素p 选择 <p>
ID 选择器具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）#my-id 选择 <p id="my-id"> 或 <a id="my-id">
类选择器具有特定类的元素（单一页面中，一个类可以有多个实例）.my-class 选择 <p class="my-class"> 和 <a class="my-class">
属性选择器拥有特定属性的元素img[src] 选择 <img src="myimage.png"> 而不是 <img>
伪（Pseudo）类选择器特定状态下的特定元素（比如鼠标指针悬停）a:hover 仅在鼠标指针悬停在链接上时选择 <a>

基础选择器

类选择器

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

注意事项：

  • 调用时不能添加 . 号
  • 同时调用多个类选择器时，以 空格 分隔
  • 类选择器名称不能以 数字 开头

ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配 以标签的id属性作为样式应用的依据，一对一的关系

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color:red;
			font-size:20px;
		}
		h2{
			color:yellow;
		}
		.hello{
			background: #cccccc;
		}
		.world{
			font-weight:bold;
		}
		#haha{
			color:blue;
		}
	</style>
</head>
<body>
	<p>welcome to css!</p>
	<p>hello world!</p>
	<h2>WEB前端开发</h2>
	<h3>Java开发</h3>
	<hr>
	<p class="hello">welcome to css!</p>
	<p>hello world!</p>
	<h2>WEB前端开发</h2>
	<h3>Java开发</h3>
	<div class="hello">主讲：Hector</div>
	<div class="world">主讲：Hector</div>
	<hr>
	<h1 id="haha">哈哈</h1>
</body>
</html>

复杂选择器

复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用 必须同时满足两个条件才能应用样式

组合选择器

也称为集体声明 将多个具有相同样式的选择器放在一起声明，使用逗号隔开

嵌套选择器

在某个选择器内部再设置选择器，通过空格隔开 只有满足层次关系最里层的选择器所对应的标签才会应用样式 注意：使用 空格 时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* 1.标签选择器和类选择器合起来使用----复合选择器 */
		h1.aaa{
			color:red;
		}
		/* 1.标签选择器和ID选择器合起来使用----复合选择器 */
		p#bbb{
			color:blue;
		}
		/* 2.组合选择器 */
		h1,p,div,span,.ccc{
			font-size:30px;
		}
		div{
			background:violet;
		}
		.ccc{
			font-weight:bold;
		}
		/* 3.嵌套选择器 */
		/* div p{
			color:green;
			text-decoration:underline;
		} */
		div>p{
			color:green;
			text-decoration:underline;
		}
		div h3.ddd{
			color:red;
		}
	</style>
</head>
<body>
	<!-- 需求：只想修饰class属性为aaa的h1标签 -->
	<h1 class="aaa">welcome</h1>
	<h4 class="aaa">css</h4>
	<h1>hello</h1>
	<hr>
	<!-- 我要修饰ID属性为bbb的p标签 -->
	<p id="bbb">world</p >
	<p>html</p>
	<h1 id="bbb">主讲：叽叽</h1>
	<hr>
	<!-- 给h1、p、div、span标签中的内容设置字号为30px -->
	<h1>hello</h1>
	<p>CSS</p>
	<div>WEB开发</div>
	<span class="ccc">JAVA开发</span>
	<hr>
	<!-- 需求：修饰div内部的p标签 -->
	<div>
		<p>div内部的p标签</p>
		<h3>div内部的h3标签</h3>
	</div>
	<hr>
	<div>
		<h3>
			<p>div内部的h3内部的p标签</p>
		</h3>
	</div>
	<hr>
	<!-- 需求：修饰div内部的class为ddd的标签 -->
	<div>
		<p>div内部的p</p>
		<h3 class="ddd">div内部的h3</h3>
		<p class="ddd">PPPP</p>
	</div>
	<h3 class="ddd">h3h3h3</h3>
</body>
</html>

后代选择器

后代选择器，用来选择元素或元素组的所有后代元素。 与子元素选择器相比，后代选择器选取的不一定是直接后代（儿子），而是作用于所有后代元素（儿子、孙子、重孙…）都可以。

AA673C74326475989EDCD44ED490D77D.png

语法

后代选择器的写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。 当标签发生嵌套时，内层标签就成为外层标签的后代。

<div>
    <p>
        {属性1：属性值1；
         属性2：属性值2；
         }
      <\p>
 <\div>
代码示例
	<div>父亲</div>
	<div>
		<p>儿子</p>
	</div>
	<div>
		<div>
			<p>儿子</p>
		</div>
	</div>
	<p>父亲</p>

选取类为 box的元素的 id为aa后代元素

<!DOCTYPE html>
<html lang="en">
<head>
 <title>后代选择器</title>
 <style>
   .box #aa {
     background: palegreen;
   }
 </style>
</head>
<body>
   <div class="box">
       <p>aaaaaaaaaaaaa</p>
       <p>222222222222</p>
       <div>
         <p>wwwwwwwwwwww</p>
         <p id="aa">qqqqqqqq</p>
       </div>
   </div>
</body>
</html>

（>）子元素选择器

选取某个元素的直接后代元素 与后代元素选择器相比，子元素选择器 选取的一定是直接后代（儿子

代码示例

选取所有类为box的元素，后代p元素

<!DOCTYPE html>
<html lang="en">
<head>
  <title>子元素选择器</title>
  <style>
    .box>p {
      background: palegreen;
    }
  </style>
</head>
<body>
    <div class="box">
        <p>aaaaaaaaaaaaa</p>
        <p>222222222222</p>
        <div>
          <p>wwwwwwwwwwww</p>
          <p id="aa">qqqqqqqq</p>
        </div>
    </div>
</body>
</html>

选择aaaaaaaaaaaaa和222222222222

（+）相邻兄弟选择器

选择紧连着另一元素后的元素，二者具有相同的父元素。只会选择的一个相邻的匹配元素

代码示例

选取h1后面的h2元素

<!DOCTYPE html>
<html lang="en">
<head>
  <title>相邻兄弟选择器</title>
  <style>
    h1+h2 {
      background: palegreen;
    }
  </style>
</head>
<body>
    <div class="box">
        <h1>sssssssssssss</h1>
        <h2>hhhhhhhhhhh</h2>
        <h2>xzxzxcxzzvxzvxz</h2>
        <div>
          <p>wwwwwwwwwwww</p>
          <p id="aa">qqqqqqqq</p>
        </div>
    </div>
</body>
</html>

选择hhhhhhhhhhhhh

伪类选择器

根据不同的状态显示不同的样式，一般多用于 标签

四种状态：

  • :link 未访问的链接
  • :visited 已访问的链接
  • :hover 鼠标悬浮到连接上，即移动在连接上
  • :active 选定的链接，被激活
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style>
		/*a:link{
			font-size: 12px;
			color:black;
			text-decoration: none;
		}
		a:visited{
			font-size: 15px;
			color:;
		}
		a:hover{
			font-size: 20px;
			color:blue;
		}
		a:active{
			font-size: 40px;
			color:green;
		}*/
		a:link,a:visited{
			color:#666666;
			font-size: 13px;
			text-decoration: none;
		}
		a:hover,a:active{
			color:#ff7300;
			text-decoration: underline;
		}
		/*普通的标签也可以使用伪类选择器*/
		p:hover{
			color:red;
		}
		p:active{
			color:blue;
		}
	</style>
</head>
<body>
	<a href="复杂选择器.html">复杂选择器.html</a>
	<p>CSS从入门到精通！</p>
</body>
</html>

伪元素选择器

  • :first-letter 为第一个字符的样式
  • :first-line 为第一行添加样式
  • :before 在元素内容的最前面添加的内容，需要配合content属性使用
  • :after 在元素内容的最后面添加的内容，需要配合content属性使用
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p:first-letter{
			color:red;
			font-size:30px;
		}
		p:first-line{
			background:pink;
		}
		p:before{
			content:"嘿嘿";
		}
		p:after{
			content:"哈哈";
		}
	</style>
</head>
<body>
	<p>hello world!</p>
	<hr>
	<p>
		hello world! <br>
		welcome to css!
	</p>
</body>
</html>

选择器优先级

优先级

行内样式>ID选择器>类选择器>标签选择器 原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式 后加载会覆盖先加载的同名样式

内外部样式加载顺序

就近原则 原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先

!important

可以使用!important使某个样式有最高的优先级

代码示例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="style/world.css">

	<style>
		div{
			font-size:20px;
		}
		.hello{
			font-weight:bold;
			color:blue;
		}
		#world{
			text-decoration: underline;
			color:green;
		}
		p{
			color:red;
		}
	</style>
</head>
<body>
	<div class="hello" id="world" style="color:#ff7300">CSS从入门到精通</div>
<p>主讲：叽叽</p>
</body>
</html>

CSS样式

字体和文本样式

  1. 找到之前 Google Font 输出的地址。并以 [<link>]元素的形式添加进 index.html 文档头（ [<head>] 和 </head> 之间的任意位置）。代码如下：
<link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">

以上代码为当前网页下载 Open Sans 字体，从而使自定义 CSS 中可以对 HTML 元素应用这个字体。 2. 接下来，删除 style.css 文件中已有的规则。 3. 将下列代码添加到相应的位置，用你在 Google Fonts 找到的字体替代 font-family 中的占位行。（ font-family 意味着你想要你的文本使用的字体。）这条规则首先为整个页面设定了一个全局字体和字号（因为 <html> 是整个页面的父元素，而且它所有的子元素都会继承相同的 font-size 和 font-family）：

html {
  /* px 表示“像素（pixels）”: 基础字号为 10 像素 */
  font-size: 10px;
  /* Google fonts 输出的 CSS */
  font-family: 'Open Sans', sans-serif;
}
  1. 接下来为文档体内的元素（（h1）(en-US)、（li）和 (p)）设置字号。将标题居中显示，并为正文设置行高和字间距，从而提高页面的可读性。
h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  /* line-height 后面可以跟不同的参数，如果是数字，就是当前字体大小乘上数字 */
  line-height: 2;
  letter-spacing: 1px;
}

字体属性

属性含义说明
font-size大小、尺寸可以使用多种单位
font-weight粗细
font-family字体
font-style样式
font简写

font-size

取值：

  • inherited继承，默认从父标签继承字体大小（默认值），所有CSS属性的默认值都是inherited
  • px像素 pixel
  • %百分比，相对父标签字体大小的百分比
  • em倍数，相对于父标签字体大小的倍数

HTML根元素默认字体的大小为16px,也称为基础字体大小

font-weight

取值：

  • normal普通（默认）
  • bold粗体
  • 自定义400 normal 700 bold

font-family

要求系统中要安装指定的字体

一般建议写3种字体：首选、其次、备用。以逗号隔开

font-style

取值：

  • normal普通
  • italic斜体

font

简写属性：font:font-style|font-weight|font-size|font-family

必须按此顺序书写

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			font-size: 30px;
		}
		p{
			/*font-size: 20px;*/
			font-size: 80%;
		}
		.hello{
			font-size: 2em;
		}
		body{
			font-size: 62.5%;
		}
		ul li{
			/*font-size: 30px;
			font-weight: bold;
			font-family: 华文行楷,宋体,黑体;
			font-style: italic;*/
			font: italic bold 30px 微软雅黑;
		}
	</style>
</head>
<body>
	<p>
		CSS从入门到精通！
		<span>主讲：叽叽</span>
	</p>
	<span>主讲：叽叽</span>
	<hr>

	<div>
		我的DIV
		<p>
			CSS从入门到精通
			<span>主讲：叽叽</span>
		</p>
	</div>
	<hr>

	<span class="hello">主讲：叽叽</span>
	<hr>

	<ul>
		<li>
			嘿嘿
		</li>
	</ul>
</body>
</html>

文本属性

属性含义说明
color颜色
line-height行高行之间的高度
text-align水平对齐方式取值：left、center、right
vertical-align垂直对齐方式取值：top、middle、bottom可以用于图片和文字的对齐方式
text-indent首行缩进
text-decoration文本修饰取值：underline、overline、line-through
text-transform字母大小写转换取值：lowercase、uppercase、capitalize首字母大写
letter-spacing字符间距
word-spacing单词间距只对英文有效
white-space空白的处理方式文本超出后是否换行，取值：nowrap

 color

取值，四种写法：

  • 颜色名称：使用英文单词
  • 16进制的RGB值：#RRGGBB
  • 特定情况下可以缩写  #FFFFFF--->#FFF 白色 #000000--->#000 黑色 #FF0000--->#F00 红色 #00FF00--->#0F0 绿色 #0000FF--->#00F 蓝色 #CCCCCC--->#CCC 灰色 #FF7300--->无法简写

rgb函数：rgb(red,green,blue)

每种颜色的取值范围，[0,255] rgb(255,0,0)----->红 rgb(0,255,0)----->绿 rgb(0,0,255)----->蓝

rgba函数：rbga(red,green,blue,alpha)

可以设置透明度，alpha取值范围：[0,1] 0表示完全透明 1表示完全不透明

rgba(255,0,0,1)----->纯红 rgba(255,0,0,0.5)---->红色半透明

背景属性

属性含义说明
background-color背景颜色
background-image背景图片
background-repeat背景图片的重复方式
background-position背景图片的显示位置
background-attachment背景图片是否跟随滚动
background简写

background-color

取值：transparent 透明

background-image

  • 必须使用url()方式指定图片的路径
  • 如果是在css样式文件中使用相对路径，此时是相对于css文件，不是相对html文件

background-repeat

取值：repeat(默认)，repeat-x，repeat-y,no-repeat

 background-position

默认背景图显示在左上角

取值：

  • 关键字：top、bottom、left、right、center
  • 坐标：左上角为(0,0)坐标，向右为x正方向,向下为y正方向

CSS雪碧图，即CSS Sprites,也称为CSS精灵,一种CSS图像合并技术

含 义：将网页中许多非常小的图标/图片整合到一张大图中，当访问面面时只需要下载一次，可以减少访问

服务器的次数，提高性能

原理：使用background-position进行背景定位，使用坐标精确地定位出背景图片的位置

background-attachment

取值：scroll(默认)、fixed固定不动

 background

简写属性：background:background-color|background-image|background-repeat|background-position

以空格隔开，书写顺序没有要求

处理溢出文本

单行文字溢出处理

  • text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
  • white-space：设置文字在一行显示，不能换行
  • overflow：文字长度超出限定宽度，则隐藏超出的内容

overflow设为hidden，普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略

white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础

text-overflow属性值有如下：

  • clip：当对象内文本溢出部分裁切掉
  • ellipsis：当对象内文本溢出时显示省略标记（...）

text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的

.text{
    overflow: hidden;
    width: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

多行文字溢出处理

高度截断 伪元素 + 定位

核心的css代码结构如下：

position: relative：为伪元素绝对定位 overflow: hidden：文本溢出限定的宽度就隐藏内容） position: absolute：给省略号绝对定位 line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数 height: 40px：设定当前元素高度 ::after {} ：设置省略号样式

p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
<style>
    .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

简单动画

D7E8FA7448A35C3EEF60B319E7A0B7D6.png

css2D转换

(1)translate()  设置元素的移动；

①transform:translate(100px,200px);    

②transform:translateX(100px);

   transform:translateY(200px);

表示把元素沿x轴移动100px，沿y轴移动200px；

（单位为像素px；）

（2）rotate()  设置元素的旋转；

transform:rotate(90deg); 

(可以设置旋转的中心点 transform:rotateX(deg);transform:rotateY(deg);)

表示把元素（沿x轴/y轴）旋转90度；

（单位为deg<度>；顺时针旋转为正值，逆时针旋转为负值；）

（3）scale()  设置元素的缩放倍数；

transform:scale(3,2);  表示把元素的宽度放大为原来的3倍，长度放大为原来的2倍；

（没有单位；若只有一个数值，则认为将宽度与长度等比例放大与缩小；）

（4）transform的综合写法：

transform:translate() rotate() scale();

(各属性之间用空格隔开，一般位移要写在最前面；）

语法

@keyframes动画名称 
{
 0% {width: 100px; 
 100% {width: 200px
} 

div {/* 调用动画 */    animation-name: 动画名称;/* 持续时间 */animation-duration: 持续时间；}

动画序列

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数用百分比来规定变化发生的时间，或用from和to，等同于 0% 和 100%

代码演示


<style>
div 
{width: 100px;height: 100px;background-color: aquamarine;animation-name: move;animation-duration: 0.5s;    }
@keyframesmove
{
0% {transform: translate(0px)
}
100% {transform: translate(500px, 0)}    
}  
</style>

布局元素

(134条消息) 49 综合案例-box布局_hello_sunny123的博客-CSDN博客_综合案例box布局

margin

属性

margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性. 该接受任何长度单位，可以是像素、英寸、毫米或 em。 margin 可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

属性描述
margin简写属性。在一个声明中设置所有外边距属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。

(134条消息) CSS中margin属性详解_我是楠楠的博客-CSDN博客_css margin

padding

padding（填充）

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。 值
| 说明 | | -------- | ----------------------- | | length | 定义一个固定的填充(像素, pt, em,等) | | % | 使用百分比值定义一个填充

(134条消息) CSS padding（填充）_m0_67633378的博客-CSDN博客_css 往自己的区域padding

border属性

45BFD0B87A0D8F3EF158FA2680F71AA1.png

实现导航栏

45BFD0B87A0D8F3EF158FA2680F71AA1.png

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        ul {
            overflow: auto;
            /* overflow: hidden; */
            background-color: #333;
        }
        ul li {
            float: left;
        }
        ul li a {
            display: inline-block;
            padding: 16px;
            color: #fff;
            text-decoration: none;
        }
        ul li a:hover:not(.active) {
            background-color: #111;
        }
        .active {
            background-color: #4CAF50;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="###" class="active">Home</a></li>
        <li><a href="###">News</a></li>
        <li><a href="###">Contact</a></li>
        <li><a href="###">About</a></li>
    </ul>
</body>
</html>

0876b02be2ba42318527ad2be286ec7b.png

loading动画

参考
设置100px宽高的div，再设置成圆形border-[radius]：50%； 设置border一定宽度和颜色，再设置border-left为同样宽度和另一种颜色； 设置animation动画，让div旋转起来就可以；通过from和to设置旋转角度即可

代码示例

<!DOCTYPE html>
<html>
<head>
    <title>css实现加载中loading动画效果</title>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
        }
        .loading {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 15px solid #BEBEBE;
            border-left: 15px solid orange;
            animation: loading 1s linear infinite;
        }
 
        @keyframes loading {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
 
<body>
    <div class="loading"></div>
</body>
 
</html>

CSS盒模型

2E78CE9DD19370D468934BE03D6FDD7A.png CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

  • padding：即内边距，围绕着内容（比如段落）的空间。
  • border：即边框，紧接着内边距的线。
  • margin：即外边距，围绕元素外部的空间。
  • width ：元素的宽度
  • background-color ：元素内容和内边距底下的颜色
  • color ：元素内容（通常是文本）的颜色
  • text-shadow ：为元素内的文本设置阴影
  • display ：设置元素的显示模式（暂略）

更改页面颜色

html {
  background-color: #00539F;
}

文档体格式设置

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

现在是 <body>元素。以上条声明，我们来逐条查看：

  • width: 600px; —— 强制页面永远保持 600 像素宽。
  • margin: 0 auto; —— 为 margin 或 padding 等属性设置两个值时，第一个值代表元素的上方和下方（在这个例子中设置为 0），而第二个值代表左边和右边（在这里，auto 是一个特殊的值，意思是水平方向上左右对称）。你也可以使用一个，三个或四个值，参考 这里 。
  • background-color: #FF9500; —— 如前文所述，指定元素的背景颜色。我们给 body 用了一种略微偏红的橘色以与深蓝色的 <html> 元素形成反差，你也可以尝试其它颜色。
  • padding: 0 20px 20px 20px; —— 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为 20 像素。值以上、右、下、左的顺序排列。
  • border: 5px solid black; —— 直接为 body 设置 5 像素的黑色实线边框。

定位页面主标题并添加样式

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

你可能发现页面的顶部有一个难看的间隙，那是因为浏览器会在没有任何 CSS 的情况下 给 <h1> (en-US) 等元素设置一些默认样式。但这并不是个好主意，因为我们希望一个没有任何样式的网页也有基本的可读性。为了去掉那个间隙，我们通过设置 margin: 0; 来覆盖默认样式。

至此，我们已经把标题的上下内边距设置为 20 像素，并且将标题文本与 HTML 的背景颜色设为一致。

需要注意的是，这里使用了一个 text-shadow 属性，它可以为元素中的文本提供阴影。四个值含义如下：

  • 第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
  • 第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
  • 第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
  • 第四个值设置阴影的基色。

不妨尝试不同的值看看能得出什么结果。

图像居中

img {
  display: block;
  margin: 0 auto;
}

最后，我们把图像居中来使页面更美观。可以复用 body 的 margin: 0 auto ，但是需要一点点调整。 <body> 元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是内联元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。

参考

CSS入门学习笔记+案例_是叽叽呀的博客-CSDN博客

CSS 基础 - 学习 Web 开发 | MDN (mozilla.org)

avatar
文章
阅读
粉丝