CSS基本内容

CSS

  • 阅读本文章需注意,在以下css代码中很有可能会出现"//",但实际上这是不对的,正确应用方法:"/**/“但是因为typora没有注释的快捷键,为了方便才使用”//",理解就可.

什么是 CSS?

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件
  • 多个样式定义可层叠为一个

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

img

选择器通常是需要改变样式的html元素.

每条声明由一个属性和一个值组成.

属性时希望设置的样式属性,每个属性有一个值,属性和值由冒号分开.—>记住,一定是冒号,不是等号.


CSS注释以 /* 开始, 以 */ 结束,


id 和 class 选择器
id选择器

可以为标有特定id的html元素指定特定的样式.

html元素以id属性来设置id选择器,css中id选择器以"#"来定义;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
#luoy{
    /*
    不要忘了#
    */
    text-align:center;
    color:rgb(255, 9, 255);
}
    </style>
</head>
<body>
    <p id="luoy">id1eddfdf</p>
</body>
</html>

image-20210128155716173

  • ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用
class选择器

用于描述一组元素的样式,class选择器有别于id选择器,class可以在多个元素中使用;

class选择器在html中以class属性表示,在css中,类选择器以"."显示.

     <style>
.one{
    text-align:center;
    color:red;
}
    </style>

<p class ="one">id1eddfdf</p>
    <p class ="one">id1eddfdf</p>

image-20210128160525955

也可以指定特定的html元素使用class.

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    span.center{
        //"."的用法
        color:red;
    }
    div.center{
        color:blue;
    }
</style>
</head>
<body>
     


    <span class="center">luoyang</span>
    <div class="center">luoyang</div>
    
    
    
</body>
</html>

image-20210128161316055

  • 类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用

样式表

插入样式表的方法有三种:

  • 外部样式表
  • 内部样式表
  • 内联样式
外部样式表

外部样式表是理想的选择.在使用外部样式表的情况下,可以改变一个文件的外观.

每个页面使用 标签链接到样式表。 标签在(文档的)头部:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

外部样式表可以在任何文本编辑器中进行编辑.而外部样式表中不能包含任何的html标签,样式表是以.css扩展名保存.

内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表.此时便是<style>的使用

内联样式

内联样式要将表现和内容混杂在一起,内联样式会失去很多优势,此方法慎用.

<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式

image-20210128162635277

多重样式的优先级:

样式表允许以多种方式规定样式信息.

一般情况下,优先级:内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

*注意: 如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

!important 规则例外

当!important规则被应用在一个样式生命中时,该声明会覆盖css中任何其他的声明,无论他处在声明列表的哪里.使用 !important 不是一个好习惯,因为它改变了你样式表本来的级联规则,从而使其难以调试。

css背景

css背景属性用于定义html元素的背景.

css属性定义背景效果:

  • background-color:

  • background-image:

  • background-repeat:

  • background-attachment:

  • background-position:

