CSS基础知识

2020-12-10 23:33:11 阅读：165 来源： 互联网

标签：color 基础知识 CSS background 选择器 css size

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 字间距

标签：color,基础知识,CSS,background,选择器,css,size
来源： https://blog.csdn.net/weixin_44532671/article/details/110943456

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9