CSS基础

最新推荐文章于 2024-10-01 23:54:35 发布
最新推荐文章于 2024-10-01 23:54:35 发布
阅读量174 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiii_/article/details/103246752

CSS

  1. 概述：CSS（Cascading Style Sheets），层叠样式表，用于控制HTML标签的展示样式，美化页面
    如果学习了CSS，HTML标签的很多自带属性就可以不用了，都可以使用CSS代替，起到解耦的作用
  2. 使用：HTML定义元素，CSS控制展示样式
  3. CSS与HTML的结合方式
    （1）内联样式：将CSS属性写在HTML标签的style属性上，优点是控制强度大，缺点是一次只能控制一个标签，代码复用性差
<h1 style="color: aqua;font-size: 100px;font-weight:900;">内联样式</h1>

（2）内部样式：配合选择器，一次可以控制一个或多个标签，能提高代码的复用性
（3）外联样式：一次可以控制多个页面，开发中推荐使用，即创建一个CSS目录，再创建一个CSS文件，在该文件中通过CSS控制展示样式，在html文件中通过link标签将CSS和HTML关联起来，简单的说就是将内部样式的选择器单独写在一个CSS文件中，使HTML文件看起来简单

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/iconfont.css">
</head>

在这里插入图片描述

选择器

  1. 概述：选择器就是一种语法，为了选中一个或多个标签，进行样式的控制，以减少CSS代码的重复，一般写在head标签中的style属性里
  2. 常见的选择器
    （1）类选择器：选择多个class属性值一样的标签进行控制，用"."符号选择
<head>
	<style type="text/css">
		.myh1{
			color: #FF0000;
			font-size: 200px;
		}
	</style>
</head>
<body>
	<h1 class="myh1">内部样式</h1>
	<h1 class="myh1">类选择器</h1>
</body>

（2）id选择器：通过标签的id属性，一次选择一个或多个id名，用”#“符号选择

<head>
	<style type="text/css">
		#mydiv,#mydiv2{
			color: red;
			font-size: 100px;
		}
	</style>
</head>
<body>
	<div id="mydiv">内部样式</div>
	<div id="mydiv2">id选择器</div>
</body>

多个标签的id名不能一样，因为id是唯一的

（3）标签名选择器：直接选择标签名进行标签控制，可以一次选择多个标签同时控制

<head>
	<style type="text/css">
		h1{
			color: red;
		}
		div{
			color: red;
		}
		h1,div{
			font-size: 200px;
		}
	</style>
</head>
<body>
	<h1>内部样式</h1>
	<div id="">标签名选择器</div>	
</body>
  1. 选择器的优先级：内联样式>id选择器>类选择器>标签名选择器

以上是主要的选择器，除此之外，还有一些其他选择器
（1）包含选择器：标签嵌套，则层层往下选，因为CSS属性具有继承性，子类本身没有属性，可以继承父标签的属性

<head>
	<style type="text/css">
		div span b{
			color: red;
		}	
	</style>
</head>
<body>
	<div id="">
		<span><b>asdfasdfsdaf</b></span>
	</div>
</body>

以上代码中div span b是指所有b标签都被操作，如果span标签下嵌套其他标签，其他标签里再嵌套b标签，我们指想对span标签下的b标签内容进行操作，就需要">"符号，即写成div span>b，也就是子选择器

（2）伪类选择器：针对鼠标的几种状态（鼠标悬浮状态、鼠标按下的状态、链接的状态、链接被访问过后的状态）

<style type="text/css">
	/*  鼠标悬浮状态 */
	a:hover{
		color: #FFFF00;
	}
	/* 鼠标按下的状态 */
	a:active{
		color: aqua;
	}
	/* 链接的状态 */
	a:link {
		color: #FF0000;
		text-decoration: none; /* 去掉链接的下划线*/
	}
	/* 链接被访问过后的状态 */
	a:visited{
		color: pink;
	}
</style>
<body>
	<a href="https://www.baidu.com">一个链接</a>
</body>

（3）通配符选择器：选择所有标签进行控制

*{
				
}

选择器有很多种，这里就列举这几种使用最多的，在使用过程中可以在W3Schoo自学文档中查阅学习

常用属性

  1. 概述：直接在选择器中使用属性控制元素
  2. 属性：
    （1）overflow：scroll/visible/hidden/auto
    其中，scroll指若内容超出，提供上下拉条和左右拉条，拉动看内容
    visible指在边框外继续显示超出的内容
    hidden指隐藏超出的内容
    auto指若内容超出，提供拉条上下拉动看内容
