0
点赞
收藏
分享

微信扫一扫

CSS详细解析二

野见 2023-10-19 阅读 38

CSS

概述

  • 与 html 配合,实现内容与样式分离
  • 样式
  • 美化

使用方法

属性

属性作用
font-size控制文字字号大小
color控制文字的颜色
font-family设置文字的字体
txt-align控制文字的对齐方式 left / center / right(相对于父元素的位置)

直接引用

  • 可以直接在某个标签直接引用

    <td style="color: red">文本</td>
    

head 中定义

  • 一般在 <head> 中定义好样式

    在 body 中不进行单独设置的 <p> 标签内容都按照如下设置的样式输出

    <head>
        <style>
            p{
                color:blue;
                font-size: 30px;
                text-align: center;
            }
        </style>
    </head>
    

    设置在 body 中使用时按照定义的样式输出,但 head 中可以单独设置某条

    image-20231018104837892

选择器

  • <head> 标签下的 <style> 标签中定义
  • 在css中选择器是选取设置样式的元素模式

标签选择器

  • 更改指定标签的样式

    定义 标签名{}

    <head>
        <style>
            p{
                color:blue;
                font-size: 30px;
                text-align: center;
            }
            td{
    			color: chartreuse;
    		}
        </style>
    </head>
    

    效果

    image-20231018104906148

类选择器

  • 差异化选择不同的标签,单独选择一个或几个标签,可以使用类标签

    定义 .类名{}

    引用时 class 的多个不同的样式间用空格隔开

    class 属性

    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.color{
    			color: aqua;
    		}
    		.size{
    			font-size: 50px;
    		}
    	</style>
    </head>
    

    效果

    image-20231018104912804

id 选择器

  • 为标有特定id的HTML元素指定特有的样式

    定义 #id名{}

    <style>
        #first{
            color: aqua;
            text-align: center;
        }
    </style>
    

    效果

    image-20231018104918518

集体选择器

  • 多个选择器间用 , 隔开

    对多个标签进行设置

    <head>
        <style>
    		#first,.color,p{
    			background-color:yellow;
    		}
    	</style>
    </head>
    

    image-20231018104923603

属性选择器

  • 用法

    [属性名]{}

    #id名[属性名]{}

    [属性名=属性值]{}

    <html>
    <head>
    	<meta charset="UTF-8">
    	<style>
    		#first[title]{
    			color: yellow;
    		}
    	</style>
    </head>
    <body>
    	<p id="first" title="第一段">第一段的内容</p>
    	<p id="first">第二段的内容</p>
    </body>
    

    效果

    image-20231018104931073

后代选择器

  • 更改指定后代的样式

    <head>
        <style>
            p span{
                color: skyblue;
            }
        </style>
    </head>
    

    效果

    image-20231018104936996

引用 css 文件

  • css 文件

    image-20231018104942160

  • 引用

    image-20231018104948074

CSS 练习

标签选择器

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS练习</title>
	<style>
		span{
			color: aqua;
			background-color: darkgray;
			font-size:80px;
		}
	</style>
</head>
<body>
	<span>灰底蓝字</span>
	<h1>只有 span 标签中的内容受影响</h1>
	<span style="color: red;">可以在单个标签内单独设置</span>
</body>
</html>

image-20231018114907501

类选择器

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS练习</title>
	<style>
		.color{
			color: red;
			background-color: aqua;
		}
		.size{
			font-size: 50px;
		}
		.align{
			text-align: center;
		}
	</style>
</head>
<body>
	<h1 class="color">选择颜色</h1>
	<p class="size">选择大小</p>
	<h1 class="align">居中</h1>
</body>
</html>

image-20231018120120711

id 选择器

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS练习</title>
	<style>
		#蓝底红字{
			color: red;
			background-color: aqua;
		}
		#红底蓝字{
			color: aqua;
			background-color: red;
			font-size: 50px;
		}
	</style>
</head>
<body>
	<h1 id="蓝底红字">id_test</h1>
	<p id="红底蓝字">id2_test</p>
</body>
</html>

image-20231018115616331

举报

相关推荐

0 条评论