background-color
body{
    background-color:blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
    background
</body>
</html>

image-20210128164051355

CSS中,颜色值通常以以下方式定义:

  • 十六进制 - 如:"#ff0000"
  • RGB - 如:“rgb(255,0,0)”—>也可以使用rgba(a,b,c,d);
  • 颜色名称 - 如:“red”
background-image

描述了元素的背景图像

默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体

body{
   
    background-image:url("图片1.png");
    
    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="1.css" type="text/css">
</head>
<body>
    
</body>
</html>

image-20210128164850676

background-repeat

值:

  • repeat-x(水平方向平铺)
  • repeat-y(垂直方向平铺)
  • no-repeat(不平铺)
background-position

image-20210128170316083

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
body
{
	background-image:url('img_tree.png');
	background-repeat:no-repeat;
	background-position:right;
	margin-right:200px;
}
</style>

</head>

<body>
<h1>Hello World!</h1>
<p>背景图片不重复,设置 position 实例。</p>
<p>背景图片只显示一次,并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>

</html>

image-20210128170402676

background-attachment

image-20210128203808354

background-size

改变背景图片大小;

对于文本的一些设置标签

文本对齐方式

text-align:

image-20210130082254116

image-20210128204610844

文本修饰

text-decoration: 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线:

image-20210128205213890

对于text-decoration-style:

image-20210128205405019

div{
   
    text-decoration:line-through double red; 
}

image-20210128205830742


h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
//还有一个属性是none;

image-20210128204824299

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母;

text-transform:

image-20210128210330704

div{
    text-transform:capitalize;
    /* 每个单词首字母大写; */
}

image-20210128210719749

文本缩进

image-20210128211104862

color

设置文本颜色;

  • 注意:是color而不是text-color(没有此属性);

文字方向

direction

image-20210128211718667

div{
   
direction: rtl;
}
<div >我是谁</div>
<br><span>my name</span>

image-20210128212148914

字符间距

letter-spacing 属性增加或减少字符间的空白,可以使用负值;

div{
   
letter-spacing:2px;
}
<div>11111111111111111111111</div>

image-20210128212359613

line-height:

行高;

image-20210128222656199

text-shadow

image-20210128222920149

image-20210128222827497

h1 {text-shadow:2px 2px 8px #FF0000;}

<h1>Text-shadow with blur effect</h1>

image-20210128223412715

letter-spacing 与 word-spacing:

区别:

letter-spacing是字符间距,Word-spacing是字间距.

letter-spacing在英文设置时,会调整字母与字母的间距;

如果想要设置英文单词之间的间距,可以使用Word-spacing来是实现;

汉字的间隔调整也是用letter-spacing来实现的;

其实Word-spacing就是用来调整空格的距离的;

所有CSS文本属性。

属性描述
color设置文本颜色
direction设置文本方向。
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距

css字体调整

image-20210128225759344

在css中,有两种类型的字体系列名称

  • 通用字体系列:拥有相似外观的字体系统组合
  • 特定字体系列:一个特定的字体系列

image-20210128230015177

font-family

font-family属性设置文本的字体系列;

font-family应该设置几个字体名称作为一种后备机制,如果浏览器不支持第一种,呢么将会尝试下一种.

  • 如果字体系列的名称超过一个字,它必须用引号,如Font Family:“宋体”。
font-size

设置字体大小

font-weight

指定字体的粗细;

image-20210128231050259

范围:100-900;

此处为扩展(利用css设置表格边框)
对table标签设置边框

只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式。

<style> 
.table-a table{border:1px solid #F00} 
/* css注释:只对table标签设置红色边框样式 */ 
</style> 

image-20210129064726984

对td设置边框:
<style> 
.table-b table td{border:1px solid #F00} 
/* css注释:只对table td标签设置红色边框样式 */ 
</style> 

对td设置边框后,中间出现的双边框样式:

image-20210129064856122

对table和td的技巧性设置表格边框

解决办法:对td设置两个边的边框,对table也设置两个边的边框样式;

对td设置左边框和上边框,对table设置右边框和下边框;

<style> 
.table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00} 
.table-c table td{border-left:1px solid #F00;border-top:1px solid #F00} 
/* 
css 注释: 
只对table td设置左与上边框; 
对table设置右与下边框; 
为了便于截图,我们将css 注释说明换行排版 
*/ 
</style> 

image-20210129065218255

css链接

链接的样式,可以用任何css属性(如颜色,字体,背景等);

特别的链接,可以有不同的样式,这取决于他们是什么状态

这四个链接状态时(需要按照顺序才能够看到效果:)

a:link 正常,未访问的链接

a:visited 用户已经访问过的链接

a:hover 当用户放在链接上时

a:active 链接被点击的那一刻

注意:

  • a:hover必须要在a:link和a:visited之后,需要严格按照顺序才能够看到效果
  • a:active必须在a:hover之后;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
<p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

image-20210129085705162

在这属性中可以使用text-decoration,backgroundcolor,

添加不同样式的超链接:

链接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:Georgia, serif;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>将鼠标移至链接上改变样式.</p>

<p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p>
<p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p>
</body>

</html>

image-20210129090129920

a:link,a:visited
/*
","的意思是,这两个都是相同的样式表;
*/
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}
a:hover,a:active
{
	background-color:#7A991A;
}

image-20210129091842178

css列表

作用

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项设置为无序列表
  • 设置列表项标记为图像

在 HTML中,有两种类型的列表:

  • 无序列表 ul - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 ol - 列表项的标记有数字或字母

使用 CSS,可以列出进一步的样式,并可用图像作列表项标记。

list-style-type:

image-20210129092447060

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul.a {list-style-type:circle;}//此处为关键
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

image-20210129092930055

image-20210129093512739

所有的CSS列表属性

属性描述
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图像设置为列表项标志。
list-style-position设置列表中列表项标志的位置。
list-style-type设置列表项标志的类型。

css表格

表格边框

指定表格边框使用border属性;

table,th,td//注意此处;
{
	border:1px solid black;
}

image-20210129094114463请注意,在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

折叠边框

border-collapse属性设置表格的边框是否被折叠成一个但一个边框或隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,tr,td{
border:1px solid red;
padding:50px;
border-collapse:collapse;

        }
    </style>
</head>
<body>
    


    <table>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
    
    
    
    
</body>
</html>

image-20210129100119908

表格宽度和高度

height:

width:

可以用百分比

表格文字对齐方式

text-align水平对齐

td
{
	text-align:right;//还有center,left值;
}

image-20210129101042639

垂直对齐

vertical-align:{bottom, top, middle}

表格颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,th,td{
         
            border:1px solid rgb(68, 216, 134);
            border-collapse: collapse;
            
        }
        td{
            padding-right: 50px;
        
        }
        th{
            background: rgb(68, 216, 134);
            color:white;
            text-align:left;
        }
        .two{
            background-color: rgb(194, 245, 217);
        }
    </style>
</head>
<body>
    <table>
        <tr class="one">
           <th>111</th>
           <th>111</th>
           <th>111</th>
        </tr>

        <tr>
            <td>111</td>
            <td>111</td>
            <td>11</td>
        </tr>

        <tr class="two">
            <td>111</td>
            <td>111</td>
            <td>11</td>
        </tr>

        <tr>
            <td>111</td>
            <td>111</td>
            <td>11</td>
        </tr>

        <tr class="two">
            <td>111</td>
            <td>111</td>
            <td>11</td>
        </tr>

        <tr>
            <td>111</td>
            <td>111</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html>

image-20210129103015401

表格的标题位置

caption-side:

image-20210129103201141

  <caption>woshishei</caption>
    caption{caption-side:bottom;}

image-20210129103333829

盒子名称

image-20210129103745528

  • margin:外边距
  • border:边框
  • padding:内边距
  • content:内容

当设置css的宽度和高度属性时,你只是设置了内容区域的宽度和高度,而完整地大小的元素,哈比需添加内边距,边框和编剧.

css边框

设置思维:

image-20210129105846767

边框样式

border-style属性用来定义边框的样式;

image-20210129105954190

边框宽度

border-width

为边框指定宽度有两种办法

  • 关键字: thick medium thin;(共三个关键字)css中并没有定义三个关键字的具体宽度;
  • 指定长度值,例如:2px;

"border-width" 属性 如果单独使用则不起作用。要先使用 “border-style” 属性来设置边框

边框颜色

border-color

  • name- 指定颜色的名称,如"red";
  • RGB-指定RGB值,如"rgb(1,2,3)";
  • Hex-指定十六进制,如"#112233";

注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。

边框-单独设置各边

border-style属性可以有1-4个值

border-style:dotted solid double dashed;(上右下左)

  • 上边框是 dotted
  • 右边框是 solid
  • 底边框是 double
  • 左边框是 dashed
 div{
     border-style:dashed dotted solid double;
 }

image-20210129111626992

border-style:dotted solid double;

  • 上边框是 dotted
  • 左、右边框是 solid
  • 底边框是 double

border-style:dotted solid;

  • 上、底边框是 dotted
  • 右、左边框是 solid

border-style:dotted;

  • 四面边框是 dotted
边框简写属性

可以在border中设置

  • border-width
  • border-style
  • border-color
div{
    border:1px dotted  red;
}

image-20210129112116455

p 
{
	border-style:solid;
	border-top:thick double #ff0000;
	//此处一定要注意的是,这两个属性不可以颠倒,因为代码是从上到下依次执行的,下边的代码范围广,直接将上边代码覆盖.
}

image-20210129112339446

CSS 边框属性总结
属性描述
border简写属性,用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color设置元素的下边框的颜色。
border-bottom-style设置元素的下边框的样式。
border-bottom-width设置元素的下边框的宽度。
border-left简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color设置元素的左边框的颜色。
border-left-style设置元素的左边框的样式。
border-left-width设置元素的左边框的宽度。
border-right简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color设置元素的右边框的颜色。
border-right-style设置元素的右边框的样式。
border-right-width设置元素的右边框的宽度。
border-top简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color设置元素的上边框的颜色。
border-top-style设置元素的上边框的样式。
border-top-width设置元素的上边框的宽度。

css轮廓

outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用

image-20210129113133433


div{  border:thick;
    border-style:dashed;
 border-left-color:red;
 border-right-color:rgb(32, 31, 31);
 border-top-color:rgb(129, 8, 8);
 border-bottom-color:rgb(245, 158, 158);
outline:10px green double ;
margin-top:30px;
}

image-20210129113356865

CSSmargin(外边距)

margin

margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。

image-20210129113916067

image-20210129113936248

*margin可以使用负值,重叠的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p
{
	background-color:yellow;
}
p.margin//此处需要注意这个".",指的是只有p标签的margin类对此有效,而其他的margin类无效;
{
	margin-top:100px;
	margin-bottom:100px;
	margin-right:50px;
	margin-left:50px;
}
</style>
</head>

<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>

</html>

image-20210129114523585

margin简写属性

image-20210129114622624

css–padding(内边距)

image-20210129114942785

image-20210129115009266

css分组和嵌套选择器

在学此处之前需要将之前的三个选择器学会(id选择器,class选择器,元素选择器);

分组选择器

在样式表中有很多相同样式的元素

如下:

h1
{
    color:green;
}
h2
{
    color:green;
}

为了尽量减少代码,可以使用分组选择器

每个选择器用逗号分开

h1,h2,p
{
	color:green;
}
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

image-20210129115424308

嵌套选择器

下面的例子设置了三个样式:

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class=“marked” 的元素指定一个样式。
  • .marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class=“marked”p 元素指定一个样式。

a.b c{}:就是说所有的a标签中class为b的,而这些class为b的标签中含着的c标签的样式表;

css尺寸(dimension)

所有CSS 尺寸 (Dimension)属性
属性描述
height设置元素的高度。
line-height设置行高。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。

display(显示)和visibility(可见性)

display属性设置一个元素如何显示,visibility属性制定一个元素应可见还是隐藏;

隐藏元素- display:none或者visibility:hidden

隐藏一个元素可以通过把display属性设置为"none";或者将visibility属性设置为"hidden".但是这两种方法会产生不同的结果;

  • visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与之前未隐藏之前一样的空间.也就是说,该元素虽然被隐藏了,但仍然会影响布局.
    <style>
.one{
    visibility: hidden;
}
    </style>
    <div>庐阳</div>
    <div class ="one">庐阳</div>
    <div>庐阳</div>

image-20210130085228962

  • display:none可以隐藏某个元素,并且隐藏的元素不会占用空间.
.one{
    display: none;
}
    <div>庐阳</div>
    <div class ="one">庐阳</div>
    <div>庐阳</div>

image-20210130085424088

display:块和内联元素

块元素是一个元素,占用了全部的宽度,在前后都是换行符(其实就是说块元素单独占一行,无论前后是否有元素,都是如此)

内联元素只需要必要的宽度,不强制换行(只占用需要的宽度)

display:block;(转变成块元素)

span{
    display:block;
}
<span>112313</span>
<span>112313</span>
<span>112313</span>

image-20210130085952722

display:inline;(转变成内联元素)

  • display 属性的值为 "inline"的结果是:两个元素显示在同一水平线上。

css Position(定位)

position属性制定了元素的定位类型

position属性的五个值:

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素可以使用的顶部,底部,左侧,右侧属性定位.然而这些属性无法工作,除非是先设定position属性.

static定位

html元素的默认值,既没有定位,遵循正常的文档流对象

静态定位的元素不会受到top,bottom,left,right的影响;

fixed定位:

(元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。)

元素的位置相对于浏览器窗口是固定位置

即使窗口时滚动的它也不会动;

fixed定位的元素和其他元素是可以重叠的

.one{
    position:fixed;
    top:50px;
    right:40px;
}
<span class ="one">112313</span>
<span>112313</span>
<span>112313</span>

image-20210130091224896

relative:

相对于定位元素的定位是相对其正常位置

相对与正常位置的移动;

.one{

    position:relative;
    top:50px;
 
}
<span class ="one">112313</span>
<span>112313</span>
<span>112313</span>

image-20210130091749888

absolute定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>

.one{

    position:absolute;
    top:50px;
 
}
<div>hello1
//此处相当于父类的移动
    <div class="one">
        hello2
    </div>
</div>

image-20210130093146346

sticky定位

sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位

基于用户的滚动位置定位

粘性定位的元素是依赖于用户的滚动,在position:relative与position:fixed定位之间切换

他的行为像position:relative;而当页面滚动超出目标区域时,它的表现就像position:fixed;他会固定在目标位置.

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位;

这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

此处不好解释,测试地址

参考资料1

z-index
  1. z-index属性设置了一个元素的堆叠顺序(即那个元素应该放在前面那个元素应该放在后面)
  2. 一个元素可以有正数或者负数的堆叠顺序;
  3. 具有更高堆叠顺序的元素总是在较低的堆叠书序元素的前面.
  4. 如果两个定位元素重叠,没有指定z-index,最后定位在html代码中的元素被显示在最前面.

不好解释,测试地址

clip

clip属性,会让一个绝对定位的元素,被剪辑成这种形状并且显示.

image-20210130095518451

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
img 
{
	position:absolute;
	clip:rect(0px,600px,209px,0px);//此处需要注意,上右下左,而且此处px是指保留的尺寸.
}
</style>
</head>

<body>
<img src="图片1.png" width="100" height="140" />
</body>
</html>

image-20210130100343917

cursor

cursor的英文释义:光标,游标,指针;

此属性定义了鼠标指针放在一个元素便捷范围内所使用的光标形状;

cursor的属性值:

image-20210130100655719

此处不好解释,测试连接

overflow

此属性指定,如果内容溢出一个元素的框,会发生什么;

image-20210130102312074

测试链接

所有的css定位属性

“CSS” 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。

属性说明CSS
bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。auto *length % *inherit2
clip剪辑一个绝对定位的元素*shape *auto inherit2
cursor显示光标移动到指定的类型url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help2
left定义了定位元素左外边距边界与其包含块左边界之间的偏移。auto *length % *inherit2
overflow设置当元素的内容溢出其区域时发生的事情。auto hidden scroll visible inherit2
overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域auto hidden scroll visible no-display no-content2
overflow-x指定如何处理右边/左边边缘的内容溢出元素的内容区域auto hidden scroll visible no-display no-content2
position指定元素的定位类型absolute fixed relative static inherit2
right定义了定位元素右外边距边界与其包含块右边界之间的偏移。auto *length % *inherit2
top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。auto *length % *inherit2
z-index设置元素的堆叠顺序*number *auto inherit2

CSS-float(浮动)

float

float会使元素向左或者向右移动,其周围的元素也会重新排列;

float往往用于图像,但它在布局时一样非常有用;

元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动,下面的文本流将环绕在它左边;

如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            float:right;
        }
    </style>
</head>
<body>
    <img src="洛阳2.png" alt="">
    <div>洛阳处处是月明</div>
    <div>洛阳处处是月明</div>
    <div>洛阳处处是月明</div>
    <div>洛阳处处是月明</div>
    <div>洛阳处处是月明</div>
    <div>洛阳处处是月明</div>
    <div>洛阳处处是月明</div>
  
</body>
</html>

image-20210130104833039

清除浮动-clear

元素浮动后,周围的元素会重新排列,为了避免这种情况,使用clear属性;

image-20210130105748639

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            float:left;
           margin-right:20px;
        }
    </style>
</head>
<body>
    <img src="洛阳2.png" alt="">
    <div style="clear:both;">洛阳处处是月明</div>
    <div>洛阳处处是月明</div>
    <div>洛阳处处是月明</div>
    <div>洛阳处处是月明</div>
    <div>洛阳处处是月明</div>
    <div>洛阳处处是月明</div>
    <div>洛阳处处是月明</div>
  
</body>
</html>

image-20210130105704793

CSS 中所有的浮动属性

“CSS” 列中的数字表示不同的 CSS 版本(CSS1 或 CSS2)定义了该属性。

属性描述CSS
clear指定不允许元素周围有浮动元素。left right both none inherit1
float指定一个盒子(元素)是否可以浮动。left right none inherit1

CSS布局-水平&垂直对齐

水平对齐
元素居中对齐

要水平居中对齐一个元素(首先要确保此元素属于块元素,如果不满足可以使用display:block;),可以使用margin:auto;

使用margin:auto的原理:会平分左右两边的外边距,但是前提是要使用width,因为一开始块元素包含一整行;

设置到元素的宽度将放置一处到容器的边缘;

通过指定宽度,将两边的外边距平均分配;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
margin:auto;//注意,此处一定要设置width,否则居中对齐将不起作用;
width:50%;
border:3px dotted red;
padding:10px;
        }
    </style>
</head>
<body>
    <div>ewdsdsdd</div>
</body>
</html>
  • 如果没有设置width宽度,居中对齐不起作用;
文本对齐:

text-align:center;

图片居中对齐

使用margin:auto;并将它放到块元素中;—>此时就和元素居中对齐一样;

左右对齐–使用定位方式

position:absolute;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: absolute;
            right:0px;
        }
    </style>