<head>
	<style type="text/css">
		div {
			overflow: visible;
			}
	</style>
</head>
<body>
	<div id="">内容</div>
</body>

（2）行标签和块标签之间的转换
display：block； 把行标签变成块标签
display：inline-block； 把块标签变成行标签，但也留有一些块标签的特点，比如设置上下间距

display：none； 隐藏标签，即在浏览器中看不到该标签内的内容
除此之外，还有个隐藏标签的属性是：visibility：hidden
两者的区别是前者标签隐藏后占的位置不在，后者隐藏后占的位置还在

（3）div+CSS布局
在使用div标签时，配合选择器，可以得到一个方框

#div1{
	/* 方框的宽高 */
	width: 200px;
	height: 200px;
	/* 设置边框粗细，颜色，线的类别 */
	border: 1px blue solid;
	/* 背景颜色 */
	background: #008000;
	/* 背景图片 */
	background-image: url(图1.jpg);
	/* 图片填充满 */
	background-size:100% 800px ;
	/* 内部元素距离左边边框的距离 */
	padding-left:20%;
	/* 也可以设置距离右边，顶部，底部边框的距离
	分别是padding-right，padding-top，padding-bottom */
}
#div2{
	/* 该方框距离左边另一个方框的距离 */
	margin-left:20%;
	/* 也可以设置距离右边方框，顶部方框，底部方框的距离
	分别是margin-right，margin-top，margin-bottom */
}

这里拿div方框举例，当然也可以对整个页面背景操作，只需在body标签里操作即可

说HTML的时候说过div是块标签，那么，可不可以让多个div一行显示？
答案是可以的，使用浮动属性float，取值left指向左浮动，right指向右浮动
当使用float浮动属性时，在不需要浮动的标签内要清除浮动，用clear：both

<div id="" style="clear:both"></div>

（4）shadow，设置阴影，取值有4个，指阴影的左右位置，上下位置，阴影的范围和阴影的颜色

box-shadow:10px 10px 10px gray;

（5）如果元素设了绝对定位，有了重叠，那么想要设置重叠顺序可以使用z-index，值越大就在最上面

div {position: absolute;}
#div1 {z-index: 2220;}
#div2 {z-index: 120;}

如上图代码，假设定位重叠，那么div1标签里的内容就会在div2标签里的内容之上

（6）元素的定位方式
页面的左上角称为原点位置，第一个元素默认会在该位置
元素的定位有两种方式：
相对定位（position：relative）：一个元素的位置会参考上一个元素的位置
绝对定位（position：absolute）：所有元素都参考原点的位置，彼此之间没有参考关系
注：一般页面的元素默认采用相对定位，如果使用了绝对定位，那么设置元素距离原点的距离，用top left right bottom

（7）透明度，前三个取值代表颜色，第四个取值代表透明度，0~1，越低越透明

color: rgba(0,0,0,0.5);

（8）对背景图片的操作

body{
	background-image:url(图1.jpg) ;
	/* 设置背景图片是否重复  no-repeat代表不重复*/
	background-repeat: no-repeat;
	/* 背景图片的尺寸 左右的尺寸 上下的尺寸 */
	background-size: 100% 800px;
	/* 背景图片的位置 background-position */
	background-position:center 20px;
	/* 固定背景图片 */
	background-attachment:fixed;
}

（9）彩色变黑白

filter: grayscale(0%);
filter: gray;

其中，取值的百分比代表黑白程度，越高黑白程度越高

（10）缩进和行高

<head>
	p {
		/* 设置首行缩进 em代表倍数*/
		text-indent: 2em;
		/* 设置行高 */
		line-height:1.5em;
	}
</head>
<body><p>大量内容</p></body>

（11）过渡动画：监听鼠标hover，使用transition设置过渡后的div属性
例如当鼠标移到浏览器中的图片上时，实现图片拉大的效果，当鼠标移开图片，图片再还原成原来的大小

<head>
	<style type="text/css">
		div {
			width: 400px;
			height: 400px;
			background-image: url(图1.jpeg);
			background-size: 100% 100%;
			transition: all 1s; 
		}
		div:hover{
			transition:all 1s;
			background-size: 105% 105%;
		}
	</style>
</head>
<body>
	<div></div>
</body>

