3.3css层叠样式之简介

最新推荐文章于 2022-02-26 16:11:46 发布

不戴眼镜的眼镜男

最新推荐文章于 2022-02-26 16:11:46 发布

阅读量193

点赞数

分类专栏：前端文章标签： css层叠样式之简介

本文链接：https://blog.csdn.net/BossHAO/article/details/100994934

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

3.3css层叠样式之简介

描述：CSS简介
1.引入CSS样式
1.1 如果不使用CSS样式，HTML网页不美观。
例如：编写一个table标签，对行高列宽进行设置，如果不设置，table很难看
可以自己增加一些背景颜色，也可以对上传的图片进行大小更改
1.2 HTML当中，使用标签的属性来更改样式，后续维护会比较麻烦
例如: tr — 针对行设置行高，一个表格当中有十行，分别对行的行高进行设置

tr{
heigth:50px;
}
2.CSS的含义是什么？作用是什么？
CSS（Cascading Style Sheets）：名称 --层叠样式表
为了美化HTML
3.CSS引入的方式
3.1 行内式
直接在标签内部，编写CSS样式
例如：

你现在的努力，是为了以后有更多的选择.

特点： 1.相对于其他CSS引入的方式，优先级比较高！
原因：浏览器在对该网页进行解析时，是从上到下进行解析！

    2. HTML网页代码和CSS代码混合在一起，容易造成代码冗余
  3.2 内嵌式
          在head标签内，编写style
          例如： <style type="text/css">
    	p{
    		color: green;
    	}
            </style>
        特点： 1.HTML网页标签和CSS样式，进行了一些分离！
          		   2.在做测试时，经常使用的方式。
3.3 外联式 
          在HTML网页之外，编写css样式
         例如： <link rel="stylesheet" href="css/引入层叠样式表.css" />

4.CSS样式表执行的顺序
遵循：就近原则 (谁挨着标签进，执行谁的CSS样式)
例如：把内嵌式和外联式的顺序，更改一次，会发现谁挨着标签内，执行谁的CSS样式
5.CSS样式—存在很多的选择器
标签选择器 tr{}
类选择 .类名称{}
id选择器 #id的名字{}
伪类选择器 a:hover{}
后台选择器
p span{}
p > span{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <!--外联式-->
	    <link rel="stylesheet" href="css/引入层叠样式表.css" />
		<!--内嵌式-->
	    <style type="text/css">
	    	p{
	    		color: green;
	    	}
	    </style>
	   
	</head>
	<body>
		<!--行内式-->
		<p style="font-family:'黑体';">
			你现在的努力，是为了以后有更多的选择.
		</p>
	</body>

不戴眼镜的眼镜男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.3css层叠样式之简介

3.3css层叠样式之简介描述：CSS简介1.引入CSS样式1.1 如果不使用CSS样式，HTML网页不美观。例如：编写一个table标签，对行高列宽进行设置，如果不设置，table很难看可以自己增加一些背景颜色，也可以对上传的图片进行大小更改1.2 HTML当中，使用标签的属性来更改样式，后续维护会比较麻烦例如: tr — 针对行设置行高，一个表格当中有十行，分别对行的行高进行...
复制链接

扫一扫