</head>
<body>
    <div>洛阳处处是月明</div>
</body>
</html>

image-20210130112415835

但是其实,并不只有这一种方法,(思维不要太过局限),

  • 如果是文字,可以使用text-align;direction属性;
左右对齐 - 使用 float
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
div.one{
    float:right;
}   
div{
    clear:both;//此处一定要使用clear;否则就不只是简简单单的设置向右对齐了;
}
    </style>
</head>
<body>
    <div class="one">洛阳处处是月明</div>
    <div>洛阳处处是月明</div>
</body>
</html>

image-20210130112908813

  • 在设置float属性的时候,一定要设置一个clear属性,否则就算不上是简简单单的对齐了.看下图
  • image-20210130113113284
垂直对齐
垂直居中对齐-使用padding
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            padding:50% 0;
        }
    </style>
</head>
<body>
    <div>洛阳处处是月明</div>
</body>
</html>

image-20210130113705009

padding:50% 0 能够居中的原理:(不仅要懂,还要会用)—>同样可以使用此方法将文本放到正中间–>padding :50% 50%;

image-20210129115009266

CSS组合选择符

组合选择器说明了两个选择器直接的关系

css组合选择符包括各种简单选择符的组合方式

在css3中包含了四种组合方式

  • 后代选择器(以空格 分隔)("&nbsp ;")
  • 子元素选择器(以大于> 分隔)("&gt ;")
  • 相邻兄弟选择器(以加号+分隔)
  • 普通兄弟选择器(以波浪线~分隔)
