目录

div和span

  • div 就是一个标签. 是一个容器, 块级元素, div内部可以放任何标签(body,html等不行)
  • span就是一个标签. 是一个文本容器, 行内元素, span标签中只能嵌套文本/图片/超链接

CSS

  • 层叠样式表
    层叠: 样式层层叠加 eg:刷墙
    样式表: 样式的集合

学习html就是学习标签, 学习CSS主要学习样式(属性),选择器

CSS的作用

  • 美化页面,修饰页面
  • HTML负责内容(hello),CSS负责样式(颜色,字体大小…)
<font color="red" size="7">hello</font>
  • html当做毛坯房, CSS当做装修

为什么要学习CSS

  • 通过标签来修改样式的缺点:
    1. 需要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有效果
    2. 当需求变更时我们需要修改大量的代码才能满足现有的需求
  • 通过CSS来修改样式的好处:
    1. 不用记忆哪些属性属于哪个标签
    2. 当需求变更时我们不需要修改大量的代码就可以满足需求
CSS语法
{
	属性:属性值 属性值;
	属性:属性值 属性值
}
  • 属性和属性值用 : 连接
  • 如果有多个属性值用空格隔开
  • 如果有多个属性,属性和属性之间用;隔开 最后一个;可以不写

CSS引入方式

  • HTML是一种语言；CSS也是一种语言。如果想要CSS能够修饰HTML的样式，就必须把CSS引入到HTML中。即：要解决 把CSS代码写在什么地方 的问题

三种引入方式

  • 引入的方式有：
    内联样式：把CSS代码内嵌到HTML代码里,通过标签的style属性来结合
    内部样式：把CSS代码写在HTML文档内部,通过style标签来结合
    外部样式：把CSS代码写在独立的CSS文件里,通过link标签结合
  1. 通过标签的style属性来结合
<!--通过style属性-->
<p style="属性名称:属性值;..."></p>
  1. 通过style标签来结合
<head>
<style type="text/css">
      标签名称{
          属性名称: 属性对应的值;
         
      }
</style>
</head>

注意点:
1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
2.style标签中的type属性其实可以不用写, 默认就是type=“text/css”
3.设置样式时必须按照固定的格式来设置. key: value; 其中 : 不能省略, 分号大多数情况下也不能省略

  1. 通过link标签结合
    创建一个css文件(后缀是css)
    通过link标签引入
<head>
    <link rel="stylesheet" href="../../css/myCss.css" />
</head>

​link标签属性:

  • href : css文件路径

  • rel各个属性值配置的意思：
    Alternate – 定义交替出现的链接
    Stylesheet – 定义一个外部加载的样式表
    Start – 通知搜索引擎,文档的开始
    Next – 记录文档的下一页.(浏览器可以提前加载此页)
    Prev – 记录文档的上一页.(定义浏览器的后退键)
    Contents
    Index – 当前文档的索引
    Glossary – 词汇
    Copyright – 当前文档的版权
    Chapter – 当前文档的章节
    Section – 作为文档的一部分
    Subsection – 作为文档的一小部分
    Appendix – 定义文档的附加信息
    Help – 链接帮助信息
    Bookmark – 书签

所以说，我们用这样的方式，引入外部的css文件时，一定不能忘记rel属性的配置。

三种结合方式优先级

  • 就近原则(相对于代码,也就是要修饰的标签)

选择器

基本选择器语法

选择器描述语法示例
标签选择器根据HTML标签名称选择标签标签名称{}div{ color:red; }
ID选择器根据id属性值选择标签#id值{}#d1 { color:blue; }
类选择器根据class属性值（类名）选择标签.类名{}.c1 { color:yellow; }
通用选择器选取所有标签*{}*{ color: pink;}

优先级

选择器优先级

  • ID选择器 > 类选择器 > 标签选择器 > 通用选择器
  • 如果优先级相同，那么就满足就近原则

组合选择器

  • 多个基本选择器的组合，可以更灵活的选取标签
选择器描述语法示例
层级选择器根据HTML标签名称选择标签祖先 后代div a{ }
属性选择器根据指定属性的值筛选元素[属性=‘值’]input[type=‘text’] { }
并集选择器多个选择器的结果进行合并选择器1,选择器2,….c1, span { }

伪类选择器

  • 了解几个超链接相关的伪类选择器
选择器描述示例
:link选择正常状态的超链接a:link{}
:visited选择被访问过的超链接a:visited{}
:hover选择鼠标悬停的超链接a:hover{}
:active选择鼠标按下的超链接a:active{}

案例：鼠标悬停，div里面的字体变色

	<head>
		<meta charset="utf-8">
		<title>鼠标悬停，div里面的字体变色</title>
		<style>
			.a_div{
				width:200px;
			}
			.a_div:hover{
				background-color: #FF4C4C;
			}
			
			.a_div:hover ，.a_btn{
				color:#ffffff;
			}
		</style>
	</head>
	<body>
		<div class="a_div">
			<a href="#" class="a_btn">看我变色</a>
		</div>
	</body>

鼠标悬停前
鼠标悬停前
鼠标悬停后
鼠标悬停后

CSS常用属性

背景属性

介绍

功能属性名属性取值
背景色background-color1. 颜色常量，如：red 2. 使用十六进制，如：#ABC 3. 红绿蓝 使用 rgb(红,绿,蓝)
背景图片background-imageurl(图片的路径)
平铺方式background-repeatrepeat 默认。背景图像将在垂直方向和水平方向重复 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像 将在垂直方向重复。
背景位置background-positionleft top
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性-背景</title>
    <style>
        /*设置整个页面的背景样式*/
        body{
            /*背景图片*/
            background-image: url("img/little_mm.jpg");
            /*平铺方式*/
            background-repeat: repeat;
        }
    </style>
</head>
<body>

    <div>页面内容</div>

</body>
</html>

文本样式

介绍

功能属性名属性取值
颜色color颜色
设置行高line-height像素
文字修饰text-decorationunderline 下划线 overline 上划线 ine-through 删除线 none 不要线条
文本缩进text-indent用于缩进文本，可以使用em单位。
文本对齐text-align left把文本排列到左边。 right 把文本排列到右边。 center 把文本排列到中间。默认值：由浏览器决定。

字体属性

介绍

功能属性名作用
字体名font-family设置字体，本机必须要有这种字体
设置大小font-size像素
设置样式font-styleitalic 斜体normal 默认值。浏览器显示一个标准的字体样式。
设置粗细font-weightbolder加粗
<style>
        span{
            /*字体：幼圆*/
            font-family: 幼圆;
            /*大小：40px*/
            font-size: 40px;
            /*字体：斜体*/
            font-style: italic;
            /*加粗显示*/
            font-weight: bolder;
        }
    </style>

CSS列表
list-style-image

display样式

display:block;
    inline
    inline_block
    none

block 设置为块标签
inline 设置为行标签
inline-block 设置为行级块标签
none 隐藏标签

.title{
	display: inline-block;
	border-bottom: 3px solid #FF4C4C;
}

透明效果

opacity（定义透明度）

opacity:0;

规定不透明度：从0.0（完全透明）到1.0（完全不透明）

# css # 前端
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生