css基本使用

源创可可

已于 2024-08-29 16:03:32 修改

阅读量623

点赞数 14

分类专栏： web 文章标签： css 前端

于 2024-08-29 00:09:00 首次发布

原文链接：https://mysqlandredisconfig.helplook.com/docs/css-ji-ben-shi-yong

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css有三种样式, 分别是内部样式和外部样式还有行内样式

内部样式:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      /* 内部样式 */
      /* 在当前的标签里面,可以直接写css代码 */
    </style>
  </head>
  <body>
    <!-- 优点: 在同一个页面内部, 便于复用和维护 -->
    <!-- 缺点: 在多个页面之间 可重用性不高 -->
  </body>
</html>

优点: 在同一个页面内部, 便于复用和维护
缺点: 在多个页面之间可重用性不高

行内样式(也被称之为嵌入样式, div style=“”), 行内样式只对当前这个标签生效:

比如:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Document</title>
  </head>
  <body>
    <!-- 行内样式 -->
    <div style=""></div>
    <div></div>
  </body>
</html>

直接在标签里面添加style写css代码
优点: 很直观, 很方便
缺点: 缺乏可重用性

外部样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Document</title>
    <!-- link标签的作用, 往当前文件, 引入其他的问文件来 -->
    <!-- 外部样式 -->
    <!-- 优点: 可以让当前的html页面和css代码进行分离 代码量多的时候, 方便维护, 并且可重用性高 -->
    <!-- 缺点: 可能会出现样式混乱的问题, 如果维护不好的话, 就会出问题 -->
    <link rel="stylesheet" href="css/我的样式代码.css" />
  </head>
    <body>
		
  </body>
</html>

优点: 可以让当前的html页面和css代码进行分离代码量多的时候, 方便维护, 并且可重用性高
缺点: 可能会出现样式混乱的问题, 如果维护不好的话, 就会出问题

选择器

用来选择标签, 选出来以后给标签加样式

一·标签选择器(也叫元素选择器), 通过标签名来进行对该元素设置样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    	span{
    		/* 在花括号里面 写 属性和值 */
    		/* xxx: ; */
    		color: red;
    	}
    </style>
  </head>
  <body>
    <!-- 也叫做元素选择器 -->
    <!-- 特点: 根据标签来选择的, 以标签为开头, 影响范围广, 一般用来做一些通用的设置 -->
    <span>大家 都很棒</span>
    <span>你好</span>
  </body>
</html>

二·类选择器, 利用class来给标签定义一个类, 利用类名对该元素修改样式, 以.开头, 比如类名为class1, 那就是.class1{这里写css代码}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			/* 注意: 类选择器 必须要以.号作为前缀 后面跟的是类名 */
			.span1{
				color: skyblue;
			}
			.span2{
				color: cyan;
			}
		</style>
	</head>
	<body>
		<!-- 就是给当前的标签 去一个类名 -->
		<!-- 通过class属性 去一个类名 类名可以随便取 -->
    <!-- 前两个span里面的文字都是skyblue颜色 -->
    <!-- 最后一个span里面的文字是cyan颜色 -->
		<span class="span1">我叫span</span>
		<span class="span1">我叫span222</span>
		<span class="span2">我是第三个span标签</span>
	</body>
</html>

就是给当前的标签去一个类名

通过class属性去一个类名类名可以随便取

前两个span里面的文字都是skyblue颜色

最后一个span里面的文字是cyan颜色

三·层级选择器(也叫后代选择器)

就比如:

<div>
	<div>哈哈哈</div>
	<div class="box1">嘻嘻嘻</div>
	<div>
	<!-- 层级选择器不一定是父子关系, 祖孙关系也可以, 只要有后代联系, 都适用于层级选择器 -->
	<p>我爱红太狼</p>
	</div>
</div>
<div>同学们幸苦了</div>

我们可以发现, 有div嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			/* 层级选择器 必须要有层级关系 通过空格隔开 找他的后代标签 */
			/* 如果出现了相同的属性 那么下面的属性会覆盖掉上面的属性 */
			div div{
				color: red;
			}
			div .box1{
				color: blue;
			}
			div div p{
				color: orange;
			}
		</style>
	</head>
	<body>
		<!-- 也叫后代选择器 -->
		<div>
			<div>哈哈哈</div>
			<div class="box1">嘻嘻嘻</div>
			<div>
				<!-- 层级选择器不一定是父子关系, 祖孙关系也可以, 只要有后代关系, 都适用于层级选择器 -->
				<p>我爱红太狼</p>
			</div>
		</div>
		<div>同学们幸苦了</div>
	</body>
</html>

css里面的div div指的是哈哈哈, div .box1指的是嘻嘻嘻,div div p指的是我爱红太狼, 有找范围的感觉。

四·id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
      /* 注意, 在引用id来修改该元素的样式的时候, 前面加的是#号 */
			#myid{
				color: green;
			}
		</style>
	</head>
	<body>
		<!-- 给当前的标签去一个id属性, 后面跟上一个id名 -->
		<!-- 虽然给其他标签设置成相同的id也有样式 但是 id是唯一的 js中通过id只能获取一个 -->
		<!-- 类选择器可以有多个 但是id不能 因为id是唯一的 -->
		<div id="myid">
			我的id叫myid
		</div>
		<div id="myid">
			我的id叫myid
		</div>
	</body>
</html>

利用id对该元素修改样式。

虽然给其他标签设置成相同的id也有样式但是 id是唯一的 js中通过id只能获取一个。

类选择器可以有多个但是id不能因为id是唯一的。

