CSS基础知识

最新推荐文章于 2023-01-27 12:29:37 发布

洛阳八中我最棒

最新推荐文章于 2023-01-27 12:29:37 发布

阅读量455

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44532671/article/details/110943456

版权

CSS概述:

CSS指层叠样式表
CSS样式表极大地提高了工作效率

使用css

mycss.css文件

@charset "utf-8";
/* CSS Document */
p{
   
	color:blue;
	font-size:50px;
}

test.html文件

<!DOCTYPE html>
<html>
<head Lang="en">
    <meta charset="UTF-8">
    <title>css测试</title>
    <link href="mycss.css" type = "text/css" rel = "stylesheet">
</head>
<body> 
    <p>测试一下css</p>
</body>
</htmb>

测试结果
在这里插入图片描述

派生选择器

通过依据元素在其位置的上下文关系来定义样式
html

<!DOCTYPE html>
<html>
<head Lang="en">
    <meta charset="UTF-8">
    <title>css测试</title>
    <link href="mycss.css" type = "text/css" rel = "stylesheet">
</head>
<body> 
    <p><a>P</a></p>
    <ul>
    	<li><a>LI</a></li> 
    </ul>
</body>
</htmb>

@charset "utf-8";
/* CSS Document */
p a{
   
	color:blue;
	font-size:50px;
}

结果
在这里插入图片描述

id选择器

id选择器可以为标有id的HTML元素指定特定的样式
id选择器以“#”来定义
2、id选择器和派生选择器:
目前比较常用的方式是id选择器常常用于建立派生选择器
HTML

<!DOCTYPE html>
<html>
<head Lang="en">
    <meta charset="UTF-8">
    <title>css测试</title>
    <link href="mycss.css" type = "text/css" rel = "stylesheet">
</head>
<body> 
    <p><a id = "SCY">P</a></p>
    <ul>
    	<li id = "KCY"><a>LI</a></li> 
    </ul>
</body>
</htmb>

css

@charset "utf-8";
/* CSS Document */
#SCY{
   
	color:blue;
	font-size:36px;	
}
#KCY{
   
	color: red;
	font-size:36px;
}

结果
在这里插入图片描述

类选择器:

类选择器以一个点显示
class也可以用作派生选择器
html

<!DOCTYPE html>
<html>
<head Lang="en">
    <meta charset="UTF-8">
    <title>css测试</title>
    <link href="mycss.css" type = "text/css" rel = "stylesheet">
</head>
<body> 
    <p><a class = "SCY">class</a></p>
    <a class = "SCY">And</a>
    <ul>
    	<li class = "KCY"><a>测试</a></li> 
    </ul>
</body>
</htmb>

css

@charset "utf-8";
/* CSS Document */
.SCY{
   
	color:blue;
	font-size:36px;	
}
.KCY{
   
	color: red;
	font-size:36px;
}

测试
在这里插入图片描述

属性选择器:

对带有指定属性的HTML元素设置样式
属性和值选择器

<!DOCTYPE html>
<html>
<head Lang-"en">
<meta charset="UTF-8">
<title> 
</title>
<style type="text/css">
	[title]{
    
		font-size: 50px; 
	} 
	[title=t1]{
    
		color: #F39;
	}
</style>
</head> 
<body>
	<p title="t1">属性选择器</p>
    <p title="t2">属性选择器</p> 
</body>
</html>

在这里插入图片描述

背景

CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
background-attachment
背景图像是否固定或者随着页面的其余部分滚动
background-color
设置元素的背景颜色
background-image
把图片设置为背景
background-position
设置背景图片的起始位置
background-repeat
设置背景图片是否及如何重复
background-size:规定背景图片的尺寸
background-origin:规定背景图片的定位区域
background-clip:规定背景的绘制区域

默认情况下，图片会重复拼接

<!DOCTYPE html>
<html>
<head Lang-"en">
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
	body{
    
		background-image:url("https://www.baidu.com/img/bd_logo1.png");
	}
	p{
    
		height:100px; 
		background-image:url("https://img-home.csdnimg.cn/images/20201124032511.png");
	}
</style>
</head> 
<body>
	<p title="t1">属性选择器</p>
    <p title="t2">属性选择器</p> 
</body>
</html>

结果
在这里插入图片描述
background-repeat:no-repeat; 可以设置图片不重复
background-position:right top 从右边顶部显示

background-position:100px 100px;
在这里插入图片描述

CSS文本

属性
color 文本颜色
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-transform 元素中的字母
unicode-bidi 设置文本方向
white-space 元素中空白的处理方式
word-spacing 字间距
测试

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>瀑布流效果</title>

最低0.47元/天解锁文章

洛阳八中我最棒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
CSS基础知识

CSS概述:CSS指层叠样式表CSS样式表极大地提高了工作效率使用cssmycss.css文件@charset "utf-8";/* CSS Document */p{ color:blue; font-size:50px;}test.html文件<!DOCTYPE html><html><head Lang="en"> <meta charset="UTF-8"> <title>css测试</
复制链接

扫一扫