Web前端-CSS语言

最新推荐文章于 2024-09-15 22:07:21 发布

20181107（刘*龙）

最新推荐文章于 2024-09-15 22:07:21 发布

阅读量213

点赞数 3

文章标签： css 定位 html

本文链接：https://blog.csdn.net/qq_23998145/article/details/109407570

版权

CSS语言

1.CSS语言是什么？

CSS是CascadingStyle sheet的缩写。译作”层叠样式表单“。适用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记语言

2.HTML与CSS的关系？

html是网页的内容，而css定义页面的样式。

3.基本语法

a.行内样式表

行内样式表（内联样式，行间样式，内嵌样式。）：通过标签的style属性来设计元素样式。在标签中写，并且在一行内。

举例：<p style="color:red;font-size:30px;font-family:隶书"> 在style中有color（字体颜色），font-size（字体大小），font-family （字体形式）等属性。

b.内嵌样式表

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

举例：

<head>
		<meta charset="utf-8" />
		<title></title> 
		<!--内嵌表从这里开始,style type="text/css"是声明格式为样式表 -->
		<style type="text/css">
		<!-- p{}为选择器，功能是为所有p标签赋予p{}中的属性。-->
		   p{
			  color: red; 
			  font-size: 20px; 
		   }
		</style>
	</head>

内嵌样式表通常和选择器一起使用，选择器将在下文讲解。

c.外部样式表

外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。看起来较为美观。

举例：

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入名为out.css外部样式表文件  rel声明格式为样式表-->
		<link href="css/out.css" rel="stylesheet" />
	</head>

d.选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。通常与内部样式表一起搭配使用。

常用选择器：

1.标签选择器：通过标签选择器可以选择页面中的所有指定标签。

使用方式：标签名{}

2.类选择器：通过标签的class属性值选中一组标签。

使用方式：.class{}

3.id 选择器：通过标签的id属性值选中唯一的一个标签。

使用方式：#id:{}

4.选择器组合：通过选择器分组可以同时选中多个选择器对应的标签。

使用方式：.选择器1,.选择器2,.选择器N{}

5.通配选择器:可以用来选中页面中的所有的标签。

使用方式：*{}

Ⅰ.后代选择器：选中指定标签的指定后代标签。

使用方式：祖先标签后代标签{}

Ⅱ.子标签选择器：选中指定父标签的指定子标签。

使用方式：父标签 > 子标签 {}

Ⅲ.相邻标签：选中指定标签的相邻标签。

使用方式：选择相邻选择器：选择器 + 相邻{}

Ⅳ.兄弟选择器：选中指定标签的兄弟标签。

使用方式：选择器 ~ 兄弟{}

父标签：直接包含子标签的标签
子标签：直接被父标签包含的标签
祖先标签：直接或间接包含后代标签的标签，父标签也是祖先标签
后代标签：直接或间接被祖先标签包含的标签，子标签也是后代标签
兄弟标签：拥有相同父标签的标签叫做兄弟标签

注：在CSS中，祖先标签上的样式，也会被他的后代标签所继承, 利用继承，可以将一些基本的样式设置给祖先标签，这样所有的后代标签将会自动继承这些样式。

e.样式表的基本属性

文本：

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用来设置首行缩进

背景：

background-color背景颜色
background-image背景图片：
background-repeat背景重复
background-size背景尺寸
background- position 背景位置

f.列表的基本属性

列表属性可以改变列表项标志(图标)，或者将图像作为列表项标志(图标) 。

1.list-style-image 将图象设置为列表项标志(图标)。
2.list-style-position 设置列表中列表项标志(图标)的位置。
3.list-style-type 设置列表项标志(图标)的类型。

list-style 可以简写。例如：<list-style imgae="";position="";type="">

g.伪类

CSS伪类专门用来表示标签的一种特殊状态，例如：未访问过的标签。当我们需要为标签设置样式时，就可以使用伪类。

1.普通的链接（未访问过）(超链接专属)：

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
	.a1:link{
				/*语句*/
			}
	</style>
</head>
<body>
	<div><a class="a1" href="">百度</a></div>
</body>

在link中可以写一些属性，例如：<font>或者<color>属性来表示超链接未被访问时的状态。

2.访问过的链接(超链接专属)：

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
	.a1:visited{
					/* 语句 */
				}
		</style>
</head>
<body>
	<div><a class="a1" href="">百度</a></div> 	
</body>

在visited中可以写一些属性，用来表示超链接访问后的状态。

3.停留状态：

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
	.a1:hover{
				/* 语句 */
			}
	</style>
</head>
<body>
	<div><a class="a1" href="">百度</a></div> 	
</body>

在hover中的属性就是当鼠标停留在标签上的时候的状态。

4.点击状态：

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
    .a1:active{
					/* 语句 */
			}
	</style>
</head>
<body>
	<div><a class="a1" href="">百度</a></div> 	
</body>

active中的属性就是当标签被点击时的状态。

5.聚焦状态（表单专属）：

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
	.a1:focus{
				background-color: red;
			}
	</style>
</head>
<body>
	<div><input class="a1" type=""/></div> 	
</body>

focus中的属性就是鼠标点击在表单中时的状态。

注意：visited放在hover之前
active 必须被置于hover 之后，才是有效的
hover和active也可以为其他标签设置

h.透明

定义透明效果的属性是 opacity。
opacity 属性设置标签的不透明度。
从 0.0 （完全透明）到 1.0（完全不透明）。

<style type="text/css">
	.标签名{
			opacity:（0-1） ;
		}
</style>

4.行级，块级，行级块

块级标签：无论内容多少都会独自占据一行。

行级标签：只占自身大小的标签，不会占一行。

行级块：在一行中只占用一块。

注意：一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签；

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

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

a.Display

用display样式可以修改标签的类型。

block ：设置标签为块标签
inline ：设置标签为行级标签
inline-block ：设置标签为行级块标签
none ：隐藏标签（标签将在页面中完全消失）

5.div和span

a.div标签

div是块级标签，可以放置任何标签。div是最纯净的块级标签，没有任何附加属性。

b.span标签

span是行级标签，可以放置任何标签。span是最纯净的行级标签，没有任何附加属性。

6.盒子模型

CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里。
如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

盒子模型一般分为：边框内边距外边距内容区

a.内容区

内容区就是平时我们写在标签中的内容。

子标签也在内容区中。

如果没有为标签设置内边距和边框，则内容区大小和盒子默认大小一致。

通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。
width和height属性只适用于块标签(包含行级块)。

b.内边距

内边距就是内容区和边框之间的距离。

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

用法：padding-left:10px;

padding-right:10px;

padding:10px 20px 30px 40px;/上右下左/

c.边框

边框是标签外可以看到的最外部。

可以用border属性来设置盒子的边框：border:1px red solid;

也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。

边框的样式： 1.dotted(点线)

2.dashed(虚线)

3.solid(实线)

4.double(双线)

5.groove(槽线)

6.radius(圆角)

d.外边距

外边距是标签边框和相邻的标签的间距。

margin-top/right/bottom/left。(可为负值)

margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等.

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

7.清除浏览器的默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

*{
margin: 0;
padding: 0;
}

8.文档流

文档流指的是文档中的标签在排列时所占用的位置。将窗口自上而下分成许多行，并在每行中按从左至右的顺序排放标签，即为文档流。
也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。
这样一来每一个块标签都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。

9.浮动

浮动就是让标签脱离原来的文档流，去到“二楼’’

用法:

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
	.a1{
			float: left;
		}
	</style>
</head>
<body>
	<div>text</div> 	
</body>