前端入门笔记 02 —— CSS_1.进一步掌握前端css设计的一些细节(伪链接、后代选择器、并列选择器、图片大小-CSDN博客

本文链接：https://blog.csdn.net/JamSlade/article/details/128557629

本文介绍了CSS的基础知识，包括如何独立使用CSS，以及与HTML和JavaScript的配合。讨论了BEM命名法，各种选择器的优先级，如ID、类和标签。还涵盖了CSS属性，如伪类和伪元素，以及盒模型和布局技巧。此外，文章还提到了加载动画效果和CSS动画的实现。

摘要由CSDN通过智能技术生成

CSS标签通常要配合html或者js使用

CSS本身的构造

p{color : red}
	/*color 属性 red 值*/
	/*p选择器 括号内内容 生命*/

配合html

<style>
	p{color : red}

<\style>

或者直接引入整个css文件

<head>
    <style type = text/css>
        @import "1.3.css";
    </style>
</head>

前端变量、类等推荐的命名方法

BME命名法

css选择器

类型类 ID

先在html中创建对应的段落，并声明他们的类

<p> first paragraph </p>
<p class = "paragraph"> second paragraph </p>
<p class = "paragraph extra-para" > third paragraph </p>
<p id = "para" >forth paragraph </p>

在css中设置类

p{color : blue}
.paragraph{color : red}
.extra-para{font-size: 30;}
#para{color : green;}

在这里插入图片描述
优先级：
$I D > 类 > 标签$

一般ID是不复用的，类可以多次复用

标签属性

控制所有带某个标签的对象

<img src = https://img-blog.csdnimg.cn/04466f73407b403abb502e86e6ad52a9.png>

img[src]{width: 200; height: 100;}

伪类伪元素

只会在鼠标指针悬浮到这个元素上的时候选择这个元素

<a href = http://www.baidu.com>A hypertext</a>

a:hover{color : red}

这时候超链接就会变红色

后代选择器

用来选择特定元素或元素组的后代

<div>
     <span>
         span 1
         <span>span 2</span>
     </span>
 </div>
 <span>span 3</span>

span{background-color: aqua;}
div span{background-color:coral;}

在这里插入图片描述
若第二句css指令不执行 span全为蓝色

css常用属性

p{
 width:200px;
 height:100px;
 color: red;
 border: 1px solid #a8a8a8; /*边框*/
 text-align: center;/*文字位置 可选left center right*/
 line-height: 50px; /*行间距*/
 letter-spacing : 4px;/*字母间距*/
 word-spacing : 10px;/*单词间距*/
 font-size: 15px;/*字体大小*/
 font-family:serif /*字体设置*/
}

.eclipse{
	width: 100px;
	white-space: nowrap;/*连续空白符被合并*/
	overflow:hidden;/*隐藏溢出的内容*/
	text-overflow:ellipsis;/*省略号代替溢出*/
}

.trans{/*简单动画*/
	width: 100px;
	height: 100px;
	background: red;
	box-shadow: 1px 10px 5px #888888 /*阴影x轴偏移量 y轴 模糊半径 颜色*/
	transition: width 2s; /*width 从100px变300px，过渡时间2s*/
}
.trans:hover{width:300px;}

.rotate{
	width: 100px;
	height: 100px;
	background: green;
	transform: rotate(7deg); /*旋转角度*/
}

.box{
	width: 100px;
	height: 100px;
	border: 4px solid green;/*边框*/
	border-bottom: 8px;
	border-radius:20px;/*圆角边框*/
	/*border-radius参数改成50%就是圆*/
	
	padding: 25px ;/*改变内容和边框的距离*/
	/*可设置1 2 4 个参数 分别对应 1.总体设置四个边距 2.上下和左右边距 3.单独设置上下左右编剧*/
	margin: 25px;/*对象和其他对象的间距*/
	/*也可设置1 2 4个参数*/
}

ul{
	list-sytle-type:none; /*引导列表元素的标志*/
	diaplay:flex /*横着排列*/
}
li a{
	text-decoration:none;/*超文本修饰线*/
	margin:10px;
}

加载动画效果

.loading{
	width: 35px;
	height: 35px;
	border:5px solid rgba(189, 189, 189, 0.25);
	border-left-color:rgba(3, 155, 229 1);
	border-top-color:rgba(3, 155, 229 1);
	border-radius: 50%;

	animation: rotate 1s infinite linear;
	/*旋转 一秒 无限循环 线性播放*/
}
@keyframs rotate
{
	from{
		transform: rotate(0)
	}
	to{
		transform: rotate(1turn)
	}
}