认识CSS语法

CSS(网页美容)

重点:选择器、盒子模型、浮动、定位、动画,伸缩布局

Css的作用:

美化网页:CSS控制标签的样式
网页布局:CSS控制标签的位置
概念:层叠样式表(级联样式表)

书写方法

优先级:内联>内嵌>外部

  1. 内联:
<body>
	<p style="font: 15px; color: red">这是一段文字。</p>
</body>
  1. 内嵌(内部):
    就是把CSS代码写在head标签中
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		p{
		color:green
		}
	</style>
</head>
<body>
</body>
</html>
  1. 外嵌:自己新建一个单独的CSS文件,在CSS文件中不要谢style标签,直接写CSS代码就OK了
    首先自己建立一个名字为CSS的文件夹,里面存放的就是CSS样式文件

在这里插入图片描述
在这里插入图片描述
验证优先级:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!--下面p为标签选择器-->
	<style type="text/css">
		p{
			color: red;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="CSS/a.css">
</head>
<body>
	<p style="font-size: 15px; color:yellow">这是一段文字。</p>
</body>
</html>

结果:
在这里插入图片描述
优先级:内联>内嵌>外部
优先级:内联>内嵌>外部
优先级:内联>内嵌>外部。重要事情说三遍。

CSS语法

选择器{属性:值;。。。。}
例如:p{font:15px;color:red;}

选择器分类
一、基础选择器
1. 标签选择器
Html的标签名可以设置为样式的标签

p{
			color: red;
		}

2. 类选择器
. 自定义类名:{class属性:值;}

一个类样式可以被多个标签同时调用

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!--下面p为标签选择器-->
	<style type="text/css">
	/*类样式的定义*/
		.test{
			color: red;
			font-size: 30px;
		}
	</style>
	
</head>
<body>
	<!--类样式调用-->
	<p class="test">Hello</p>
	<p class="test">Hello2</p>
</body>
</html>

在这里插入图片描述
特点:多个lclass属性的值可以重复,就像人一样,名字可能会相同的
一个标签可以同时调用多个类样式

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	/*类样式的定义*/
		.test{
			font-size:55px;
		}
		.test1{
			color: red;
		}
	</style>	
</head>
<body>
	<!--类样式调用-->
	<p class="test test1">Hello</p>	
</body>
</html>

3. ID选择器
#id选择器{属性:值}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!--下面p为标签选择器-->
	<style type="text/css">
	/*类样式的定义*/
		#test{
			color: red;
			font-size: 30px;
		}
	</style>
	
</head>
<body>
	<!--类样式调用-->
	<p id="test">Hello</p>
</body>
</html>

特点:ID的值是唯一的,不能重复,就跟人的身份证一样都是唯一的。

4. 通配符选择器
语法:
* {属性: 值;…}
特点:
将页面中所有的标签都选中

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	*{
		height:200px;
		width: 200px;
		border: 1px solid red;	
	}
	</style>	
</head>
<body>
	<div class="c1"></div>
	<div class="c2"></div>
	<div class="c3"></div>
</body>
</html>

