css基础（部分）

最新推荐文章于 2023-08-18 20:40:23 发布
最新推荐文章于 2023-08-18 20:40:23 发布
阅读量109 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45921263/article/details/113469310
版权

文章目录

一.css概念

1.css的概念：层叠样式表。
2.特征：一处写，处处用。

二、选择器

1. 语法：选择器{属性：属性值}
2. 作用：关联html和css的一个中间枢纽
3. 类型(重点):

(1)通用选择器 {属性：属性值}
(2)id选择器
       2-1.在开始标签写 id=属性值
       2-2.在style当中,id找#号,在加属性值
       2-3.id选择器具有唯一性.
       2-4.!important可以提高属性的级别/
(3)类选择器/class选择器
       3-1.在开始标签写 class=属性值
       3-2.在style当中,class找.号,在加属性值
       3-3.class选择器具有多重性.*/

4. 示例:代码：

<style>
		/* 1.通用选择器 * */
		*{text-align: center;font-size: 50px;font-family: 宋体;}
		p{color: #FF0000;}
		/*2. id选择器 
		#id_p1{font-style: italic;color: #B0B0B0;}
		/* 3.class选择器 */
		.class_p1{font-size: 30px;text-align: left;}
		.class_p2{font-family: 微软雅黑;color: #FFA500;}
	</style>
		<p id="id_p1">千锤万凿出深山,</p>
		<p>烈火焚烧若等闲.</p>
		<p class="class_p1 class_p2">粉身碎骨浑不怕,</p>
		<p>要留清白在人间.</p>

三、css的三种引入

1.三种引入概念及写法

(1)内联：在标签内部写style标签然后逐一写样式
(2)内部写法：在head标签中先写style标签 然后在逐一写样式
(3)外部：一般把写好的样式放在css文件夹中,通过link外部引入即可

2.执行顺序（权重）

2-1.一般情况下，执行**就近原则**
2-2.如果想将某个样式级别提至最高。执行该样式的属性：!important

3.代码:示例

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- link是外部引入css样式的关键词 -->
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
	<style>
		p{color: red;}
	</style>	
	</head>
	<body>	
	<p>我是段落标签呀！</p>
	<font style="color: #ff55ff;font-size: 20px;font-weight: bold;">我是文本标签</font>
	<i>我是倾斜标签哈嘿</i>
	<style>
		b{color:yellow !important;}
	</style>
	<b style="color: orange !important;">我到底是执行哪个颜色？？？？</b>
	</body>

四、块级元素和内联元素

1. 两者之间的转化：

块级：block         内联：inline
(1)块级->内联：display:inline
     块级特点：可以设置宽高，独占一行进行显示
(2)内联->块级：display:block
     内联特点：排队显示，宽高由内容决定
(3)块级内联：display:inline-block
     特点：既可以排队显示，又可以设置宽高

2.代码：示例

<style type="text/css">
		#box{
			width: 400px;
			height: 160px;
			border: 1px solid red;
			margin: 0 auto;
		}
		img{
			width: 100px;
			height:150px;
			border: 1px solid red;
		}
		.box1,.box2{
			display: inline-block;
		}
	</style>
	<body>
		<div id="box">
			<div class="box1">
				<img src="img/方世玉.jpg" >
			</div>
			<div class="box2">
				<img src="img/巨鄂.jpg" >
			</div>	
		</div>
	</body>

（注：display:inline-block和display:block是使用最频繁）

咸鱼one
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS基础（一）
weixin_41684068的博客
06-24 121
CSS基础（一） 1、CSS简介 CSS Cascading Style Sheets 层叠样式表 2、CSS的三种引入方式 2.1 行内式（内联样式） <div style="width: 200px;height: 200px;background-color: green;"></div> 特点： 1、样式都在标签内； 2、代码冗余；（同一个网页很有可能会有相同的css样式，如果每一个标签的相同样式都写的话，会导致代码重复率很高。从实际应用中
css基础
tom199611的博客
11-20 177
层级 .box1 div .box1 .box2 组选择 .box01,.box02,.box03{ font-size:20px; text-indent:40px; } class = box01,or.box02,or.box03 全部选择到 伪类选择器： 标签之前 鼠标悬停 hover 标签之后 <style> a{ ...
CSS基础知识总结
Lotus_fragrance的博客
04-29 3282
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础 知识点总结
星星之火的语言c学习
08-18 2661
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
css 入门基础教程
09-25
这段CSS代码应该放置在HTML文档的`<head>`部分的`<style>`标签内，或者作为外部样式表引用。在HTML中，对应的段落标签`<p>`将会应用这些样式： ```html <style type="text/css"> p { color: red; text-align:...
css滤镜基础教程
10-30
CSS滤镜基础教程 在网页设计领域，CSS滤镜是一种强大的技术，允许开发者为HTML元素添加视觉特效，如模糊、渐变、颜色调整等。随着技术的不断发展，设计师们已经不再满足于静态的网页，他们希望通过动态效果提升用户...
css基础代码
07-02
### CSS基础代码详解 #### CSS入门精要：掌握核心概念与实践技巧 **CSS（Cascading Style Sheets）**，即层叠样式表，是一种用于描述网页文档（如HTML或XML）外观和格式的标记语言。它使得网页设计更加灵活、高效...
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
1.03 CSS基础（）
10-07
CSS 基础知识点 CSS（层叠样式表）是一种用于为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。它能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式...
pillow-10.4.0-pp39-pypy39_pp73-macosx_11_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp35-cp35m-macosx_10_9_x86_64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp39-cp39-musllinux_1_2_x86_64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
1250KVA本体基础图11
07-27
1250KVA本体基础图11
毕业设计之网上订餐系统.zip
07-27
毕业设计之网上订餐系统.zip
pillow-10.4.0-cp39-cp39-win32.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp39-cp39-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp311-cp311-win_amd64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pi_heif-0.17.0-cp311-cp311-musllinux_1_2_aarch64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值