后代选择器(空格)

后代选择器用于选取某元素的后代元素.(就是可以选取子,孙------)

后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

  <style>
        div div{
            background:red;
        }
    </style>
    <div id="one">
        <div id="two">hello
            <div id="three">hello
                <div id="four">hello</div>
            </div>
        </div>
    </div>

image-20210130152521938

对其结果分析:two相对于one是第二个,所以第一个hello背景标红,three相对于two是第二个,背景标红同样的four相对于three是第二个,所以也要标红,它的另一个解释就是:two相对于one是第二个,而three,four同样在two中,所以都要标红;

子元素选择器(>)

子元素选择器只能选择作为某元素子元素的元素

子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。

子元素选择器和后代元素选择器的区别:

    <style>
        div>div{
background:red;
        }
    </style>
    <div id="one">
        <div id="two">hello
            <div id="three">hello
                <div id="four">hello</div>
            </div>
        </div>
    </div>

image-20210130153302259

结果解析:two相对于one是第二个,而three,four同样在two中,所以都要标红,但是****不是因为:

two相对于one是第二个,所以第一个hello背景标红,three相对于two是第二个,背景标红同样的four相对于three是第二个,所以也要标红

子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

相邻兄弟选择器(+)

相邻兄弟选择器可选择紧接在另一个元素之后的元素,且晾着有相同的父元素;

