前端--css

一.CSS概述

CSS是Cascading Style Sheets级联样式表.

CSS是一种样式表语言,用于HTML文档控制外观,定义布局.例如CSS涉及字体,颜色,边距,高度,宽度,背景图像,高级定位等方面.

可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于表现形式的CSS在一个.css文件中或HTML文档的某一部分.

我们在实际写前端代码的时候,几乎都是使用HTML来确定网页的框架,使用CSS来对标签进行修饰.

二.基本语法

css修饰的几种方式

使用CSS修饰有三种方式:行内样式表,内嵌样式表,外部样式表

行内样式表:又称内联样式,行间样式,内嵌样式.**是通过标签的style属性来设置元素的样式,**其基本语法是:

<标签名 style=“属性1:属性值1;属性2:属性值2;”>内容 </标签名>

<a href="" style="color: red; font-size: 20px;">百度</a>

内嵌样式表:内嵌式是将CSS代码集中写在HTML文档的头部head标签中并且用style标签定义.

<style type="text/css">
			 /* css注释   此标签内写的都是css语法*/
			    .a1{ color: green; font-size: 30px;}
				.a2{ color: red; font-size: 20px;}
			</style>

外部样式表:外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中.

我们先将样式封装在一个.css文件中

.a1{ color: green; font-size: 30px;}
.a2{ color: red; font-size: 20px;}

其次在我们的html文件中使用link标签导入这个文件即可

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

我们将这几种方式简单对比一下

使用行内样式表**书写方便,权重高.没有实现样式和结构的分离.**使用情况比较少,只能控制一个标签.

使用内部样式表**实现部分结构和样式分离,但是又没有彻底分离.**这种我们在平时练习的时候使用比较多,能控制一个页面.

使用外部样式表**完全实现样式和结构的分离,但是需要引入.**在实际前端开发的情况中,我们使用的都是这个方式.可以控制整个站点.

选择器

要使用CSS对HTML页面中的标签实现一对一,一对多的控制,这就需要用到CSS选择器.

常用的选择器有:标签选择器,类选择器,id选择器,选择器组合,通配选择器.

标签选择器:通过标签选择器可以选择页面中的所有指定标签.
语法:标签名{}

类选择器:通过标签的class属性选中一组标签
语法:.class属性值{}

id选择器:通过标签id属性选中唯一的一个标签
语法:#id属性值{}

选择器组合:通过选择器分组可以同时选中多个选择器对应的标签
语法:选择器1,选择器2{}

通配选择器:可以用来选中页面中的所有的标签
语法:*{}

            p{
				color:#FF0000 ;
			}
			
			.p1{
				color: #008000;
			}
			.p2{
				color: yellow;
			}
			
			#p0{
				color: blue;
			}
			
			*{
				color: aqua;
				font-size: 30px;
			} 
			
			/* 选择器组合, 可以将公共的样式写进来 */
			p,.p1,#p0,h1{
				font-size: 20px;
			}

文本

使用css可以对文本内容进行设置

color:字体颜色

font-size:字体大小

font-family:字体

text-align:文本对齐方式

text-decoration:line-through:定义穿过文本的一条线

text-decoration:underline:定义文本下的一条线

text-decoration:none:定义标准的文本(可以去掉超链接的下划线)

font-style:italic:斜体文字

font-weight:字体粗细

line-height:行高

letter-spacing:可以指定字符间距

text-indent:设置首行缩进

           p{
				/* px 像素单位  css中必须加单位*/
				color: #008000;
				font-size: 20px;
				/* text-align: center;  文本内容对齐方式   */
				font-family: 楷体;
				font-weight: bold;
				/* text-decoration: underline;  下划线*/
				/* text-decoration: line-through;  删除线*/
				font-style: italic;/* 斜体 */
				line-height: 50px;/* 行高 */
				/* letter-spacing: 10px; */
				text-indent: 2em; /* em表示当前一个文本中一个文字尺寸大小*/
			}
			
			a{
				text-decoration: none;/* 定义标准文本, 去除了超链接默认的下划线 */
			}

背景

background-color:背景颜色

background-image:背景图片

background-repeat:背景重复

background-size:背景尺寸

