前端基础应用：css文件编写

喆子玩点数据

已于 2022-09-15 09:18:28 修改

阅读量2.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： html基础文章标签： css 前端 html

于 2022-09-15 00:23:04 首次发布

本文链接：https://blog.youkuaiyun.com/m0_58239511/article/details/126860986

html基础专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了CSS的基础知识，包括选择器的种类如元素选择器、ID选择器、类选择器等，以及常用属性如文字颜色、背景颜色、字体大小等。此外，还涵盖了内联样式、外部样式和内部样式三种样式表的应用，并讨论了伪类选择器和盒子模型的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
css文件在前端网页页面制作过程中作用主要是控制html文件中标签的样式
css又叫层叠样式表(简称：样式表)，主要用来设置网页内容的样式和布局

一、css组成部分

a.选择器{}

选中需要设置样式的标签（注意：内联样式表不需要写这个结构）

b.样式属性

属性名和属性值之间用冒号连接，一个属性添加完成后必须在后面加分号
常用的属性：color(文字颜色)、background-color(背景颜色)、font-size(设置字体大小)、width(设置宽度)、height(设置高度）、font-weight(设置字体的粗细)

1.内部样式：
css代码可以写在html文件中，与head，body同级.标签为

<style>
#p{background-color: yellow;}
</style>

2.外部样式：
css在css文件夹中时，在html文件中写入

<link rel="stylesheet" href="css/demo1.css">

3.内联样式表:
css可以直接写在代码内部

<p style="color: red;">我是段落1</p>

二、css选择器

css中选择器是用来选中需要设置样式的标签

常见css选择器

1)元素选择器(标签选择器):

直接将标签名作为一个选择器，选中的是所有指定标签
p{} - 选中当前页面中所有的p标签
a{} - 选中所有的a标签

2)id选择器:

在标签的id属性值前加#作为一个选择器，选中的是id属性值为指定值的标签(id属性是唯一的，不需要使用纯数字)
#p{} - 选中id属性值为"p"的标签
#box{} - 选中id属性值为"box"的标签

3)class选择器:

在标签的class属性值前加.作为一个选择器，选中class属性值为指定值的所有标签
(相同的class属性值在整个网页中可以有多个；同一个标签还可以有不同的class值)
.p{} - 选中class属性值为"p"的所有标签
.c1{} - 选中class属性值为"c1"的所有标签
.c1.c2 - 选中class值同时为c1和c2的所有标签
p.c1 - 选中class属性值为c1的p标签

4)通配符：

直接将*作为选择器，选中当前页面所有的标签

5)群组选择器:

-	将多个独立的选择器用逗号隔开作为一个选择器

p,a{} - 选中所有的p标签和所有的a标签
p,.c1{} - 选中所有的p标签和所有class值为c1的标签
a,.c2,#p1 - 选中所有a标签和所有class值为c2的标签以及id为p1的标签

6）后代选择器:

多个选择器用空格隔开作为一个选择器

7）子代选择器

多个选择器用">"隔开作为一个选择器

三、伪类选择器

用来选中标签状态，对特点状态设置样式

1)语法：
普通选择器:伪类选择器{}

2)常用的伪类选择器(不同的伪类选择器对应不同的状态)
:link - 链接没有成功访问过的时候对应的状态(a标签特有的状态)
:visited - 链接已经访问多的时候对应的状态(a标签特有的状态)
:hover - 鼠标悬停在标签上对应的状态(所有可见标签都有的状态)
:active - 鼠标在标签上点击按住不放对应的状态(所有可见标签都有的状态)

注意：如果一个标签同时设置多个状态的样式，需要遵守”爱恨原则 - LoVe HAte
按这个等级进行