规范:不能使用特殊字符或者以特殊字符开头($,#,@,%…) 建议不推荐使用标签名作为类名

补充:px像素
em:一个文字的大小
颜色的表示方式
red,green…
rgb(三原色)
使用十六进制标表示颜色(#000-fff)
文本修饰
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	p{
text-shadow: 0px 0px 10px green;
	}
</style>
	
</head>
<body>
	<p>
		文本修饰
	</p>
</body>
</html>

第一个值可以设置正数或者负数,设置文字阴影在水平方向的一个偏移量
第二个值可以设置正数或者负数,设置文字阴影在垂直方向的偏移量
第三个值代表的是文字阴影的模糊度, 不能设置负数
第四个值代表文字阴影的颜色。

同时可以设置多个阴影,用逗号隔开

font属性介绍

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	p{
font-family: "宋体";
font-size: 20px;
font-weight:bold;
font-style:normal;
line-height: 20px;
	}
</style>
	
</head>
<body>
	<p>
		aaaaaaaaaaaaaaaaaaaaaaaaaaa
	</p>
</body>
</html>

font-size:设置文字的大小
font-family:设置文字字体(宋体,黑体,微软雅黑等等)
font-family是可以设置若干个字体的。一本使用常用字体设置
font-weight:设置字体是否加粗
值为normal或 bold
font-style:文字是否斜体
值:noema或 italic
line-height:文字行高,改变文字之间的上下间距
font属性联写,也算代码简化的一种方式

<style type="text/css">
	p{
		font:italic 700 12px/24px "宋体";
		 }	
</style>

p{font-style font-weight font-size/line-height font-family}
注意:
1、顺序不能改变;
2、简写为一行的时候,font-size和line-height直接一样要用斜杠/,不能分开写;
3、没有赋值的属性,会自动使用默认值;
4.必须设置font-size 和font-family,font-size设置在font-family之前

二、复合选择器(交集选择器)
1. 后代选择器

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div p{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	font:italic 700 20px/20px "宋体";
	}
}
</style>
	
</head>
<body>
<div>
	<p>A</p>
	<p>B</p>
</div>
</body>
</html>

注意:后代标签其之间的结果后关系必须是嵌套关系
后代选择器中只能选中所有的后代元素(直接子元素和间接子元素)
后代选择器中,选择器与选择器之间必须使用空格隔开

2. 子代选择器
选择器>选择器 {属性: 值;}

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div>span{
	color: red;
}

</style>
	
</head>
<body>
<div>
	<span>a</span>
</div>
</body>
</html>

注意;
子代选择器只能选中直接子元素
子代选择器不能选中父元素
子代选择器标签的结构必须是嵌套结构
3. 并集选择器

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div,p,li,span{
	color: green;
}

</style>
</head>
<body>
<div>
	<div></div>
	<p></p>
	<li></li>
	<span></span>
</div>
</body>
</html>

4. 属性选择器

标签[标签属性]{样式}

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a[href]{
	color: red;
}

</style>
</head>
<body>
<div>
	<a href="www.baidu.com">百度</a>
</div>
</body>
</html>

5. 结构伪类选择器
使用方法:选择器:伪元素{样式}
:first-child {属性: 值;} 选中父元素中的第一个子元素
:last-child {属性: 值;} 选中父元素中最后一个子元素
:nth-child(n) {属性: 值; } 选中父元素中第n个子元素
n可以设置一个关键字 odd(奇数个数) | even(偶数个数)
n可以是一个表达式 an+b a和b可以设置正数和负数
:nth-last-child(n){属性: 值;} 选中倒数第n个子元素

6. 标签制定式选择器
我觉得叫标签类选择器好。直接
标签名.类名{属性:值;}

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	p.a1{
		font-size: 20px;
		color: red;
	}
	p.b1{
		font-size: 30px;
		color: green;
	}
</style>
	
</head>
<body>
	<p class="a1">
		aaaaaaaaaa
	</p>
	<p class="b1">
		bbbbbbbbbbbbbbb
	</p>
</body>
</html>

在这里插入图片描述

下面是常见的属性
图片来源于网络

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/902271.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux | Rsync 命令:16 个实际示例(下)

引言 Rsync&#xff08;远程同步&#xff09;是Linux/Unix系统中用于远程和本地复制及同步文件和目录的常用工具。 利用rsync命令&#xff0c;您可以轻松地在不同目录、硬盘和网络之间进行数据的远程和本地复制与同步&#xff0c;进行数据备份&#xff0c;以及在两台Linux系统间…

【正点原子K210连载】第四十八章 自学习分类实验 摘自【正点原子】DNK210使用指南-CanMV版指南

第四十八章 自学习分类实验 在上一章节中&#xff0c;介绍了利用maix.KPU模块实现了MNIST的手写数据识别&#xff0c;本章将继续介绍利用maix.KPU模块实现的自学习分类。通过本章的学习&#xff0c;读者将学习到自学习分类应用在CanMV上的实现。 本章分为如下几个小节&#xf…

维乐Senso Edge坐垫,自然并不远,向往就前往

嘿&#xff0c;是不是已经厌倦了城市的钢筋森林&#xff0c;渴望一场说走就走的自然之旅&#xff1f;别急&#xff0c;维乐Senso Edge坐垫带你飞&#xff0c;让我们的车轮一起碾过每一寸向往的土地&#xff01;    追逐风&#xff0c;拥抱自然。你还记得第一次骑行时的那份…

【功能安全】 独立于环境的安全要素SEooC

目录 01 SEooC定义 02 SEooC开发步骤 03 SEooC开发示例 04 SEooC问答 01 SEooC定义 缩写: SEooC:Safety Element out of Context独立于环境的安全要素 SEooC出处:GB/T34590.10—2022,第9章节 SEooC与相关项什么关系? SEooC可以是系统、系统组合、子系统、软件组件、…

Linux 系统中,将网络配置从 DHCP 改为静态 IP的几种方法

Linux 系统中&#xff0c;将网络配置从 DHCP 改为静态 IP 可以通过几种不同的方法来实现&#xff0c;下面是几种常见的方式&#xff1a; 方法一&#xff1a;使用 connman&#xff08;Connection Manager&#xff09; 如果你已经在使用 connman 管理网络&#xff0c;可以通过修…

MATLAB实现遗传算法优化零件拆卸装配问题

零件拆卸装配问题是一个有复杂约束的优化问题&#xff0c;它涉及到零件之间的连接关系、拆卸或装配的顺序、工具的使用、操作成本。 1.假设&#xff1a; &#xff08;1&#xff09;零件完整性&#xff1a;每个零件在拆卸和装配过程中保持完整&#xff0c;不发生形变或损坏 &…

MATLAB生物细胞瞬态滞后随机建模定量分析

&#x1f3af;要点 基于随机动态行为受化学主方程控制&#xff0c;定量分析单细胞瞬态效应。确定性常微分方程描述双稳态和滞后现象。通过随机性偏微分方程描述出暂时性滞后会逐渐达到平稳状态&#xff0c;并利用熵方法或截断方法计算平衡收敛速度的估计值。随机定量分析模型使…

软考中级嵌入式系统设计师笔记分享(二)

1.TTL 电路是电流控制器件&#xff0c;而CMOS 电路是电压控制器件。 2.TTL 电路的速度快&#xff0c;传输延迟时间短(5-10ns)&#xff0c;但是功耗大。 常见的串行总线有 SPI、II2C、USB、RS232/RS422/RS485、CAN等;高速串行总线主要有 SATA、PCIE、IEEE 1394、Rapidl0、USB 3…

鸿蒙UI开发——基于全屏方案实现沉浸式界面

1、概 述 典型应用全屏窗口UI元素包括状态栏、应用界面和底部导航条。 其中状态栏和导航条&#xff0c;通常在沉浸式布局下称为避让区&#xff0c;避让区之外的区域称为安全区。 开发应用沉浸式效果主要指&#xff1a;通过调整状态栏、应用界面和导航条的显示效果来减少状态…

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-21

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-21 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-21目录1. The Fair Language Model Paradox摘要研究背景问题与挑战如何解决创新点算法模型实验效果重要数据与结论推荐阅读指数&…

stable-zero123模型构建指南

一、介绍 stabilityai出品&#xff0c;能够对有简单背景的物体进行三维视角图片的生成&#xff0c;简单来说也就是通过调整变换观察的视角生成对应视角的图片。 本项目通过comfyui实现。 二、容器构建说明 1. 部署ComfyUI &#xff08;1&#xff09;使用命令克隆ComfyUI g…

6,000 个网站上的假 WordPress 插件提示用户安装恶意软件

黑客使用窃取的凭证感染 WordPress 网站&#xff0c;并向其发送虚假插件&#xff0c;通过虚假的浏览器更新提示向最终用户发送恶意软件和信息窃取程序。 该恶意活动基于ClickFix假浏览器更新恶意软件的新变种&#xff0c;自 2024 年 6 月以来已使用假 WordPress 插件感染了超过…

C++ 模板编程:解锁高效编程的神秘密码

快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 目录 &#x1f4af;前言 &#x1f4af;泛型编程 &#x1f4af;函数模板 1.函数模板概念 2.函数模板格式 3.函数模板的原理 4.函数模板的实例化 5.模板参…

社交媒体视频素材平台推荐

在内容创作日益重要的今天&#xff0c;社交媒体视频素材的需求不断增加。适合各种平台的视频素材不仅可以提升内容质量&#xff0c;还能吸引更多观众。以下是一些推荐的社交媒体视频素材平台&#xff0c;帮助你找到适合的资源。 蛙学网 蛙学网 是一个专注于社交媒体视频素材的平…

C# 标准绘图控件 chart 多 Y 值的编程应用

C# 标准绘图控件 chart 多 Y 值的编程应用 1、前言2、声明标准绘图控件 chart 命名空间3、使用绘图控件 chart3.1、在窗体中拖入绘图控件 chart &#xff0c;拖入绘图控件 chart 最简单实用。3.2、在语句中声明加入&#xff0c;但要将 控件和其组件加入窗体或其它容器很麻烦&am…

2025 - AI人工智能药物设计 - 中药网络药理学和毒理学的研究

中药网络药理学和毒理学的研究 TCMSP&#xff1a;https://old.tcmsp-e.com/tcmsp.php 然后去pubchem选择&#xff1a;输入Molecule Name 然后进行匹配&#xff1a;得到了smiles 再次通过smiles&#xff1a;COC1C(CC(C2C1OC(CC2O)C3CCCCC3)O)O 然后再次输入&#xff1a;http…

尚硅谷-react教程-求和案例-数据共享(下篇)-完成数据共享-笔记

#1024程序员节&#xff5c;征文# public/index.html <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>redux</title></head><body><div id"root"></div></body> </html&…

Vuex的基础

文章目录 vuex概述构建vuex[多组件数据共享]环境创建一个空仓库ps.创建仓库时遇到的错误 核心概念 - state状态核心概念 - mutations辅助函数 - mapMutations 核心概念 - actions辅助函数 - mapActions 核心概念 - getters核心概念 - 模块module&#xff08;进阶语法&#xff0…

Python(pandas库2)

DateFrame的添加 上文中DateFrame的增加中&#xff0c;因版本弃置append函数 如果你想要向 DataFrame 添加一行&#xff0c;建议的方法是首先创建一个新的 DataFrame 来表示这行数据&#xff0c;然后使用 pd.concat() 函数来合并它们。 concat 语法&#xff1a; objs: 要连…

基于协同过滤算法的个性化课程推荐系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…