background-position :背景位置

			p{
				width: 800px;
				height: 600px;
				background-color: #00FFFF;
				background-image: url(img/异常体系.png); /* 背景图片优先级高*/
				/* background-size: 800px 600px; */
				background-repeat: no-repeat;/* 背景不重复 */
				  background-position: center;  
				/* background-position: left bottom; */
			}

列表

css列表属性可以放置,改变列表项标志,或者将图像作为列表项标志.

list-style-image:将图象设置为列表项标志

list-style-position:设置列表中列表项的位置

list-style-type:设置列表项标志的类型

list-style:可以简写属性

			li{
			   text-align: center;
			 /*  list-style-type: none;	
			   list-style-image:url(img/img.jpg) ;
			   list-style-position: inside;   */
			   /* 简写方式 值的顺序没有要求   位置  样式  图片*/
			   list-style:  inside url(img/异常体系.png) none ;
			   
			}

伪类

css伪类专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状态的标签设置样式时,就可以使用伪类.

伪类的语法:

:hover伪类表示鼠标移入的状态

:active伪类表示的是被点击的状态

:focus伪类表示向拥有键盘键入焦点的标签添加样式

			.in1{
				background-color: #00FFFF;
			}
			.in1:hover{
				background-color: #0000FF;
			}
			.in1:active{
				background-color: #FF0000;
			}
			
			a{
				color: #008000;
			}
			a:hover{
				color: #00FFFF;
			}
			a:active{
				color: #FF0000;
			}
			
			.in2:focus{
				background-color: #00FFFF;
			}

透明

定义透明效果的属性是opacity

opacity属性设置标签的不透明级别值为1

规定不透明度:从0.0(完全透明)到1.0(完全不透明)

            img{
				opacity: 0.5; /* 标签设置透明度  1完全不透明  0完全透明*/
			}

三.块级,行级,行级块标签

块级标签:

无论内容多少,都会独自占据一行的标签.

<p>,<h1>,<ul>,<ol>,<hr/>等都是块级标签

行级标签:

只占自身大小,不会占一行的标签.

<font>,<b>,<i>,<a>等是行级标签

行级块标签:

可以理解为能够设置大小的行级标签

注意:

一般情况下使用块级标签包含行级标签,不会占一行

a标签可以包含任何标签,除去a本身

p标签不可以包含 任何的块标签

Display

通过display样式可以修改标签的类型

可选值:
block:设置标签为块标签

inline:设置标签为行级标签

inline-block :设置标签为行级块标签

none-隐藏标签(标签将在页面中完全消失)

<p style="display: inline;">1234556</p>aaaa
		<a href="" style="display: block;">百度</a>
		<a href="" style="display: none;">搜狗</a><!-- 标签在网页中消失 不占空间 -->
		<a href="" >搜狐</a>

div和span

div标签

div是块级标签,可以放置任何标签

div没有任何附加功能,给了什么属性就可以变成什么样

div主要作用就是用来布局网页

span标签

span是行级标签

span没有任何附加的功能,给什么属性就能变什么样

span标签用来选中文档中的文字(这样就可以为文字设置样式)

<div style="background-color: #008000; width: 300px; height: 200px;">
				 div是一个纯净版的块级标签
		 </div>
		 
		 
		<span style="color: #008000;">是一个纯净版的行级标签</span>
		<span class="s1"> 是一个纯净版的行级标签</span>

四.盒子模型

css处理网页时,他认为每个标签都包含在一个不可见的盒子里.

如果把所有的标签都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.

我们只需要将相应的盒子摆放到网页中响应的位置即可完成网页的布局.

一个盒子我们会分为几个部分:

内容区(content),内边距(padding),边框(border),外边距(margin)

内容区

内容区指的是盒子中放置内容的区域,也就是标签中的文本内容,子标签都是存放在内容区中的.

如果没有为标签设置内间距和边框,则内容区大小默认和盒子大小是一致的.

通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小.

width和height属性只适用于块标签,包块(行级块)

边框

可以在标签周围创建边框,边框是标签可见框的最外部.

可以使用border属性来设置盒子的边框:

border:1px red soild;

上边的样式分别指定了边框的宽度,颜色和样式

也可以使用border-top/left/right/bottom指定某个方向上的边框.

边框是可以设置样式的:

dotted(点线) dashed(虚线) soild(实线) double(双线) groove(槽线)

对边框还可以进行其他方面的修饰:

border-radius:设置四个角为圆角边框,我们还可以设置某个角落的边框为圆角边框border-top-left-radius设置左上角为圆角边框