<body>
	<a href="https://www.baidu.com">第一章</a>
	<a href="https://www.jd.com">第二章</a>
	<a href="https://www.51job.com">第三章</a>
	<a href="https://www.taobao.com">第四章</a>
	<p>我是段落1</p>
	<button>确定</button>
	
	<style>
		a:link{
			color: gray;
		}
		a:visited{
			color: lightgray;
		}
		
		p:active{
			color: red;
		}
		
		button:active{
			background-color: lightblue;
			color: blue;
		}
		
		p:hover{
			color: green;
			font-size: 20px;
		}

	</style>
</body>

在这里插入图片描述

四、css常用属性

1. 文字相关属性

1)文字颜色
颜色值：a.颜色英文单词 b.直接使用十六进制颜色值 b.rgb(红,绿,蓝)、rgba(红,绿,蓝,透明度)
颜色值的范围是:0~255, 透明度范围是：0~1, 0表示完全透明

color: rgb(255,0,0,0.5)

2)设置字体大小, 数值表示大小的时候需要给单位(一般是px)

font-size: 25px

3）设置字体名称 : font-family:字体1,字体2,字体3,…;
注意：中文字体需要加引号

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif

4）字体加粗: 取值范围是100(最细的)到900(最粗的)

font-weight: 900

5）文字倾斜: italic

font-style: italic

6)对齐方式: left/right/center

text-align: left

7)设置行高

line-height: 60px

8）文字修饰：none(去掉修饰)、underline(下划线)、overline(上划线)、line-through(删除线)

text-decoration: line-through

9)添加首行缩进(段落标签)

text-indent: 2em

10)设置字间距

letter-spacing: 10px

2. 列表相关样式

1)设置每个元素前面的图标样式： disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)

list-style-type: circle;

2)自定义图标

list-style-image: url(./img/花.png);

3)设置图标的位置：outside(外边)/inside(里边)

list-style-position: outside;

3.背景相关属性单独操作

1)背景颜色

background-color: skyblue;

2)单独设置背景图相关属性
**a.添加背景图 **
如果背景图比标签小，默认会重复图片，直到把标签填满为止。
如果背景图比标签大，只显示标签大小能显示的部分(图片不会缩放)

background-image: url(img/花.png);

b.设置平铺方式：
no-repeat - 不平铺，图片只显示一次
repeat - 平铺（将整个标签铺满）
repeat-x - 平铺一行
repeat-y - 平铺一列

background-repeat: no-repeat;

c.背景图固定
(子标签在父标签中可以滚动的时候，子标签的背景图固定或者滚动有区别)
scroll(滚动)/fixed(固定)

background-attachment: scroll;

d.设置背景图的位置
水平方向上的对齐方式（left/center/right）或值
垂直方向上的对齐方式(top/center/bottom)或值

background-position:30px 50px;

e.直接设置背景相关属性：
background:背景图地址平铺方式 x方向位置 y方向位置背景颜色;

background:url("img/baoer.jpeg") no-repeat right top red;

4.边框相关样式

1.同时设置四个边的边框样式
border:边框的宽度边框样式边框的颜色;

边框样式：solid(实线)/dashed(虚线)dotted(点划线)double(双线)

border:5px solid red;

**2.单独设置四个边的边框样式 **
border-left:
border-right:
border-top:
border-bottom:

border-left:5px solid red;
border-right: 10px dotted hotpink;
border-top:5px solid red;
border-bottom: 10px dotted hotpink;

3.同时设置四个角的圆角弧度

border-radius: 100px;

4.单独设置四个角的圆角弧度

border-top-left-radius: 40px;
border-bottom-right-radius: 40px;

5.标准流布局和脱流

1.标准流布局
标签在没有添加任何布局相关样式的时候，标签默认的布局方式
根据标签在标准流默认布局方式的不同，可以将标签分为三类：块级标签、行内标签、行内块标签
1)块级标签
一个标签占一行；设置宽高有效；默认高度是内容的高度。（常见块级标签: p、h1~h6、div、ul、li）
**2)行内标签 **
一行可以显示多个；设置宽高无效；默认大小是内容大小。（常见行内标签：span、b、i、label等)
3)行内块标签
一行可以显示多个；设置宽高有效；默认大小是内容大小。（常见行内块标签：img、input(输入框))

