让网页更加美丽（css入门）

最新推荐文章于 2024-08-10 22:43:21 发布

韶光不负

最新推荐文章于 2024-08-10 22:43:21 发布

阅读量925

点赞数 20

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_47514459/article/details/117880878

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

为了让我们的网页更加漂亮，也是学习前端必须的内容所以学习css选择器是必须的，下面废话不多说让我们学习起来。

css3新增加的选择器(在css3中添加，小编就是简单说几个）

什么是css?

沉叠样式表：HTML中诞生的技术，用来修饰HTML网页。

css常见的三种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页</title>
		
		<style >
			div{
				color: aqua;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/text.css"/>			
	</head>
	<body>
		<div style="color: #0000FF;">第一种写法</div>
		<div >第二种写法</div>
		<div class="color" >第三种写法</div>
	</body>
</html>

第三种方法下css部分（在开发中，这种方式是常见的方式）

.color{
				color: #FF0000;
	  }

现象：

常见的css属性

width	宽
height	高
font-size	字体大小
border (线的大小线的类型线的颜色)	边线

css中颜色表示方法

第一种

color: red;
color: 颜色单词;

第二种：

color: (#ff,#ff,#ff)
/* rgb按照三源色比例进行配置，按照16进制书写 */

第三种：

color: rgb(255,255,255)
				
/* rgb按照三源色比例进行 */

第四种：

color: rgba(255,255,255,0.3)
                
 /* rgb按照三源色比例进行,a表示透明度，范围0~1 */

css选择器

什么是css选择器？

方便开发找到和修改渲染标签的方式

css选择器

基本选择器

基本选择器
id选择器（在网页中表示唯一，不建议使用数子开头）	#标签名称
类选择器（表示就是‘.’，clsss选择器)	.标签名称
标签选择器	标签名称
通配符选择器	*（代表通配符，代表任意）

包含选择器

子代选择器（如：div下的p标签）	div>p
后代选择器(如：div下所有的p标签,以空格表示）	div p

复合选择器

用逗号隔开	可以多个选择器公用一个标签
范围选择器	对范围选择器进行渲染

写法示例

#fixed-input{
				color: red;
			}
.color{
	color: rgba(255,255,255,0.3)
				
/* rgb按照三源色比例进行,a表示透明度，范围0~1 */
}
div{
	width: auto;
}
*{
	margin: 0px;
	/* 外边距 设置为0，清除外边距 行内标签默认都有 */
	padding: 0px;
	/* 内边距 */
	border: 1px solid red;
}
/* 子代选择器 */
header>.top {  
		height: 37px;
		width: 100%;
		background-color: #1D011B;
}
/* 后代选择器 */
header top{
        height: 37px;
		width: 100%;
		background-color: #1D011B;
}
/* 复合选择器 */
header .top{
        height: 37px;
		width: 100%;
		background-color: #1D011B;
}

css优先级排序

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

属性选择器

div[text]	div中的text标签
input[type$='i']	以i结尾
input[type^='i']	以i开头
input[type*='e']	通配有e

示例

            /* input标签中text=haha值的标签 */
			input[text='haha']{
				color: #0000FF;
			}
			/* input标签中有e字母的标签 */
			input[type*='e']{
				color: #000000;
			}
			/* input标签中有e字母开头的标签 */
			input[type^='i']{
				color: #0000FF;
			}
			/* input标签中有e字母结尾的标签 */
			input[type$='i']{
				color: #721170;
			}

css3新增加的选择器(在css3中添加，小编就是简单说几个）

（学习地址：CSS 参考手册 (w3school.com.cn)）

:root	选择文档的根元素。
element+element	标签1同一个级别下的下一个标签2
:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。

            /* 没有点击的效果 */
			a:link{
				color: #000000;
				/* 设置没有下划线 */
				text-decoration: none;
			}
			
			/* 被点击后效果 */
			a:visited{
				color: #721170;
			}
			
			/* 鼠标放上去的效果 */
			a:hover{
				color: #721170;
			}
			
			/* 被点击效果 */
			a:active{
				color: #0000FF;
			}