上面代码是对全部元素进行整体操作，还可以对单个属性进行操作
例如：
过度的属性 transition-property
过度的时长 transition-duration
过度延时 transition-delay
过度的速率 transition-timing-function: linear

（12）自定义动画（漂浮广告）：Animation
格式：animation：myDH 5s；（myDH指动画名，5s指动画时间）

@keyframes myDH
{
	/* 自定义动画 */
	from{background:red;}
	to{background:blue;}
}
@keyframes myDH
{
	/* 自定义动画，也可以细分这个动画 */
	0%{background:red;}
	25%{background:yellow;}
	50%{background:blue;}
	75%{background:green;}
	100%{background:pink;}
}
/* 设置属性 */
div {
	width: 200px;
	height: 200px;
	background: #008000;
	/* animation: myDH 1s 1s reverse; */
	/* 单个使用属性 */
	/* 指定要绑定到选择器的关键帧的名称 */
	animation-name: myDH;
	/* 动画指定需要多少秒或毫秒完成 */
	animation-duration: 1s;
	/* 设置动画在启动前的延迟间隔。 */
	animation-delay: 0s;
	/* 	定义动画的播放次数。 infinite无限次 */
	animation-iteration-count: 1;
	/* 设置动画变动的速率 */
	animation-timing-function:1;
	/* 指定是否应该轮流反向播放动画。原路返回 */
	animation-direction:reverse;
	/*forwards 动画执行完之后，停留在最后一帧*/
	animation-fill-mode: forwards; 
}

（13）旋转：在选择器里使用transform: rotate()设置旋转，括号里取旋转度数

<style type="text/css">
	div{
		height: 400px;
		width: 400px;
		background-image: url(图1.png);
		transform: rotate(15deg);				
	}
</style>
<body>
	<div></div>	
</body>

以上代码就是把图片旋转15度显示在浏览器中

CSS属性跟选择器一样有很多，这里只列举了部分刚学习过的属性，其他的属性根据需要可在W3Schoo自学文档中查阅自学

盒子模型

  1. 概述：CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念
  2. 构成：内容区（content）、填充（padding）、边框（border）、空白边（margin）
  3. 作用：改善网页布局
<head>
	<style type="text/css">
		/* 把外层设置为一个盒子 */
		#box {
			width: 100%;
			height: 600px;
			border: 1px black solid;
			/* 把外层设置为一个盒子 */
			display: flex;
			/* 设置内层是横向排列 纵向排列 */
			flex-direction: row;
			/* 设置内层的对齐方式 */
			justify-content: center;
			/* 自动换行 */
			flex-wrap: wrap;
			overflow: hidden;
		}
		.nei {
			width: 100px;
			height: 100px;
			border: 1px black solid;
			margin-top: 50px;
			margin-left: 20px;
		}
	</style>
</head>
<body>
	<div id="box">
		/* order指定该方框排的顺序 */
		<div id="" class="nei" style="order: 2;">1</div>
		<div id="" class="nei" style="order: 1;">2</div>
		<div id="" class="nei" style="order: 3;">3</div>
	</div>
</body>

浏览器的兼容性

概述：有些属性对于个别浏览器来说是不兼容的，也就起不到效果，这时通过加浏览器的标志让标签起作用

