CSS

最新推荐文章于 2022-11-25 14:52:08 发布

还要学习呀

最新推荐文章于 2022-11-25 14:52:08 发布

阅读量103

点赞数 2

分类专栏：视频学习总结文章标签： CSS

本文链接：https://blog.csdn.net/aizelasijinghua/article/details/89433785

版权

视频学习总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.css简介

css:层叠样式表；将网页内容和显示样式进行分离，能让页面显示效果更好。

2.css和html的结合方式（四种结合方式）

（1）在每个html标签上面都有一个属性style，把css和html结合注：属性名称与使用名之间用“：”隔开，属性与属性之间用”；“隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一个网页</title>
	</head>
	<body>
		<div style="background-color:red;color:green;">想表达的内容</div>
	</body>
</html>

(2)使用html的一个标签实现


    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>一个网页</title>
    		<style type="text/css">
    				div{
    				background-color:red;
    				color:green; 
    				}
    		</style>
    	</head>
    	<body>
    		<div>想表达的内容</div>
    	</body>
    </html>

(3)在style标签里面使用语句
@import url(css文件的路径)
-第一步：创建一个css文件
-第二步：在css文件中书写对div的操作

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>一个网页</title>
    		<style type="text/css">
    		{
    				@import url(div.css)
    				}
    		</style>
    	</head>
    	<body>
    		<div>想表达的内容</div>
    	</body>
    </html>
    /*CSS文件*/
div{
    				background-color:red;
    				color:green; 
    				}

(4)使用头标签link,引入外部css文件
-

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>一个网页</title>
    	<link rel="stylesheet" type="text/css" href="css文件的路径"/>
    	</head>
    	<body>
    		<div>想表达的内容</div>
    	</body>
    </html>
    /*CSS文件*/
div{
    				background-color:red;
    				color:green; 
    				}

注意：第三种结合方式在某些老版本浏览器不起作用，一般使用第四种结合方式。

3.css的基本选择器

选择器：要对哪个标签里面的数据进行操作哦，那个标签即为选择器
（1）标签选择器
使用标签名作为选择器的名称
(2) class（类）选择器
每个html标签都有一个属性 class .名称

 
	例1：你只想改变其中一个div的属性而不改变另一个：
   <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>一个网页</title>
    		<style type="text/css">
    				div.aaa{
    				background-color:red;
    				color:green; 
    				}
    		</style>
    	</head>
    	<body>
    		<div calss="aaa">想表达的内容</div>
    		<div>想表达的内容</div>
    	</body>
    </html>
   例2 div与p的class相同并且这两个背景颜色、字体颜色等相同,此时可简写为：
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>一个网页</title>
    		<style type="text/css">
    				.aaa{
    				background-color:red;
    				color:green; 
    				}
    		</style>
    	</head>
    	<body>
    		<div calss="aaa">想表达的内容</div>
    		<p class="aaa">想表达的内容</p>
    	</body>
    </html>

(3)id选择器
#名称
每个html标签上面都有一个属性id，用法与class类似，不同之处在于div.aaa要0改成div#aaa，.aaa改成#aaa

PS:优先级：style>id选择器>class选择器>标签选择器

4.CSS扩展选择器

（1）关联选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css演示</title>
		<style>
			/*此时我想只改变div标签里的p标签的属性*/
			div p{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div><p>关联选择器</p></div>
		<p>aaaaaaaaaaaaaaaaaaaa</p>
	</body>
</html>

（2）组合选择器
把不同的标签设置成相同的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css组合选择器演示</title>
		<style>
			/*此时我想同时让div和p标签的属性改变*/
			div,p{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>组合选择器</div>
		<p>aaaaaaaaaaaaaaaaaaaa</p>
	</body>
</html>

（3）伪元素选择器
css里面定义好的样式，可直接使用，具体查css使用手册

5.css的盒子模型

网页布局现在基本都是div+css来布局
（1）边框
*border(统一设置，下面为分开设置)：
**上：border-top
**下：border-buttom
**左：border-left
**右：border-right
（2）内边距
**padding（可统一设置，也可分开设置）
上：padding-top 下：…(同上)
（3）外边距
*margin(可统一设置，也可分开设置)
**上：margin-top 下：…（同上）

6.css的布局定位属性

position
**属性值
-absolute：将对象从文档流拖出去，后面对象补充上去，可使用top、bottom、left、right等属性进行定位
-relative：不会把对象从文档流拖出去，可使用top、bottom、left、right等属性进行定位

还要学习呀

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

1.css简介 css:层叠样式表；将网页内容和显示样式进行分离，能让页面显示效果更好。2.css和html的结合方式（四种结合方式）（1）在每个html标签上面都有一个属性style，吧css和html结合<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <ti...
复制链接

扫一扫