内边距与外边距

内边距

顾名思义,内边距指的是标签内容区与边框以内的空间.

内边距会影响整个盒子的大小.

使用padding属性来设置标签的内边距

例如:
padding-left:10px;

padding-right:10px;

padding:10px 20px 30px 40px;这样会设置标签的上,右,下,左四个方向的内边距.

外边距

外边距是标签边框与周围标签相距的空间.使用margin属性可以设置外边框.用法padding类似,同样也提供了四个方向.

margin-top/right/bottom/left

与内边距不一样的是外边距的大小可以是负值

margin的值还可以是auto,设置外边距为最大值,当左右外边距设置为auto时值为0,所以水平居中也可以简写为margin:0 auto.

外边距不会影响盒子的整体大小,但是会影响盒子的位置,会影响盒子的实际控制范围.

清除浏览器的默认样式

浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果.所以为很多交钱都设置了一些默认的margin和padding,而它的默认样式,正常情况下我们是不需要使用的.一次你我们往往在编写样式之前需要将浏览器中的默认的margin和padding全部去掉,然后等我们需要设置的时候重新设置就可以了.

*{
  margin:0;
  padding:0
 }

当我们盒子模型认识完毕之后,我们就可以根据div和span来进行网页布局.在以前我们布局简单网页的时候,使用的是之前HTML学习中用到的表格.使用css就可以将网页分为一个一个的块,然后就可以进行布局了.当然我们还差最后一个点就是这些’块’的定位问题.也就是如何将我们的’块’放置到我们想要的位置,

五.文档流

文档流指的是文档中的标签在排列时所占用的位置.将窗体自上而下分成一行行,并在每行中按从左到右的顺序排放标签,这就称之为**文档流.**也就是说在文档流中标签默认会紧贴在上一个标签的右边.如果右边放不下这个标签,就会排放在下一行.这个跟我们javaGUI中的流式布局非常相似.

那么这样说的话,我们想要在文档,流中进行布局就非常麻烦.

六.浮动与定位

浮动

所谓浮动指的是使标签脱离原来的文档流,在父级标签中浮动起来.浮动使用float属性.

可选值:

none:不浮动

left:向左浮动

right:向右浮动

块级标签和行级标签都可以浮动,当一个行级标签浮动之后就会自动变成块级标签.当一个块级标签浮动之后,宽度是默认内容的宽度,所以当漂浮一个块级标签时都会为其指定一个宽度.

当一个标签浮动以后,其下方的标签会上移.

**浮动会使标签完全脱离文档流,**也就是不再在文档中占用位置,标签浮动以后完全脱离文档流,这是不会再影响父级标签的高度,也就是浮动标签不会撑开父标签.

clear属性可以用于清除周围的浮动对标签的影响,其他标签的位置不会发生变化.

可选值:

left:忽略左侧浮动

right:忽略右侧浮动:

both:忽略全部浮动

定位

定位的思想比较简单,它允许你定义的标签相对于其正常位置,或者相对于父标签,另一个标签甚至浏览器窗口本身而出现的位置.

相对定位

相对定位是一个非常容易掌握的概念.相对于它的起点进行移动,移动后原来的位置还被占用.

可以通过position:relative开启相对定位,使用left right top bottom四个属性来设置标签的偏移量.

特点:

当标签的position属性设置为relative时,就开启了标签的相对定位.

1.当开启了标签的相对定位以后,而不设偏移量时,标签不会发生任何变化

2.相对定位是相对于标签在文档流中原来的位置进行定位

3.相对定位的标签不会脱离文档流

绝对定位

绝对定位是不占空间的,运用了绝对定位的标签会脱离原来的文档流,浮动起来,因此视觉上会与 其他的标签重叠.

可以通过position:absolute开启绝对定位.使用left,right,top,bottom四个属性来设置标签的偏移量.

特点:

1.开启绝对定位,会使标签脱离文档流

2.开启绝对定位以后,如果不设置偏移量,则标签的位置不会发生变化

3.绝对定位是相对于离他最近的开启了定位的父级标签进行定位.因此在实际使用中,我们开启子标签的绝对定位都会同时开启父标签的相对定位.

4.绝对定位会使标签提升一个层级

5.绝对定位会改变标签的性质,行级标签变成块标签