如果需要选择紧接在另一个元素后的元素,而且晾着都有相同的父亲,可以使用相邻兄弟选择器;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div+span{
            background:red;
        }
    </style>
</head>

<body>
    <div>hello</div>
    <span>hello</span><br>
    <span>hello</span>
</body>
</html>

image-20210130154444331

解释:因为第一个span是紧跟在div元素之后的,所以标红,而第二个不是紧跟div的,不标红

后续兄弟选择器(~)

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素;

    <style>
        div~span{
            background:red;
        }
    </style>
    <div>hello</div>
    <span>hello</span><br>
    <span>hello</span>

image-20210130155358307

解析:两个span元素都在div之后,所以都标红

css伪类

是用来添加一些选择器的特殊效果

伪类的用法:

selector:pseudo-class {property:value;}

CSS类也可以使用伪类:

selector.class:pseudo-class {property:value;}

关注点在":"

譬如

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意:关于a的一些注意事项,比如哪一项在哪一项之后,不要忘掉

  • 伪类的名称不区分大小写
伪类和css类

image-20210130160052916

CSS:first-child伪类

可以使用first-cihild伪类来选择父元素的第一个子元素;

匹配第一个元素
 div:first-child{
           background-color:red;
       }
<div>//这是第一个出现的,所以标红
<span>洛阳处处是月明</span>
</div>
<div>
    <span>洛阳处处是月明</span><br>
    <span>洛阳处处是月明</span><br>
    <span>洛阳处处是月明</span><br>