五·组选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			/* 组选择器, 多个选择器的一个组合 一般吧相同的样式放到组选择器中 */
			.box1,.box2,.box3{
				/* 将box1和box2和box3都设置为宽为200px和高为200px */
				width: 200px;
				height: 200px;
			}
			/* 如果后面的样式 前面没有设置 那么不会覆盖 而是在前面的基础上添加样式 */
			.box1{
				background-color: red;
			}
			.box2{
				background-color: blue;
			}
			.box3{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</body>
</html>

.box1,.box2,.box3{}这种就是组选择器

这个代表将类名为box1, box2和box3的所有元素,都设置样式, 而且在花括号里面的样式,带有这三种类型的元素, 样式都将会被改变。

注意: 如果后面的样式前面没有设置那么不会覆盖而是在前面的基础上添加样式。

字体属性

/* 字体大小 px是单位 */
font-size: 50px;
/* 字体粗细 后面没有单位 */
font-weight: 800;
/* 设置字体 */
font-family: "华文彩云";
/* center水平对齐,居中 right文字靠右 */
text-align: right;
/* underline设置文字下划线 */
text-decoration: underline;
/* color 设置文字颜色 */
color: blue;
/* background-color设置背景颜色 */
background-color: pink;

上代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			.span{
				/* 字体大小 px是单位 */
				font-size: 50px;
				/* 字体粗细 后面没有单位 */
				font-weight: 800;
				/* 设置字体 */
				font-family: "华文彩云";
				/* center水平对齐,居中 right文字靠右 */
				text-align: right;
				/* underline设置文字下划线 */
				text-decoration: underline;
        /* color 设置文字颜色 */
				color: blue;
        /* background-color设置背景颜色 */
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="span">今天星期三, 降温了</div>
	</body>
</html>

元素溢出

就是当子类的大小超出父类的情况下, 就会产生元素溢出情况,比如子类的文字大小超出了父类的长度或宽度大小, 文字会超出父类覆盖的地方, 会溢出。

如果出现元素溢出, 有以下做法, 用到了overflow属性:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background-color: yellow;
				/* 对爸爸进行设置 如果元素溢出了 就该这么做 */
				/* hidden就是隐藏溢出的部分 */
				/* visible就是显示溢出的部分 */
				/* auto 可以滚动查看溢出来的内容 */
				overflow: auto;
			}
			.box2{
				width: 200px;
				height: 50px;
				/* background-color: blue; */
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				我是儿子我是儿子我是儿子
			</div>
		</div>
	</body>
</html>

overflow属性:
hidden就是隐藏溢出的部分
visible就是显示溢出的部分
auto 可以滚动查看溢出来的内容

/* hidden就是隐藏溢出的部分 */
/* visible就是显示溢出的部分 */
/* auto 可以滚动查看溢出来的内容 */
overflow: auto;

盒子模型:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			/* *是通配符 */
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
				border: 2px red solid;
				/* 上下10px 左右40px */
				/* 内边距padding */
				/* padding: 10px 40px; */
				/* 上10px 右20px 下30px 左40px */
				/* padding: 10px 20px 30px 40px; */
				/* 外边距margin */
				/* margin: 40px; */
				/* 设置边角圆形 */
				/* 如果你想让正方形 变成圆形, 只需要将值设置为50% */
				border-radius: 20px;
			}
			/* 浏览器自带边距 */
		</style>
	</head>
	<body>
		<div>我叫div</div>
	</body>
</html>

解析:
padding代表内边距, margin代表外边距, padding: 10px 40px;代表上下内边距是10px, 左右内边距是40px。padding: 10px 20px 30px 40px;代表上边外边距是10px, 右边外边距是20px, 下边外边距是30px, 左边外边距是40px。margin: 40px;上右下左外边距都是40px。margin的两个参数和四个参数的设法, 原理和内边距padding的原理是一样的。

border是指设置边框
三个参数: 边框粗细颜色边框样式
border-radius: 20px;这句话是设置边框的圆角(也就像圆角矩形), 如果想要让让一个正方形变为一个圆形, 那就把参数改为50%即可, 即border-radius: 50%;

咦, 我们学习了这么久, 不知道大家有没有发现一个问题, 就是我们不设置任何css属性, 但是元素定义之后, 始终在网页展示的时候, 不贴边的。

那这时候, 该怎么办呢?

我们可以在css里面设置统一样式, 利用通配符*来解决

*{
	margin: 0;
	padding: 0;
}

实战:
实现一个向以下图片一样的效果

有三个盒子
分别是从上到下进行展示, 并且把它们全部放在中间。

先自己试着做做看, 不要马上看答案。

答案:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			.box1{
				width: 500px;
				height: 700px;
				border: 1px black solid;
				margin: auto;
			}
			.box2{
				width: 500px;
				height: 300px;
				border: 1px black solid;
				margin: auto;
				margin-top: 10px;
			}
			.box3{
				width: 500px;
				height: 700px;
				border: 1px black solid;
				margin: auto;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box1">盒子1</div>
		<div class="box2">盒子2</div>
		<div class="box3">盒子3</div>
	</body>
</html>

检查一下, 你都答对了吗? 如果答对的话, 给自己一个掌声哦!!!

以上就是"css基本使用"的所有内容了, 如果有哪里不懂的地方,可以在评论区讨论, 欢迎大家随时来提问题!!!
如果我有写错的地方, 望大家指正, 让我们一起努力, 继续不断的进步.
学习是个漫长的过程, 需要我们不断的去学习并掌握消化知识点, 有不懂或概念模糊不理解的情况下,一定要赶紧的解决问题, 否则问题只会越来越多, 漏洞也就越老越大.
人生路漫漫, 白鹭常相伴!!!