css基础（部分）

最新推荐文章于 2023-08-18 20:40:23 发布

咸鱼one

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/weixin_45921263/article/details/113469310

版权

文章目录

一.css概念
二、选择器
三、css的三种引入
四、块级元素和内联元素

一.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基础（部分）

文章目录css概念一、选择器二、使用步骤1.引入库2.读入数据总结css概念1.css的概念：层叠样式表。2.特征：一处写，处处用。一、选择器语法：选择器{属性：属性值}作用：关联html和css的一个中间枢纽类型(重点):(1)通用选择器 {属性：属性值}(2)id选择器       2-1.在开始标签写 id=属性值       2
复制链接

扫一扫