CSS

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

什么是 CSS?

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

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

选择器通常是需要改变样式的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>

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>

也可以指定特定的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>

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

样式表

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

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

外部样式表

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

每个页面使用标签链接到样式表。标签在（文档的）头部：

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

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

内部样式表

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

内联样式

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

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

多重样式

多重样式的优先级:

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

一般情况下,优先级:内联样式）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>

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>

background-repeat

值:

repeat-x(水平方向平铺)
repeat-y(垂直方向平铺)
no-repeat(不平铺)
等

background-position

<!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>

background-attachment

background-size

改变背景图片大小;

对于文本的一些设置标签

文本对齐方式

text-align:

文本修饰

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

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

对于text-decoration-style:

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

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

文本转换

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

text-transform:

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

文本缩进

color

设置文本颜色;

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

文字方向

direction

div{
   
direction: rtl;
}

<div >我是谁</div>
<br><span>my name</span>

字符间距

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

div{
   
letter-spacing:2px;
}

<div>11111111111111111111111</div>

line-height:

行高;

text-shadow

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


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

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字体调整

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

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

font-family

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

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

如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。

font-size

设置字体大小

font-weight

指定字体的粗细;

范围:100-900;

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

对table标签设置边框

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

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

对td设置边框:

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

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

对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>

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>

在这属性中可以使用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>

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;
}

css列表

作用

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

在 HTML中，有两种类型的列表：

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

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

list-style-type:

<!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>

所有的CSS列表属性

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

css表格

表格边框

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

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

请注意，在上面的例子中的表格有双边框。这是因为表和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>

表格宽度和高度

height:

width:

可以用百分比

表格文字对齐方式

text-align水平对齐

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

垂直对齐

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>

表格的标题位置

caption-side:

  <caption>woshishei</caption>

    caption{caption-side:bottom;}

盒子名称

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

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

css边框

设置思维:

边框样式

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

边框宽度

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;
 }

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;
}

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

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(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用


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;
}

CSSmargin(外边距)

margin

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

*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>

margin简写属性

css–padding(内边距)

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>

嵌套选择器

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

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>

display:none可以隐藏某个元素,并且隐藏的元素不会占用空间.

.one{
    display: none;
}

    <div>庐阳</div>
    <div class ="one">庐阳</div>
    <div>庐阳</div>

display:块和内联元素

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

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

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

span{
    display:block;
}

<span>112313</span>
<span>112313</span>
<span>112313</span>

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>

relative:

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

相对与正常位置的移动;

.one{

    position:relative;
    top:50px;
 
}

<span class ="one">112313</span>
<span>112313</span>
<span>112313</span>

absolute定位

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

.one{

    position:absolute;
    top:50px;
 
}

<div>hello1
//此处相当于父类的移动
    <div class="one">
        hello2
    </div>
</div>

sticky定位

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

基于用户的滚动位置定位

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

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

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

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

此处不好解释,测试地址

参考资料1

z-index

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

不好解释,测试地址

clip

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

<!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>

cursor

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

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

cursor的属性值:

此处不好解释,测试连接

overflow

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

测试链接

所有的css定位属性

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

属性	说明	值	CSS
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。	auto length % inherit	2
clip	剪辑一个绝对定位的元素	shape auto inherit	2
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 help	2
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。	auto length % inherit	2
overflow	设置当元素的内容溢出其区域时发生的事情。	auto hidden scroll visible inherit	2
overflow-y	指定如何处理顶部/底部边缘的内容溢出元素的内容区域	auto hidden scroll visible no-display no-content	2
overflow-x	指定如何处理右边/左边边缘的内容溢出元素的内容区域	auto hidden scroll visible no-display no-content	2
position	指定元素的定位类型	absolute fixed relative static inherit	2
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。	auto length % inherit	2
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。	auto length % inherit	2
z-index	设置元素的堆叠顺序	number auto inherit	2

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>

清除浮动-clear

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

<!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>

CSS 中所有的浮动属性

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

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

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>

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

如果是文字,可以使用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>

在设置float属性的时候,一定要设置一个clear属性,否则就算不上是简简单单的对齐了.看下图

垂直对齐

垂直居中对齐-使用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>

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

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>

对其结果分析: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>

结果解析: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>

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

后续兄弟选择器(~)

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

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

    <div>hello</div>
    <span>hello</span><br>
    <span>hello</span>

解析:两个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类

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>

匹配所有特定元素中的第一个特定元素

    <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>

:checked选择器

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

 <style>
     input:checked{
         width:50px;
         height:50px;
     }
 </style>

    <input type="radio"  checked>male
    <input type="radio" >female

: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>

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

所有CSS伪类/元素

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p: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-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个元素的第一个字母
:first-line	p:first-line	选择每个元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
:before	p:before	在每个元素之前插入内容
:after	p:after	在每个元素之后插入内容
:lang(language)	p:lang(it)	为元素的lang属性选择一个开始值

CSS伪元素

:first-line伪元素

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

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

 <style>
p:first-line{
    color:rgb(0, 132, 247);
}
     
 </style>

<p>洛阳处处是月明<br>
    洛阳处处是月明
</p>

first-letter

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

只能用于块级元素;

 <style>
p:first-letter{
    color:rgb(0, 132, 247);
   font-size:larger;
}
     
 </style>

<p>洛阳处处是月明<br>
    洛阳处处是月明
</p>

伪元素和css类

多个伪元素可结合

 <style>
p:first-letter{
    color:rgb(0, 132, 247);
   font-size:xx-large;
}
     p:first-line{
        color:red;
     }
 </style>

<p>洛阳处处是月明
</p>

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>

更加详细的创作步骤

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

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

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创建一个鼠标移动上去之后显示下拉菜单的结果;

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

    <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>

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

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

,使得".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>

其他的部分

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

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>

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