CSS

最新推荐文章于 2024-07-03 17:59:27 发布
最新推荐文章于 2024-07-03 17:59:27 发布
阅读量120 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mmaoi/article/details/107623325
版权

概念：

Cascading Style Sheets 层叠样式表

* 层叠：多个样式可以作用在同一个html的元素上，同时生效。

特点

  1. 功能强大

  2. 将内容展示和样式控制分离

  * 降低耦合度。解耦

  * 让分工协作更容易

  * 提高开发效率

CSS的使用：

1.内联样式

 * 在标签内使用style属性指定css代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- * 在标签内使用style属性指定css代码 -->
		<div style="color:red">hello css</div>
	</body>
</html>

 2.内部样式

* 在head标签内，定义style标签，style标签的标签体内容就是css代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- /*定义style标签*/ -->
		<style>
			div{
				color:blue;
			}
		</style>
	</head>
	<body>
		<!--内部样式
		* 在head标签内，定义style标签，style标签的标签体内容就是css代码
		 -->
		<div>hello css</div>
	</body>
</html>

3.外部样式

  1. 定义css资源文件。

  2. 在head标签内，定义link标签，引入外部的资源文件 

/* css01.css文件 */
div{
	color:red;
}

p{
	color:yellow;
}




<!-- 外部样式.html -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- css文件引入方法一 -->
		<link rel="stylesheet" type="text/css" href="../css/css01.css">
		<!-- css文件引入方法二 -->
		<style>
			@import url("../css/css01.css");
		</style>
	</head>
	<body>
		<!--1. 定义css资源文件。
			2. 在head标签内，定义link标签，引入外部的资源文件
		-->

		<div>外部样式</div>
		<p>引用css文件</p>
	</body>
</html>

CSS语法：

* 格式：

  选择器 {

  属性名1:属性值1;

  属性名2:属性值2;

  ...

  }

  * 选择器:筛选具有相似特征的元素

  * 注意：

  * 每一对属性需要使用；隔开，最后一对属性可以不加；

CSS选择器：

* 分类：

   基础选择器

  1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一

          * 语法：#id属性值{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div11{
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<!--  id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一

          * 语法：#id属性值{}
		-->
		<div id="div11">id选择器</div>
	</body>
</html>

 

      2. 元素选择器：选择具有相同标签名称的元素

          * 语法： 标签名称{}

          * 注意：id选择器优先级高于元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<!-- . 元素选择器：选择具有相同标签名称的元素
		        * 语法： 标签名称{}
		        * 注意：id选择器优先级高于元素选择器
		-->
		<div>元素选择器</div>
	</body>