</div>

image-20210130161855685

匹配所有特定元素中的第一个特定元素
    <style>
       div span:first-child{//一般用于这种;或者是div>span这种;
           background-color:red;
       }
    </style>
<div>
<span>洛阳处处是月明</span><br>
<span>洛阳处处是月明</span>
</div>
<div>
    <span>洛阳处处是月明</span><br>
    <span>洛阳处处是月明</span><br>
    <span>洛阳处处是月明</span><br>
</div>

image-20210130162324470

:checked选择器

匹配每个选中的输入元素(仅适用于单选按钮或者复选框)

 <style>
     input:checked{
         width:50px;
         height:50px;
     }
 </style>
    <input type="radio"  checked>male
    <input type="radio" >female

image-20210130163247354

:focus选择器

用于选择获得焦点的元素;

 <style>
input:focus{
    background:red;
}
     
 </style>
<input type="text">name <br>
<input type="password">密码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8VpkewdT-1612225248996)(…/AppData/Roaming/Typora/typora-user-images/image-20210130163759896.png)]

:before选择器

在每个特定元素之前插入某个内容(content);

 <style>
span:before{
    content:"hello,everyone";
}
     
 </style>
 <span>hello,你好</span><br>
<span>hello,你好</span>

image-20210130164959861

:after和:before选择器差不多;

