• 5、CSS——三种样式和样式优先级、CSS中颜色设置方式、标签选择器和基本选择器的优先级

    目录

    一、行内样式

    二、内部样式 

    三、外部样式 

    1、创建外部样式步骤

    2、引入外部样式的两种方式

    2.1  第一种

    2.2  第二种

    3、style标签内的注释符号 

    四、样式优先级 

    五、CSS中颜色设置方式

    1、使用颜色的英文单词

    2、使用十六进制表示法 

    3、使用rgb()表示法 

    4、使用rgba()表示法 

    六、标签选择器

    1、为什么需要标签选择器?

     2、标签选择器

    3、class选择器：内选择器 

    4、id选择器 

    七、基本选择器的优先级 

    一、行内样式

    行内样式：在标签内使用style属性设置样式

            style属性值中可以设置多个不同的样式

                    style的属性值称为声明：属性:属性值;

    行内样式的弊端：

    （1）样式与内容混合在一起，没有实现分离；

    （2）很多相同标签的样式相同，样式代码会重复写

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>行内样式title>
    6. 	head>
    7. 	<body>
    8. 		<h2 style="color: red;font-size: 100px; text-align: center;">登高h2>
    9. 		<p style="color: green;text-align: center;">风急天高猿啸哀，渚清沙白鸟飞回。p>
    10. 		<p style="color: green;text-align: center;">无边落木萧萧下，不尽长江滚滚来。p>
    11. 		<p style="color: green;text-align: center;">万里悲秋常作客，百年多病独登台。p>
    12. 		<p style="color: green;text-align: center;">艰难苦恨繁霜鬓，潦倒新停浊酒杯。p>
    13. 	body>
    14. html>

    二、内部样式 

    内部样式：在网页的head标签内写一个style标签，在style标签内编写样式，使用标签来确定样式设置的对象，然后再写样式代码

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>内部样式title>
    6. 		<style>
    7. 			/*h2、p等其他标签，表示你要给谁设置样式*/
    8. 			/*color：red;称之为声明，color称之为属性名，冒号（：）后面的称之为属性值*/
    9. 			h2{
    10. 				color: red;
    11. 				text-align: center;
    12. 				font-size: 100px;
    13. 			}
    14. 			
    15. 			p{
    16. 				color: green;
    17. 				text-align: center;
    18. 			}
    19. 		style>
    20. 	head>
    21. 	<body>
    22. 		<h2>悯农h2>
    23. 		<p>春种一粒粟p>
    24. 		<p>秋收万颗子p>
    25. 		<p>四海无闲田p>
    26. 		<p>农民犹饿死p>
    27. 	body>
    28. html>

    三、外部样式 

    当多个网页需要用到相同的样式时；可通过设置外部样式进行引用

    1、创建外部样式步骤

    在项目中创建个CSS文件夹，在CSS文件夹中创建CSS文件；

    不需要写style标签，直接写要设置的样式。 

    2、引入外部样式的两种方式

    2.1  第一种

    在head标签内创建style标签，通过

    @import url("文件地址");

    引入

    2.2  第二种

     在head标签内创建style标签，通过link标签获取

    1. h2{
    2. 	color: red;
    3. 	font-size: 100px;
    4. 	text-align: center;
    5. }
    6.  
    7. p{
    8. 	color: green;
    9. 	text-align: center;
    10. }
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>外部样式title>
    6. 		<style>
    7. 			@import url("css/Mystyle.css");
    8. 		style>
    9. 	head>
    10. 	<body>
    11. 		<h2>宿洞霄宫h2>
    12. 		<p>秋山不可尽，秋思亦无垠。p>
    13. 		<p>碧涧流红叶，青林点白云。p>
    14. 		<p>凉阴一鸟下，落日乱蝉分。p>
    15. 		<p>此夜芭蕉雨，何人枕上闻。p>
    16. 	body>
    17. html>
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>外部样式title>
    6. 		<link rel="stylesheet" type="text/css" href="css/Mystyle.css"/>
    7. 	head>
    8. 	<body>
    9. 		<h2>宿洞霄宫h2>
    10. 		<p>秋山不可尽，秋思亦无垠。p>
    11. 		<p>碧涧流红叶，青林点白云。p>
    12. 		<p>凉阴一鸟下，落日乱蝉分。p>
    13. 		<p>此夜芭蕉雨，何人枕上闻。p>
    14. 	body>
    15. html>

    3、style标签内的注释符号 

    style标签内的注释：/*注释*/

    四、样式优先级 

    1. p{
    2. 	color: blue;
    3. }
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>样式优先级title>
    6. 		<style>
    7. 			p{
    8. 				color: green;
    9. 			}
    10. 		style>
    11. 		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
    12. 	head>
    13. 	<body>
    14. 		<p style="color: red;">样式优先级p>
    15. 	body>
    16. html>

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>样式优先级title>
    6. 		<style>
    7. 			p{
    8. 				color: green;
    9. 			}
    10. 		style>
    11. 		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
    12. 	head>
    13. 	<body>
    14. 		<p>样式优先级p>
    15. 	body>
    16. html>

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>样式优先级title>
    6. 		
    7. 		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
    8. 		
    9. 		<style>
    10. 			p{
    11. 				color: green;
    12. 			}
    13. 		style>
    14. 	head>
    15. 	<body>
    16. 		<p>样式优先级p>
    17. 	body>
    18. html>

     

     样式优先级：就近原则，哪种样式离得近，显示哪种样式。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>样式优先级title>
    6. 		
    7. 		<style>
    8. 			p{
    9. 				color: green !important;
    10. 			}
    11. 		style>
    12. 		
    13. 		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
    14. 	head>
    15. 	<body>
    16. 		<p style="color: red;">样式优先级p>
    17. 	body>
    18. html>

    无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。

    五、CSS中颜色设置方式

    1、使用颜色的英文单词

    表示颜色的种类比较少

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>颜色设置方式一title>
    6. 		
    7. 		<style>
    8. 			p{
    9. 				color: red;
    10. 			}
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		<p>设置颜色p>
    15. 	body>
    16. html>

    2、使用十六进制表示法 

    最常用的颜色表示法

    在#后面写6个十六进制数字

    十六进制数字有0 1 2 3 4 5 6 7 8 9 A B C D E F

    六个十六进制数如果两两相同，可以简写成三个

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>颜色设置方式二title>
    6. 		
    7. 		<style>
    8. 			p{
    9. 				color: #FF0000;
    10. 			}
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		<p>颜色设置方式二：十六进制表示法p>
    15. 	body>
    16. html>

    3、使用rgb()表示法 

    rgb(数字1，数字2，数字3)，每一个数字的范围0-255

    数字1：红色

    数字2：绿色

    数字3：蓝色

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>颜色设置方式三title>
    6. 		<style>
    7. 			p{
    8. 				color: rgb(0,0,255);
    9. 			}
    10. 		style>
    11. 	head>
    12. 	<body>
    13. 		<p>颜色设置方式三:rgb()表示法p>
    14. 	body>
    15. html>

    4、使用rgba()表示法 

    rgb(数字1，数字2，数字3，数字4)，前面三个数字表示颜色，范围0-255；最后一个数字表示透明度，范围（0-1）之间的小数

    数字1：红色

    数字2：绿色

    数字3：蓝色

    数字4：透明度

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>颜色设置方式三title>
    6. 		
    7. 		<style>
    8. 			p{
    9. 				color: rgba(255,0,0,0.5);
    10. 			}
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		<p>颜色设置方式四:rgba()表示法p>
    15. 	body>
    16. html>

    六、标签选择器

    1、为什么需要标签选择器?

    因为要个某个标签中的内容设置样式；首先需要找到这个内容所在的标签。

     2、标签选择器

    根据标签的名称来找，也就是所谓的标签选择器，使用标签选择器会将网页中所有相同点的标签设置相同的样式

    3、class选择器：内选择器 

    根据类选择器来找，在标签中可以通过class属性来选择样式 

    类选择器使用（.）开头，其他的样式声明不变

    类选择器可以被不同的标签重复使用

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>标签选择器title>
    6. 		<style>
    7. 			.h2color{
    8. 				color: red;
    9. 			}
    10. 			.pcolor{
    11. 				color: green;
    12. 			}
    13. 		style>
    14. 	head>
    15. 	<body>
    16. 		<h2 class="h2color">无题·重帏深下莫愁堂h2>
    17. 		<p class="pcolor">重帏深下莫愁堂，卧后清宵细细长。p>
    18. 		<p class="pcolor">神女生涯原是梦，小姑居处本无郎。p>
    19. 		<p class="pcolor">风波不信菱枝弱，月露谁教桂叶香。p>
    20. 		<p class="pcolor">直道相思了无益，未妨惆怅是清狂。p>
    21. 	body>
    22. html>

    4、id选择器 

    在标签中可以使用id属性来选择样式，id选择器使用（#）开头，其他的样式声明不变，

    id选择器具有唯一性，只被一个标签使用，且只能使用一次，尤其是在js中

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>id选择器title>
    6. 		<style>
    7. 			#red{
    8. 				color: red;
    9. 			}
    10. 			
    11. 			#green{
    12. 				color: green;
    13. 			}
    14. 			
    15. 			#yellow{
    16. 				color: yellow;
    17. 			}
    18. 		style>
    19. 	head>
    20. 	<body>
    21. 		<h2 id="red">逍遥叹h2>
    22. 		<p id="green">岁月难得沉默p>
    23. 		<p id="yellow">秋风厌倦漂泊p>
    24. 		<p>夕阳赖着不走p>
    25. 		<p>挂在墙头舍不得我p>
    26. 	body>
    27. html>

    七、基本选择器的优先级 

    行内样式>id选择器>class选择器>标签选择器

    当基本选择器共存时，会实现样式中的其他声明。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>基本选择器的优先级title>
    6. 		<style>
    7. 			p{
    8. 				color: red;
    9. 			}
    10. 			
    11. 			.green{
    12. 				color: green;
    13. 				background-color: aliceblue;
    14. 			}
    15. 			#blue{
    16. 				color: blue;
    17. 			}
    18. 			
    19. 		style>
    20. 	head>
    21. 	<body>
    22. 		<p class="green" id="blue">基本选择器的优先级p>
    23. 	body>
    24. html>

  • 相关阅读:
    uni-app前端H5页面底部内容被tabbar遮挡
    数据结构·顺序表
    【边缘计算网关教程】6.松下 Mewtocol TCP 协议
    C++：从初识到初识的旅程
    使用 Spring Cloud Loadbalancer 实现客户端负载均衡
    Integer缓存池知道吗？
    js截取图片地址后面的参数和在路径中截取文件名或后缀名
    linux top——COMMAND-LINE Options
    数据特征工程 | Python实现CatBoost特征处理及选择
    idea和jdk安装与配置
  • 原文地址：https://blog.csdn.net/CSDN_Loveletter/article/details/127903704