CSS级联样式表(Web前端入门)

Libe2ty

已于 2022-08-23 11:44:00 修改

阅读量1.1k

点赞数

文章标签： html css

于 2020-10-30 20:34:39 首次发布

本文链接：https://blog.csdn.net/Libe2ty/article/details/109392621

版权

本文介绍了CSS（级联样式表）的基础知识，包括CSS与HTML的关系，样式表的三种类型（行间、内联和外部），以及CSS选择器的概念和分类。详细讲述了选择器的优先级和各种选择器的用法，如标签、类和ID选择器。此外，还涵盖了文本修饰、背景图、盒子模型和定位等关键概念，帮助初学者掌握CSS的基本应用。

摘要由CSDN通过智能技术生成

CSS(级联样式表)

CSS概念

Cascading Style Sheets (CSS)是一种样式表语言,定义HTML文件的外观,定义布局.

CSS与HTML的关系

HTML是网页的内容;CSS定义页面的样式.

CSS的三类样式表:

1)行间样式表

概念:在HTMl文档的body标签中.
样板:<标签名称 style=“属性1:属性值1;属性2:属性值2;属性3:属性值3”>

2)内联样式表

概念:在HTML文档的head标签中,用style标签定义.

<!--
    <style> 
		标签名称{属性1:属性值1;属性2:属性值2} 
		body {background-color:yellow;}
		p {color:blue;}
	</style>
-->

3)外部样式表

概念:放在.css为扩展名的文件中,直接用标签定义,后在通过link标签链接到HTML文档中.(使用率最高)

<!--
      标签名称{属性1:属性值1;属性2:属性值2} 
	  <link href="" rel="stylesheet">          (rel=relationship)
-->

CSS选择器

概念:将分离后的样式表与网页内容联系,用于实现对HTML的控制.

分类:

1)标签选择器:

可以选择页面中的所有标签.

2)类选择器:

通过标签的class属性值选中标签
.row0{color:red;}

3)id选择器:

#top{color:blue;}

4)通配选择器:

优先级最低的但是高优先级的只能覆盖相同属性,不能覆盖特有的

*{ }

选择器的优先级(低到高):

通用选择器（*）<元素(类型)选择器<类选择器<属性选择器<伪类<ID 选择器<内联样式

5)选择器的组合:

.row0,.row1{text-align:center}

6)后代选择器:

用于选中指定标签的指定后代标签
语法: 祖先标签后代标签{}

7)子标签选择器:

用于选中指定父标签的指定子标签
语法: 父标签 > 子标签{}

8)相邻标签选择器:

选中指定标签的相邻标签
语法:选择相邻选择器:标签+相邻标签{}

9)兄弟选择器:

选中指定标签的兄弟标签
语法: 选择器~兄弟标签{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.p1{
				color: #008000;
			}
			/* 
		    定位  需要修饰的选择器
			后代选择器   包含儿子 和 孙子
		   .p1 b{
				color: #FF0000;
			} */
			
			/* 
			 子选择器 
			
			.p1>.b1{
				color: #FF0000;
			} */
			
			/* 相邻选择器 */
			/* .p1+p{
				color: #FF0000;
			} */
			
			/* 兄弟选择器 */
			.p1~p{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		
		<p class="p1">
			<b class="b1">p的儿子</b>
			<b>p的儿子</b>
			
			<i>
				<b class="b1">p的孙子</b>
				<b>p的孙子</b>
			</i>
		</p>
		
		<h1>ssssss</h1>
		<p class="p2">
			<b>p的儿子</b>
			<b>p的儿子</b>
		</p>
		<p class="p2">
			<b>p的儿子</b>
			<b>p的儿子</b>
		</p>
	</body>
</html>

标签之间的关系

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

样式的继承

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

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。
不建议使用的标签有: font,center, strike
不建议使用的属性: color 和 bgcolor.

背景图的修饰

background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
background-size 背景尺寸
background- position 背景位置例: background-position: left center;

列表属性

CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志.
list-style-image 将图象设置为列表项标志.
list-style-position 设置列表中列表项标志(图标)的位置. 置列表中列表项标志的位置默认为outside. inside
list-style-type 设置列表项标志的类型.
list-style 简写属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.u1>li{
				/*list-style-type: none;
				list-style-image: url(img/img.jpg);
				list-style-position: outside; inside  outside 控制图标位置*/
				
				list-style: none url(img/img.jpg) inside;
				
			    text-align: center;
			}
		</style>
	</head>
	<body>
		
		<ul class="u1">
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
		</ul>
		<ul>
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
		</ul>
	</body>
</html>

伪类

:link表示普通的链接（没访问过的链接）.
:visited表示访问过的链接,必须放在hover之前.浏览器是通过历史记录来判断一个链接是否访问过,使用visited伪类只能设置字体的颜色 .
:hover伪类表示鼠标移入的状态 .
:active表示的是被点击的状态,必须放在hover之后.
:hover和:active也可以为其他标签设置.
:focus向拥有键盘输入焦点的标签添加样式.

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a:link{  
				color: black;
				font-size: 100px;
			}
			a:visited{
				color: red;
			}
			a:hover{   
				color: brown;
				font-size: 200px;
			}
			a:active{ 
				color: blueviolet;
			}
		   :focus{
			   background-color: purple;
			   color: red;
		   }
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<input type="text" name="" id="" value="" />
	</body>
</html>

透明度 opacity

规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）.可以和伪类连用.

块级,行级,行级块标签

块级标签:无论内容多少都会独自占据一行的.
例如<p>、<h1>、<ul>、<ol>、<hr/>、表格、表单等.

默认宽:与父级的标签一致 ;默认高:0 / 内容的高度 ;可通过width和height设置宽高
行级标签：只占自身大小的标签，不会占一行.
例如<font>、<b>、<i>、<a>等.不能设置宽高.
行级块标签:行级块标签可以设置宽高,不占一行 <input>、 <img>等.

display

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

display: inline; 将标签变为行级标签

display: block; 块级标签

display: inline-block; 行级块标签

display:none 隐藏标签（标签将在页面中完全消失,不占网页空间）

div

div是块级标签,可以放置任何标签.
div没有任何附加功能,给了什么属性就能变成什么样,通过css调整.
div主要的作用是被用来布局网页.

span

span是行级标签
span 没有任何附加功能,给了什么属性就能变成什么样.
span标签被用来选中文档中的文字.

盒子模型

盒子的四个模型: 内容区(content) ;内边距(padding) ;边框(border) ;外边距(margin)

在这里插入图片描述

内容区:

指的是盒子中放置内容的区域.width 和 height只是设置内容区大小, 不是设置标签整体的大小 ,如果没有为标签设置内边距和边框那么内容区就是标签的大小.标签大小 = 内容区+内边距+边框

内边距Padding:

padding是内容区到边框之间的距离会影响标签的大小

				/* padding-top: 10px;
				padding-left: 10px;
				padding-bottom: 10px;
				padding-right: 10px; */
				
		/* padding: 10px; */
				
		/* padding: 10px 5px;  上下   左右*/
				
	简写:	/*padding: 5px 10px 15px 20px;  上  右  下 左*/

图像标签下面默认有一个间隔 display: block; 设置为块级标签可以.

边框Border:

border是标签的最外层 .

       /* border-top-width: 10px;
		  border-top-color: #FF0000;
		  border-top-style: solid; */
	简写	 /* border-top: red solid 2px; */

边框可以设置样式：
dotted （点线） dashed （虚线） solid （实线）

double （双线） groove （槽线）

border-radius设置四个角为圆角边框;
border-top-left-radius设置左上为圆角边框.

外边距Margin:

margin不影响盒子的大小,会影响盒子的位置.

1)margin-top/right/bottom/left; margin的值可以为负值 ;
2) margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等 ;
3)垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto.

清除浏览器的默认样式:

我们可以用通配处理器处理浏览器页面默认的样式(margin,padding).

*{
    margin: 0;
    padding: 0;
}

浮动Float

浮动指的是使标签脱离原来的文档流，在父标签中浮动起来.

浮动带来的问题: 浮动后的标签没有撑开父标签 ,下面的标签会上移,会影响后面的网页布局(高度塌陷).
解决方案:1.给父标签设置具体的高度;
2.清除浮动 clear属性.清除浮动后,会默认将父标签撑开与浮动标签高度一致.(在浮动标签后的一个空标签)

<div class="fd1">
			<div id="m1">
				CSS
			</div>
			<div id="m1">
				CSS
			</div>
			<div id="m1">
				CSS
			</div>
			<div id="m1">
				CSS
			</div>
			<div style="clear: left;"></div>  
		</div>

定位 Position

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

相对定位 Relative

特点:1)开启了相对定位,没有设置偏移量位置不变; 2)是相对于自己原本的位置移动的; 3)没有脱离文档流,位置还占用;4)位置如有重叠会提升一个层级;5)不会改变标签的性质.

绝对定位 Absolute

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

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

特点:1)开启绝对定位，会使标签脱离文档流 ; 2) 如果不设置偏移量，则标签的位置不会发生变化 ; 3) 绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位）.如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位 ; 4 会使标签提升一个层级 5) 会改变标签的性质，行级标签变成块标签

z-index

设置标签的堆叠顺序 .

如果定位标签的层级是一样,则下边的标签会盖住上边的.
通过z-index属性可以用来设置标签的层级.可以为z-index指定一个正整数作为值，该值将会作为当前标签的层级.层级越高,越优先显示.对于没有开启定位的标签不能使用z-index.

Libe2ty

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