所有CSS伪类/元素
选择器示例示例说明
:checkedinput:checked选择所有选中的表单元素
:disabledinput:disabled选择所有禁用的表单元素
:emptyp:empty选择所有没有子元素的p元素
:enabledinput:enabled选择所有启用的表单元素
:first-of-typep:first-of-type选择的每个 p 元素是其父元素的第一个 p 元素
:in-rangeinput:in-range选择元素指定范围内的值
:invalidinput:invalid选择所有无效的元素
:last-childp:last-child选择所有p元素的最后一个子元素
:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素
:not(selector):not§选择所有p以外的元素
:nth-child(n)p:nth-child(2)选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素
:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素
:only-childp:only-child选择所有仅有一个子元素的p元素
:optionalinput:optional选择没有"required"的元素属性
:out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性
:read-onlyinput:read-only选择只读属性的元素属性
:read-writeinput:read-write选择没有只读属性的元素属性
:requiredinput:required选择有"required"属性指定的元素属性
:rootroot选择文档的根元素
:target#news:target选择当前活动#news元素(点击URL包含锚的名字)
:validinput:valid选择所有有效值的属性
:linka:link选择所有未访问链接
:visiteda:visited选择所有访问过的链接
:activea:active选择正在活动链接
:hovera:hover把鼠标放在链接上的状态
:focusinput:focus选择元素输入后具有焦点
:first-letterp:first-letter选择每个

元素的第一个字母

:first-linep:first-line选择每个

元素的第一行

:first-childp:first-child选择器匹配属于任意元素的第一个子元素的

元素

:beforep:before在每个

元素之前插入内容

:afterp:after在每个

元素之后插入内容

:lang(language)p:lang(it)

元素的lang属性选择一个开始值

CSS伪元素

image-20210130165532897

:first-line伪元素

用于在首行设置特殊样式;

first-line只能够应用于块级元素;

 <style>
p:first-line{
    color:rgb(0, 132, 247);
}
     
 </style>
<p>洛阳处处是月明<br>
    洛阳处处是月明
</p>

image-20210130165753391

first-letter

用于向文本的首字母设置特殊样式;

只能用于块级元素;

 <style>
p:first-letter{
    color:rgb(0, 132, 247);
   font-size:larger;
}
     
 </style>
<p>洛阳处处是月明<br>
    洛阳处处是月明
</p>

image-20210130170305618

伪元素和css类

image-20210130170354061

多个伪元素可结合
 <style>
p:first-letter{
    color:rgb(0, 132, 247);
   font-size:xx-large;
}
     p:first-line{
        color:red;
     }
 </style>
<p>洛阳处处是月明
</p>

image-20210130170748463

CSS导航栏

导航栏=链接列表

