web基础之CSS

已于 2024-08-02 18:04:25 修改
阅读量1.2k 收藏 33
点赞数 21
文章标签： 前端 css
于 2024-08-02 18:01:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yunzhong_jiuxiao/article/details/140849266
版权

web基础之CSS

文章目录

一、CSS简介

CSS（Cascading Style Sheel）层叠样式表。是一组设置样式规则，并用于空值页面的外观布局的样式。

作用：用于页面的外观美化，以及页面组件的布局和定位。

二、基本用法

CSS语法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		
		<style>
			选择器{        		#表示要修饰的对象
				属性名:属性值;	  #修饰对象的具体属性（样式）：样式的取值；
			}
		</style>
		
	</head>
	<body>
	</body>
</html>

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		
		<style>
			p{
				font-size: 20px;
				color: red;
			}
		</style>
		
	</head>
	<body>
		<p>这是一个段落标签</p>
	</body>
</html>

在这里插入图片描述

2、CSS应用方式

引用方式一共有三种：行内样式、内部样式、外部样式。

2.1 行内样式

被称为嵌入式，通过使用HTML 标签的style属性进行定义，样式只对设置了style属性的标签起作用。

<body>
		<p>这是一个段落标签</p>
		<p style="color: red; font-style: 宋体;">样式的尝试，行内样式</p>
</body>

在这里插入图片描述

2.2内部样式

被称为内嵌样式，在页面头部通过style标签定义，对当前页面中所有符合样式的选择器标签都起作用。

	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		<style>
			p{
				color: pink;
				font-size: 50px;
			}
		</style>
		
	</head>
	<body>
		<p>这是一个段落标签</p>
		<p>样式的尝试，内部样式</p>
	</body>

在这里插入图片描述

2.3外部样式

就是在页面文件外单独的创建一个.css 的文件。然后再页面文件中使用 link标签 进行引入。
引用：

	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		<link rel="stylesheet" type="text/css" href="css/01.css" />
	</head>

css文件：

h1{
	color: green;
}
p{
	color: blueviolet;
}

在这里插入图片描述

三、选择器

1、标签选择器

也被称为元素选择器，使用HTML标签作为选择器的名称。
在这里插入图片描述

在这里插入图片描述

2、类选择器

使用自定义的名称，以 . （点）作为前缀，然后再通过HTML 标签的Class属性调用类选择器。

注意：

  • 调用时不能添加 . 号。
  • 同时调用多个类选择器时，以 空格 分隔。
  • 类选择器名称不能以数字开头。
    在这里插入图片描述

3、ID选择器

使用自定义名称，以#作为前缀，然后通过HTML标签的id属性进行名称匹配，一对一的关系。
在这里插入图片描述
在这里插入图片描述

4、选择器的优先级

行内样式>ID选择器>类选择器>标签选择器
因为样式的加载顺序是，根据书写顺序进行加载的，在同优先级的前提下，后加载的会覆盖先加载的同名样式，就是就近原则，离得越近越优先。

四、常见的CSS属性

1、字体属性

设置字体的相关样式。

属性含义说明
font-size大小、尺寸可以使用多种单位
font-weight粗细
font-family字体
font-style样式
font简写
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		<!--<link rel="stylesheet" type="text/css" href="css/01.css" />-->
		<style>
			h1{
				color: red;
				font-size: 50px;
			}
			.a{
				color: blueviolet;
				font-weight: bold;
			}
			
			#bb{
				color: green;
				font-family: 宋体;
			}
			
			.aa{
				color: aqua;
				font-style: italic;
			}
		</style>
	</head>
	<body>
		<p id="bb">这是一个段落标签</p>
		<p class="a">样式的尝试，内部样式</p>
		<h1>这是一个大标题</h1>
		<p class="aa">样式</p>
	</body>
</html>

在这里插入图片描述

2、文本属性