2.display属性
block(块)、inline(行内)、inline-block(行内块)、none(隐藏标签-让标签不显示)
在标准流中可以通过设置标签的display属性来修改标签的类型。

3.脱流 - 脱离标准流布局
1).浮动：设置标签的float属性可以让标签浮动
left: 左浮动
right: 右浮动

float: left;

应用：如果需要竖着显示的标签横着来，就使用浮动(页面布局)
如果前面的标签浮动，后面的标签不浮动，就会出现后面的标签被前面的标签覆盖的现象
解决方法：让后面的标签也浮动,，具体看案例

<body>
	<div id="div1"><p id="p1">我是段落1</p></div>
	<div id="div2">
		<div>div1</div>
	</div>
	<div id="div3"></div>
	
	<style>
		#div1{
			width: 30%;
			height: 150px;
			background-color: red;
			float: left;
			
			position: relative;
		}
		
		#div2{
			width: 70%;
			height: 150px;
			background-color: darkcyan;
			float: left;
		}
		
		#div3{
			width: 100%;
			height: 300px;
			background-color: aqua;
			float: left;
		}
		
		#p1{
			position: absolute;
			bottom: 0px;
		}
	</style>
</body>

在这里插入图片描述
1.定位相关属性
1）设置距离的属性
left: 设置当前标签的左边到参考标签的左边的距离
right: 设置当前标签的右边到参考标签的右边的距离
top: 设置当前标签的上边到参考标签的上边的距离
bottom: 设置当前标签的下边到参考标签的下边的距离

2）设置参考标签: position
absolute: 将第一个position的值不是默认值(initial\static)的父标签参考对象。
(除了body标签的position不是默认值，其他标签没有设置postion的时候对应的值都是默认值)
relative: 将自己作为后代标签的参考对象
fixed: 相对浏览器进行定位(在浏览器内容滚动的时候不会动)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="div1" style="background-color: red; width: 800px; height: 1800px;">
			<div id="div2" style="background-color: green; width: 400px; height: 400px;">
				<div id="div3" style="background-color: yellow; width: 200px; height: 200px;">	
					<div id="div4" style="background-color: purple; width: 100px; height: 100px;"></div>
				</div>
			</div>
		</div>
		
		<div id="div0" style="background-color: sandybrown; width: 100%; height: 50px;">TOP</div>
		
		<style>
			#div2{
				/* 设置position为relative是希望当前标签可以作为后代标签定位的参考对象 */
				position: relative;
			}
			#div4{
				/* 设置position为position是希望当前标签在定位的时候可以相对父标签(前辈)进行定位 */
				position: absolute;
				right: 30px;
				bottom: 20px;
			}
			
			#div0{
				position: fixed;
				top: 0;
				right: 0;	
			}
		</style>
	</body>
</html>

在这里插入图片描述

6、盒子模型

1.盒子模型
一个完整的标签由4个部分组成：content(内容)、padding(内边距)、border(边框)、margin(外边距)
1)content:
设置标签的宽度和和高度，就是设置标签的content的大小;
给标签添加内容，内容是添加在content上的(包括标签文字内容和子标签);
设置标签的背景颜色和背景图，会作用在content上
2)padding:
内边距有4个方向；
设置标签的背景颜色和背景图，会作用在padding上
3)margin:
内边距有4个方向；
外边距看不见但是占位置

例子：
1.同时设置4个方向的内边距

padding: 100px;

2.单独设置某个方向的内边距

padding-left: 20px;

3.同时设置4个方向的外边距

 margin: 100px;
 自动外边距 
 margin：auto；

4.单独设置一个方向的外边距

margin-bottom: 100px;