作为标准的html基础,一个导航栏是必须的.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
a:link,a:visited
{
	display:block;//此处一定要用,否则对以下很多元素都会失效;让整体变为可点击链接区域(不只是文本),它允许我们指定宽度
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>

image-20210130171858672

更加详细的创作步骤

此链接中有很多其他的导航栏制作方法

注意:在看完此处之后,一定记得要自己写一遍,因为你一定会发现许多技巧;(这些技巧没有办法简单的用言语表述)

  • padding和margin在background-color上的区别:

  • 当已经有背景颜色的时候,margin扩展的是边框之外的距离,所以不会将背景颜色扩大,但是padding扩展的是边框里面,所以会扩大背景颜色的范围;

如果测试过链接中大多数的方法的话,可能会有个疑问:(为了查找的时候容易看到,单设一个主题)

display:inline和display:block

  • inline:(行内元素)
    • 令元素变为行内元素,拥有行内元素的特性,可以与其他行内元素共享一行,而不会单占一行
    • inline元素不能够更改height和width,所占宽度与内容有关,(大小由内容撑开)
    • 可以使用padding上下左右都有效,margin只有left和right产生边距效果,但是top和bottom就不行
  • block(块级元素)
    • 令元素变为块级元素,独占一行
    • 能够改变元素的height和width的值;
    • 可以设置padding和margin的上下左右属性;
  • inline-block
    • 结合了上述inline的第1个特点和block的第2,3个特点.(不单占一行)—>不单占一行的块级元素

借鉴于链接

css下拉菜单

使用CSS创建一个鼠标移动上去之后显示下拉菜单的结果;

image-20210131093622845

image-20210131093641486相对定位元素是相对于原来的位置发生的改变;

    <style>
        .one{
           display:none;
           width:20%;
           background:red;
        }
      .two:hover  .one{
            display:block;;
        }
    </style>
    <div class="two">
        <span style="">此处可点击</span>
      <div class="one">
          <p>hello</p>
          <p>hello</p>
      </div>
    </div>

image-20210131101454024当鼠标放到"此处可点击"的会后会出现下拉框;

简单地说一下原理:因为".one"里CSS代码有display:none;也就是说两个"hello"在正常情况下是不显示的.但是因为鼠标移动到"此处可点击"导致了以下代码的触发,image-20210131101701700

,使得".one"类中的display属性的值变成了block,从而出现,但为什么鼠标移动到了"此处可点击"才会出现,因为".two:hover"中".two"中满足鼠标移动到其中,才会触发以上代码的正确实行;

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

<div class="dropdown">
  <span>鼠标移动到我这!</span>
  <div class="dropdown-content">
    <p>菜鸟教程</p>
    <p>www.runoob.com</p>
  </div>
</div>

</body>
</html>

image-20210131114016089

其他的部分

此处比较容易理解,就不再讲述,

css提示工具

css图片廊

图像透明度/不透明度

此处关键在于透明度的属性

opacity:;

Opacity属性值从0.0 - ----1.0。值越小,使得元素更加透明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            opacity:.5;
        }
        img:hover{//鼠标悬浮之后,会显示全部透明度;
            opacity:1;
        }
    </style>
</head>
<body>
    <img src="1.png" alt="">
</body>
</html>

image-20210201090051504


/www.cnblogs.com/Ry-yuan/p/6848197.html)

css下拉菜单

使用CSS创建一个鼠标移动上去之后显示下拉菜单的结果;

[外链图片转存中…(img-ddAPkGor-1612225249003)]

[外链图片转存中…(img-4vA8HhXd-1612225249003)]相对定位元素是相对于原来的位置发生的改变;

    <style>
        .one{
           display:none;
           width:20%;
           background:red;
        }
      .two:hover  .one{
            display:block;;
        }
    </style>
    <div class="two">
        <span style="">此处可点击</span>
      <div class="one">
          <p>hello</p>
          <p>hello</p>
      </div>
    </div>

[外链图片转存中…(img-zF2rx09N-1612225249005)]当鼠标放到"此处可点击"的会后会出现下拉框;

简单地说一下原理:因为".one"里CSS代码有display:none;也就是说两个"hello"在正常情况下是不显示的.但是因为鼠标移动到"此处可点击"导致了以下代码的触发,[外链图片转存中…(img-WLrKGId7-1612225249006)]

,使得".one"类中的display属性的值变成了block,从而出现,但为什么鼠标移动到了"此处可点击"才会出现,因为".two:hover"中".two"中满足鼠标移动到其中,才会触发以上代码的正确实行;

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

<div class="dropdown">
  <span>鼠标移动到我这!</span>
  <div class="dropdown-content">
    <p>菜鸟教程</p>
    <p>www.runoob.com</p>
  </div>
</div>

</body>
</html>

[外链图片转存中…(img-YLYZvvEh-1612225249006)]

其他的部分

此处比较容易理解,就不再讲述,

css提示工具

css图片廊

图像透明度/不透明度

此处关键在于透明度的属性

opacity:;

Opacity属性值从0.0 - ----1.0。值越小,使得元素更加透明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            opacity:.5;
        }
        img:hover{//鼠标悬浮之后,会显示全部透明度;
            opacity:1;
        }
    </style>
</head>
<body>
    <img src="1.png" alt="">
</body>
</html>

[外链图片转存中…(img-uD6XKvCg-1612225249007)]


不够详细,日后再行补充
以上是对菜鸟教程的一些笔记;

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页