属性含义说明
color颜色
line-height行高行之间的高度
text-align水平对齐方式取值：left、center、right
vertical-align竖直对齐方式取值：top、middle、bottom可用于图片和文字的对齐方式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		<!--<link rel="stylesheet" type="text/css" href="css/01.css" />-->
		<style>
			h1{
				color: red;
				font-size: 50px;
				line-height: 50px;
				text-align: center;
			}
			.a{
				color: blueviolet;
				font-weight: bold;
				line-height: 80px;
				vertical-align:top;
			}
			
			#bb{
				color: green;
				font-family: 宋体;
				text-align: left;
			}
			
			.aa{
				color: aqua;
				font-size: 80px;
				font-style: italic;
				text-align: right;
			}
		</style>
	</head>
	<body>
		<p id="bb">这是一个段落标签</p>
		<p class="a">样式的尝试，内部样式</p>
		<h1>这是一个大标题</h1>
		<p class="aa">样式</p>
	</body>
</html>

在这里插入图片描述

3、背景属性

属性含义说明
background-color背景颜色
background-image背景图片使用url（）方式进行指定图片路径
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		<!--<link rel="stylesheet" type="text/css" href="css/01.css" />-->
		<style>
			body{
				background-color: bisque;
				<!--background-image: url("img/03.png");-->
			
			}
			h1{
				color: red;
				font-size: 50px;
				line-height: 50px;
				text-align: center;
			}
			.a{
				color: blueviolet;
				font-weight: bold;
				line-height: 80px;
				vertical-align:top;
			}
			
			#bb{
				color: green;
				font-family: 宋体;
				text-align: left;
			}
			
			.aa{
				color: aqua;
				font-size: 80px;
				font-style: italic;
				text-align: right;
			}
		</style>
	</head>
	<body>
		<p id="bb">这是一个段落标签</p>
		<p class="a">样式的尝试，内部样式</p>
		<h1>这是一个大标题</h1>
		<p class="aa">样式</p>
	</body>
</html>

在这里插入图片描述

4、表格属性

border-collapse：表格中相邻的边框是否合并为单一边框。
取值：separated（默认） collapse

		<style>
			table{
				width: 200px;
				height: 100px;
				border: 1px solid red;
				border-collapse: collapse;
			}
			td{
				border: 1px solid red;
			}
			
		</style>

在这里插入图片描述

5、盒子模型的属性

盒子模型就是网页页面的布局。

  • width：宽度
  • height：高度
  • border：边框
  • padding：内边框
  • margin：外边框
    盒子的边框（border）
    盒子的边框分为四个方向：
    1、顶部：top：border -top 三个样式：分别是：1、color 、width、和style
    2、右边：right border -right 三个样式：分别是：1、color 、width、和style
    3、左边：left border-left 三个样式：分别是：1、color 、width、和style
    4、下边：bottom border -bottom 三个样式：分别是：1、color 、width、和style
  • 边框样式的取值：
    1、solid实线、
    2、dashed：虚线
    3、dotted：点线
    4、double：双线
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型属性</title>
		<!--<link rel="stylesheet" type="text/css" href="css/01.css" />-->
		<style>
			p{
				width: 300px;
				background-color: aquamarine;
			}
			.a1{
				
				/* border-top-color:red;
				border-top-width: 2px;
				border-top-style: solid;
				
				border-right-color: blue;
				border-right-width: 3px;
				border-right-style: dotted;
				主要设置了顶部边框和右边框的属性
				 */

				border: 1px solid red;
				padding: 20px;
				margin: 10px;
			}
			.a2{
				padding: 30px;
			}
			.a3{
				margin: auto;
				text-align: center;
				height: 100px;
				line-height: 100px;
			}
			
		</style>
	</head>
	<body>
		<p class="a1">这是一个元素</p>
		<p class="a2">这是二个元素</p>
		<p class="a3">这是三个元素</p>
	</body>
</html>

在这里插入图片描述

6、定位

通过position 属性实现对元素的定位，在设置定位方式后，还需要设置定位属性。
定位常见方式取值如下：

取值含义说明
static默认值按照常规文档流进行显示
relative相对定位相对于标签原来的位置进行定位
absolute绝对定位相对于第一个非static定位的父标签的定位
fixed固定定位相对于浏览器窗口进行定位
定位属性就是：顶部（top）、左边（left）、右边（right）、顶部（bottom）
  • 1、相对定位