</html>

      3. 类选择器：选择具有相同的class属性值的元素。

          * 语法：.class属性值{}

          * 注意：类选择器选择器优先级高于元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.cls1{
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<!-- .类选择器：选择具有相同的class属性值的元素。

          * 语法：.class属性值{}

          * 注意：类选择器选择器优先级高于元素选择器
		-->
		<div class="cls1">类选择器</div>
	</body>
</html>

 扩展选择器：

  1. 选择所有元素：

  * 语法： *{}

/* css02.css */
* {
	color: #FF0000;
}

<!-- 所有元素选择器.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/css02.css" />
	</head>
	<body>
		<!--选择所有元素：
				* 语法： *{}
		-->
		<h1>选择所有元素</h1>
		<p>hello css</p>
	</body>
</html>

  2. 并集选择器：

  * 选择器1,选择器2{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div , p{
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<!-- . 并集选择器：
			* 选择器1,选择器2{} 
		-->

		<div>并集选择器1</div>
		<p>并集选择器2</p>
	</body>
</html>

  3. 子选择器：筛选选择器1元素下的选择器2元素

  * 语法：  选择器1 选择器2{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div p{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<!-- 子选择器：筛选选择器1元素下的选择器2元素
			* 语法：  选择器1 选择器2{}
		-->

		<div>
			父元素
				<p>
					子元素
				</p>
		</div>
	</body>
</html>

  4. 父选择器：筛选选择器2的父元素选择器1

  * 语法：  选择器1 > 选择器2{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div > p{
                color: aqua;
            }
        </style>
    </head>
    <body>
        <!-- 父选择器：筛选选择器2的父元素选择器1
            * 语法：  选择器1 > 选择器2{} 
        -->

        <div>
            父元素
                <p>
                    子元素
                </p>
        </div>
    </body>
</html>

  5. 属性选择器：选择元素名称，属性名=属性值的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input[]submit="登陆"]{
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<!-- 属性选择器：
		语法:选择元素名称，属性名=属性值的元素 -->
		<input type="submit" value="登陆">
	</body>
</html>

6.相邻选择器

   *语法：选择器1+选择器2{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div+p{
				color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<!-- 相邻选择器
		
		   *语法：选择器1+选择器2{} 
		-->
		<div>AAAAAA</div>
		<p>BBBBBB</p>
	</body>
</html>

7.兄弟选择器

  * 语法：  选择器1~选择器2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h1~h1{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<!-- 兄弟选择器
		
		  * 语法：  选择器1~选择器2 -->
		<h1>大哥</h1>
		<h1>二哥</h1>
		<h1>小弟</h1>
	</body>
</html>

 

伪选择器 

 伪类选择器：选择一些元素据有状态

 属性值有4个：

    *:visited 被访问的链接

    *:hover鼠标悬浮的链接

    *:active 正造被访问的链接

    *:link 未访问的链接

语法：元素：状态{}

如：超链接<a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 选择所有未访问链接 */
			a:link{
				color: #0000FF;
			}
			
			/* 选择正在访问的链接 */
			a:active{
				color: #FF0000;
			}
			
			/* 选择被访问过的链接 */
			a:visited{
				color: #FF9224;
			}
			
			/* 把鼠标放在链接上的状态 */
			a:hover{
				color: #008000;
			}
			
			
		</style>
	</head>
	<body>
		<!-- 语法：元素名：状态 -->
				<a href="#">登录</a>
		<br/>
		<input type="button" name="denglu" value="登录">
		
	</body>
</html>

CSS属性 

1. 字体、文本                 

 * font：对其方式

 * line-heigh-size：字体大小
 * color：文本颜色
 * text-alignt：行高               

 2. 背景                 

* background：               

3. 边框               

 * border：设置边框，符合属性             

4. 尺寸                 

 * width：宽度               

 * height：高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			p{
				font-size: 20px;
				color: #FF0000;
				text-align: center;
				line-height: 50px;
				border:1px red solid;
				
			}
			div{
				background:url(../../img/tu.PNG) no-repeat center;
				background: ur;
				border: #0000FF;
				width: 100px;
				height: 100px;
				text-align: center;
				color: #FF0000;
			}
		</style>
	</head>
	<body>
				<p>折耳猫</p>
		<div>百转千回</div>
	</body>
</html>

CSS边距

 Margin(外边距)属性定义元素周围的空间，接受任何长度单位、百分数值甚至负值。

Padding(内边距)属性定义元素周围的空间，接受任何长度单位、百分数值甚至负值。

都有上下左右四个属性：

margin(padding)-left外（内）左边距
margin(padding)-right外（内）右边距
margin(padding)-top外（内）上边距
margin(padding)-bottom外（内）下边距

 

 

 

 

 

 

可能的值:

auto设置浏览器边距。
这样做的结果会依赖于浏览器
length定义一个固定的margin（使用像素，pt，em等）
%定义一个固定的margin（使用像素，pt，em等）

 

 

 

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				border: 1px solid red;
				background: #FF0000;
				width: 500px;
				height: 500px;
				/* 内边距 */
				padding: 30px;
			}
			.div2{
				border: 1px solid red;
				width: 300px;
				height: 300px;
				background: blue;
				/* 外边距 */
				margin: 100px;
				
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2"></div>
		</div>
	</body>
</html>

 

逆夏*光年
关注
专栏目录
CSS权重
m0_51207602的博客
02-05 4720
CSS权重 权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。 当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。 如果两个选择器同时作用到一个元素上，权重高者生效。 权重记忆口诀： 1.从0开始，一个行内样式+1000 2.一个id选择器+100 3.一个属性选择器、class或者伪类+10 4.一个元素选择
CSS——rem
qq_48613863的博客
04-09 2万+
一、移动适配 1、什么是移动适配？ 答：就是当设备宽度不同的时候，网页元素的宽度和高度都要适配。 2、移动适配的两个解决方案。 rem：目前多数企业在用的解决方案; vw / vh：未来的解决方案。 两种都必须掌握！！！ 二、rem rem是移动适配的解决方案之一； rem就是一个单位； 回想之前学的单位，px不可以自动适配；百分比只能让宽自动适配，高还是要设置固定的值。 1、rem单位 是相对单位；rem单位是相对于HTML标签的字号计算结果；1rem = 1HTML字号大小。
Css权重
weixin_55017780的博客
06-07 4581
Css的权重是指样式的优先级，当有多个样式作用于一个元素时，只有权重高的样式对元素起作用，然而当权重相同时，后写的样式会覆盖前面的样式。 在设置Css中我们如何去判断权重呢？ 权重值是可以计算的，我们可以通过样式应用方式的权重值来进行计算。 样式的应用方式的权重值如下： 内联样式，权重值为1000 ID选择器，权重值为100 类、伪类，权重值为10 标签选择器，权重为1 通过举例我们可以更清楚了解权重的作用和意义 ...
css 实现换行
最新发布
qq_33240556的博客
07-03 2183
在CSS中，实现文本内容的换行非常直接。通常情况下，文本会自动根据其容器的宽度换行，这是默认行为。
PostCSS 从入门到精通，看着一篇就够了（1）
随遇而安
04-25 2386
pos它为开发者提供了一种更精细、更灵活的方式来管理 CSS，使 CSS 代码不仅仅是简单的样式描述，而是可以通过编程手段进行动态调整和优化的资源。转换 CSS 代码的工具，它提供了一种强大的方式来处理 CSS，例如自动添加前缀、优化代码、进行样式的转换等。通过本文的介绍，我们了解了 PostCSS 的基本概念，包括插件的概念和作用，以及处理器的工作原理。它允许我们使用更高级的语法和特性来编写 CSS，然后将其转换为普通的 CSS 代码，以便在浏览器中使用。编写的工具，它可以对 CSS 代码进行转换和处理。
CSS 浮动
m0_52861684的博客
08-28 5211
CSS浮动。
CSS Reset & Modern CSS Reset
YF云飞的博客
08-01 1万+
CSS Reset & Modern CSS Reset
CSS居中方式总结
热门推荐
qq_54334713的博客
03-24 2万+
行内元素 1.和其他元素都在同一行 2.高，行高及外边距和内边距部分可以改变 3.宽度只与内容有关 4.行内元素只能容纳文本或者其他行内元素 5.a,img,input,lable,select,sapn,textarea,font 块级元素 1.总是在新行上开始，占据一整行 2.高度，行高以及外边距和内边距都课控制 3.宽度始终与浏览器的宽度一样，与内容无关 4.可以容纳行内元素和其他块级元素 5.div,p,table,form,h1,h2,h3,dl,ol,ul,li 居中方式分为三种： .
css 字体倾斜
zmyalh的博客
11-30 1818
【代码】css 字体倾斜。
jellyfin自定义css主题
Scarfskiy的博客
03-08 1万+
jellyfin自定义css主题 将以下内容复制到:控制台-常规-自定义CSS代码 /*胶片噪点,背景模糊.亮度降低*/ .backgroundContainer.withBackdrop { //把png图转成base64 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGsGlUWHRYTUw6Y29tLm
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
postcss-css-variables:PostCSS插件将CSS自定义属性（CSS变量）语法转换为静态表示形式
05-01
PostCSS CSS变量 插件可将语法转换为静态表示形式。 该插件提供了使用大多数CSS变量功能（包括选择器级联和一些警告）的一种面向未来的方式，因为它只能看到CSS，而不能看到应用CSS的潜在动态HTML和DOM。 安装 npm ...
练习：京东新闻资讯页面
Mmaoi的博客
07-22 3011
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!--h标签--> <h2>看不见的万枚硬币：细节的负担</h2> <h3>创新公司皮克斯的启...
前端开发页面设计HTML
Mmaoi的博客
07-21 1756
1.javaweb：使用java语言开发基于互联网的项目 2.软件架构 C/S架构 B/S架构:静态资源：HTML：用于搭建基础页面 CSS：用于美化页面 JavaScript：控制页面元素，让页面有一些动态的效果 动态资源： 3.HTML:超文本标记语言 超文本：用超连接的方法，将各种不同空间的文字信息组织在一起的网状文本 标记语言：有标签构成的语言。<标签名称>如html.xml 注：标记语言不是编程语言 语法： 1.html后
练习2：旅游网首页代码
Mmaoi的博客
07-22 1711
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table width="100%" align="center" > <!--第一行--> ...
ORCALE数据库基础之SQL基本查询语句
Mmaoi的博客
09-23 279
sql基本查询语句 Select语句的作用 查询指定的行 查询指定的列 多张表联合查询 Select 语句可以查询指定的行，指定的列，也可以多张表联合查询来获得数据。上面的三句话，开宗明义的定义了SQL 的基本功能，书写高效的SQL语句是我们永恒的追求，不管你是程序员还是数据库管理员。Select既是入门所必备，又是数据库之颠峰。 大写的为关键字 小写的为我们指定的名称 SELECT子句指定你所关心的列 FROM子句指定你所要查询的表 之所以称之为简易语法，因为完全的SELECT语法很长
css
05-28
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页内容样式和布局的标记语言，它可以控制网页的字体、颜色、背景、布局等外观和风格。 CSS使用选择器来选择要应用样式的元素，然后使用属性来定义这些元素的样式。例如，可以使用以下CSS代码设置所有段落的字体为14像素： ```css p { font-size: 14px; } ``` CSS属性有很多，以下是一些常见的CSS属性及其用法： - `color`：设置文本颜色； - `background-color`：设置元素背景颜色； - `font-size`：设置字体大小； - `font-family`：设置字体类型； - `text-align`：设置文本水平对齐方式； - `padding`：设置元素内边距； - `margin`：设置元素外边距； - `border`：设置元素边框； - `width`：设置元素宽度； - `height`：设置元素高度； - `display`：设置元素显示方式。 以上只是CSS的一部分内容，实际上CSS还有很多属性和技巧可以掌握。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值