-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
weiii_
关注
CSS基础语句
weixin_53968665的博客
12-25 1537
CSS
前端CSS基础-常规流练习.rar
04-09
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
CSS基础全解析
TTKunn的博客
10-01 3523
CSS基础全解析、快速入门
CSS基础知识汇总
ximu__l的博客
06-07 1383
本文是关于CSS技术的基础内容，详细展列了CSS技术相关的基础。
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 3万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础样式
qq_62283164的博客
07-19 1662
CSS基础样式 一、css语法规范 二、CSS选择器 1.类（class）选择器 2.id选择器 3.CSS选择器优先级 三、网页中引入css样式 1.内联（行内）样式 2.内部样式表 3.外部样式表 4.link标签引入外部样式文件 ​编辑 5.CSS样式优先级 四、字体样式 五、文本样式 六、鼠标样式 七、背景样式 八、列表样式 九、CSS伪类 十、CSS练习之美团左侧菜单栏...
CSS基础知识
ashfiqa的博客
01-21 2342
这是对于前端CSS的基础知识的一个简单概括，里面讲述了很多基础的东西，欢迎大家来看一下。 CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
CSS基础知识总结
Lotus_fragrance的博客
04-29 4283
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础 知识点总结
星星之火的语言c学习
08-18 3042
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
css基础知识
健康平安的活着的专栏
05-12 2036
一 css 1.css 用于控制网页样式的一种标记语言，通过使用css可以使网站外观更加美观，结构更加简化。 2.css的语法： 选择符{属性:属性值}；属性必须要包含在{}中，并且之间用属性和属性值“：”分隔。当有多个属性时，用“；”进行区分。 3.选择符： 通配符选择符，* 代表所有元素，如 *{font-size:12px}; 类型选择符 如 <p class="red"> 这是第一个段落 </p> 选择符的写法： p.red{color:red}...
CSS基础知识.pdf
10-04
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
CSS基础入门总结（很详细的哟）
10-25
（1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、CSS字体属性 （1）字体大小 （2...
css基础教程之CSS基础语法
09-25
CSS（层叠样式表）是用于控制网页元素外观的关键技术。在本教程中，我们将深入探讨CSS的基础语法，包括如何应用样式以及选择器的使用。...为了创建美观且易于管理的网页，掌握CSS基础语法至关重要。
html + css 基础学习.zip
12-29
html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css...
the homework of ROS summer school
最新发布
07-31
the homework of ROS summer school
OpenWeatherMap API 调用实战模板.rar
07-31
我们制作了一个完整的天气数据获取解决方案，包括环境配置、鉴权处理和实用的调用模板。 环境配置说明，获取 API 密钥： 访问 OpenWeatherMap 官网 注册账号 登录后进入 API 密钥页面生成你的专属 API key 新生成的 API key 可能需要 10-15 分钟才能生效 环境准备 Python 3.6+ 环境 安装必要依赖：pip install requests python-dotenv 环境变量配置 在项目根目录创建 .env 文件 添加内容：OPENWEATHER_API_KEY=你的API密钥 使用说明 基本用法 实例化 OpenWeatherClient 类，它会自动处理 API 密钥验证 使用提供的方法获取不同类型的天气数据：get_current_weather_by_city(city_name, country_code) - 通过城市名获取当前天气 get_current_weather_by_coords(lat, lon) - 通过经纬度度获取当前天气 get_forecast_by_city(city_name, country_code, days) - 获取未来几天的预报 错误处理 代码包含完整的错误处理，包括网络错误、API 错误和参数错误 所有异常都会被捕获并以友好的方式展示 数据格式化 format_weather_data 方法将原始 API 响应转换为易读的文本格式 你可以根据需要修改此方法以适应特定的输出格式要求
基于React框架构建的现代化前端Web应用程序开发模板_包含完整开发环境配置和构建工具链_用于快速启动React项目开发_支持热重载和自动化测试_集成Webpack和Babel构.zip
07-31
基于React框架构建的现代化前端Web应用程序开发模板_包含完整开发环境配置和构建工具链_用于快速启动React项目开发_支持热重载和自动化测试_集成Webpack和Babel构.zip
锂电池充放电模型的MatlabSimulink仿真及双向充放电功能实现 DCDC变换器
07-31
基于Matlab/Simulink平台实现的锂电池充放电模型及其双向充放电功能。文中首先强调了锂电池充放电模型的重要性和应用背景，随后重点描述了采用恒流（CC）和恒压（CV）两种模式来实现锂电池的高效充放电过程。此外，文章还探讨了通过Simulink仿真工具对DC/DC变换器进行精确控制的方法，以确保电压和电流的有效追踪，从而保障不同充放电环境下的性能表现。最后，文章指出该模型的研究成果有助于提升锂电池的安全性和使用效率。 适合人群：从事电力电子、新能源汽车、储能系统等领域研究的技术人员和科研工作者。 使用场景及目标：适用于希望深入了解锂电池充放电机理并掌握其实现方法的专业人士；旨在帮助研究人员优化锂电池管理系统的设计，提高系统的可靠性和安全性。 其他说明：文中提及的内容不仅限于理论分析，还包括具体的实验验证和技术细节，为后续进一步探索提供了宝贵的经验和数据支持。
CSS基础入门：布局与控制的革命
CSS基础教程深入解析 【标题】："CSS基础教程PDF"揭示了级联样式表(Cascading Style Sheets)这一强大的网页设计工具的基础知识。在这个教程中，无论是初次接触CSS的新手还是希望提升技能的设计师，都将了解到CSS的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值