先设置元素的position属性为relative，然后再设置定位属性（方向性）。

  • 2、绝对定位

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置定位属性（也就是方向）。

  • 3、固定定位
    先将元素的position属性设置为fixed，然后再设置定位属性（方向）。
  • 4、z-index元素
    通过z-index元素进行设置优先级，通过z-index来控制元素的堆叠顺序，取值为数字，值越大优先级越高。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位</title>
		<!--<link rel="stylesheet" type="text/css" href="css/01.css" />-->
		<style>
			#zhu{
				width: 900px;
				border: 1px solid red;
				position: relative;
			}
			.div1{
				width: 100px;
				height: 80px;
				background-color: aqua;
				position: relative;/* 相对定位 */
				top: 30px;
				left: 60px;
				z-index: -6;
			}
			.div2{
				width: 100px;
				height: 80px;
				background-color: bisque;
				position: absolute;
				left: 180px;
				bottom: 80px;
				z-index: -9;
			}
			.div3{
				width: 100px;
				height: 80px;
				background-color: cadetblue;
				position: fixed;
				bottom:20px;
				left: 100px;
			}
			.div4{
				width: 100px;
				height: 80px;
				background-color: chartreuse;
			}
			
			
		</style>
	</head>
	<body>
		<div id="zhu">
			<div class="div1">第一个盒子</div>
			<div class="div2">第二个盒子</div>
			<div class="div3">第三个盒子</div>
			<div class="div4">啥也不做</div>
		</div>
	</body>
</html>

在这里插入图片描述

总结

以上就是近期的学习，不足之处还望指点。未完待续…

Lianyu_mc
关注
Web入门——css
qq_57357292的博客
05-27 1866
一、定义 简单来说，css就是在html上的代码将在web界面上如何呈现出来。举个例子： 如果不用css进行排版，仅仅用html文件代码，所生成的页面上会是如下这样，将内容依次向下排列。 如果用上css进行样式排版，生成的网页将会让人看起来比较舒服，如下图： 二、css的相关语法 一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明。 如： /* 这是CSS的注释 */ /* 建议每条申明占一行 */ p{ color:red; text-align:center; /*
Web编程基础——CSS、JavaScript、jQuery【高清版】
09-19
《Web编程基础——CSS、JavaScript、jQuery》是一本旨在教授Web前端开发基础知识的教程，涵盖了网页样式设计、动态脚本语言以及广泛使用的JavaScript库。在Web开发领域，这三者是构建交互式和响应式网站不可或缺的...
WEB之CSS
weixin_47314449的博客
04-01 495
一、CSS简介二、CSS书写方式1、CSS语法2、CSS代码书写方式3、CSS文件中代码的注释三、走进CSS1、选择器 一、CSS简介        CSS是层叠样式表/级联样式表（Cascading Style Sheets）的缩写。在前端网页制作中负责给其内容添加样式，比如颜色、位置、大小、背景等等，用来美化页面，使网页更加美观。 二、CSS书写方式 1、CSS语法      &nb.
web——CSS基础
qq_44745063的博客
05-29 1720
作者：小 琛 欢迎转载，请标明出处 文章目录引入方式选择器字体样式文本样式例子1：新闻网页例子2：产品推荐图 css:在web中，用于渲染网页的工具 引入方式 三大引入方式：内嵌、外联、行内 内嵌：在html的head中，定义style，将所有渲染内容写在里面 外联：定义一个.css文件，将所有渲染写在该文件内，在对应的html文件中，link该文件 行间：写在某一个标签内 一般的工程开发多用外联式，这样可以让工程文件看起来清晰；内嵌式通常用于演示等简单操作；行间式在css渲染阶段一般不使用，通
Web-CSS
lzhat的博客
12-07 349
css:由选择器和声明部分组成，     引入方式：     行内：     内部：       外部：     导入： @url("test.css")  《不在使用》 css选择器： ===基础选择器       id选择器 ===> #id {}            class选择器  ===> .myclass {}         标签/元素选择器
基于Web基础的投票网站（html+css+js）
07-04
Web基础的一个实训，制作一个投票网站，可以进行投票和票数统计功能。 采用CSS+div或者表格进行网页布局，采用是CSS+div的方式进行布局。网站分为主界面，登录界面，注册界面。主界面为用户展示了：网页头版的功能...
头歌教学实践平台 Web前端开发基础 CSS-基础知识
最新发布
01-20
通过这个“头歌教学实践平台”的CSS基础知识课程，学习者可以系统地了解和掌握CSS，为成为优秀的Web前端开发者打下坚实的基础。通过实践项目和不断练习，将理论知识转化为实际技能，从而在网页设计领域游刃有余。
web编程基础-CSS，JavaScript，jQuery
07-29
【标题】"Web编程基础-CSS，JavaScript，jQuery"涵盖了网页开发中的三个核心技术，它们是构建动态、交互式和美观网站的关键要素。 【CSS（层叠样式表）】是用于控制网页元素呈现方式的语言。它允许开发者通过定义...
Web前端开发基础：CSS制作电子相册.ppt
06-06
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能灵活使用 CSS排版 能力目标 学会使用 CSS制作电子相册 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 ...
webcss
06-15
webcss应用详解
web css操作
qq_34681895的博客
11-29 409
浮动(float)： CSS的定位机制有3种：普通流（标准流）、浮动和定位。 普通流(normal flow)： 普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。 浮动(float)： 浮动的目的就是为了让多个块级元素同一行上显示。 元素的浮动是指...
Web开发之CSS
weixin_34148456的博客
09-28 99
　　Web开发，除了后台开发和数据开发，很大一块是前端开发。前端开发中使用最大的技术是：HTML(现在也有项目开始使用HTML5了，比如沪江英语的听力曲线使用html5 canvas绘制的)，CSS（这个也有一个新版本，CSS3.0。很多应用出现圆角效果，估计都使用到了3.0的新特性），Javascript（其实这个也有版本的哦！盛大的权一大师就在研究ECMAScript5了），一个javascr...
Web基础——CSS简介
weixin_45318246的博客
07-28 571
CSS基础 （一）CSS简介 汉译为层叠样式表,是用于控制网页样式； WEB标准中的表现标准语言,在网页中主要对网页信息的显示进行控制； 目前推荐遵循的是W3C发布的CSS3.0版本； （二）DIV+CSS的优点 弥补了html语言的不足； 缩减页面代码，提高访问速度； 代码减少，页面文件就会小，占用网络带宽就少，客户端打开速度就快，用户体验就会更好； 结构清晰，有利于SEO（搜索引擎的优化）； 缩短改版时间； 对网站的重构有很好的支持； （三）CSS的基础语法 选择器{ 属性：属性值；} （四
MySQL续_JS
MMMMMMMay
06-30 465
SQL续day_170629:应用dept表：应用emp表：IN 操作符  IN 操作符允许我们在 WHERE 子句中规定多个值。SQL IN 语法:SELECT column_name(s) FROM table_name WHERE column_name IN (value1,value2,...)example:我们查询empno为7900，7901，7902的三条信息：SELECT * ...
web基础（CSS）
GtNB的博客
10-04 200
CSS CSS指的是层叠样式表 样式定义如何显示HTML元素 样式通常存储在样式表中 内联方式 样式定义在单个的HTML元素中 内部样式表 样式定义在HTML页的头元素中 外部样式表 样式定义在一个外部的CSS文件中 由HTML页面引用样式表文件 规则特性： 继承性： 父元素的CSS的声明可以...
web基础篇-css
weixin_44803968的博客
06-28 1102
【代码】web基础篇-css。
WEB之css篇
On the way
08-11 183
1、实现一个div在不同分辨率下的水平垂直居中 .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid pink; width: 100px; height: 100px; } 2、左右固定，中间自适应样式 <style> .b...
Web css
qq_41842440的博客
04-30 130
css限制文本行数display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
Web基础：JavaScript与CSS对象详解及函数应用
本资源主要聚焦于Web基础中的JavaScript和CSS相关概念和技术。首先，讨论了Radio和Checkbox对象，这是网页表单中的两种常见的单选或多选元素。这些对象具有name、value和checked属性，用于设置和获取用户的选择状态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值