前端学习之路-css-CSDN博客

本文链接：https://blog.csdn.net/m0_53353946/article/details/133769750

1. CSS介绍

CSS 全称 Cascading Style Sheets，翻译过来就是层叠样式表。

选择符会从上到下按照层叠关系匹配。说具体一点，假设多个选择符都给一个元素应用了样式，那么后定义的规则就会覆盖先定义的规则。总的原则是把通用选择符放在最前面定义，而把更具体的选择符放在后面定义

如果说HTML是网页的结构，那么CSS就是网页化妆师。

之前写了html页面，但是原生的html页面并不美观，各方面都谈不上好看，所以为了页面更加美观好看，所以必须要想办法去美化页面，那么CSS就是一个化妆师，可以让页面更加美观。

常见的css有三种写法，分别是：

直接写在标签内
写在 style 标签内
使用外部 .css 文件

<!-- 直接写在标签内 -->
<p style="color: aqua;">样式1，在标签内:你虽然没有出过国，但是你每天都在倒时差啊。</p>

<!-- 写在 style 标签内 -->
<style type="text/css">
			div {
				background: yellowgreen;
				width: 300px;
			}
</style>
<p>样式2，在style中:人的想法是会变的。以前我也是想致富的，现在只想脱贫。</p>	

<!-- 使用外部 .css 文件 -->
<link rel="stylesheet" type="text/css"="css/01css_test.css"/>
div {
	color: red;
}
<p>样式3，在css文件中:别跟我说晚饭后需要节食，如果夜里不能吃东西，那冰箱为什么会有灯。</p>

rel 属性规定当前文档与被链接文档之间的关系。

仅在 href 属性存在时使用

常见的CSS写法就是这三种，在实际项目当中，html里面只会有html内容，样式基本都是写在CSS文件当中。

但是这里可以发现一个问题，就是我在后面也更改了字体颜色，但是有的改了颜色，有的没有，这个是因为什么原因呢？这个是因为CSS优先级的问题。

这里我们可以先简单的了解到，行间样式是最高的，内嵌的大于外链的，这里主要是一般外链写在内嵌之前，谁在后面，听谁的

2. CSS选择器

1. 基本选择器

在之前的这三个div中，如果想要给没给div不同的样式，应该怎么做呢？这个时候就需要使用CSS的选择器了.

/* 默认标签选择器-作用于后面所有的div标签 */
div {
				background: yellowgreen;
				width: 300px;
			}

/* id选择器-作用于某个id，给标签添加一个id属性 */
#div1 {
				background: orange;
				width: 200px;
			}

/* class选择器-作用于多个class标签，可以给多个标签添加class属性 */
.wrap {
				background: azure;
				height: 150px;
			}
/* *是通配符选择器，作用于页面上的所有选择器 */
* {
				margin: 0;
				padding: 0;
}

<div>
			<p style="color: aqua;">样式1，在标签内:你虽然没有出过国，但是你每天都在倒时差啊。</p>	
</div>
<div id="div1">
			<p>样式2，在style中:人的想法是会变的。以前我也是想致富的，现在只想脱贫。</p>	
</div>
<div id="div1" class="wrap">
			<p>样式3，在css文件中:别跟我说晚饭后需要节食，如果夜里不能吃东西，那冰箱为什么会有灯。</p>	
</div>
<div class="wrap">
	<p>我以前很瘦，未来也会很瘦，所以我先胖一段时间，不然人生不算圆满。</p>
</div>

对于这个四种选择器，id>class>标签>通配。

2. 复杂选择器

/* 群组选择器-同时对多个选择器进行样式设置，每个选择器之间用逗号分隔 */
div,p {
				background: yellowgreen;
				width: 300px;
			}

/* 兄弟选择器-div后面的兄弟都会选中，～两边的空格可写可不写 */
div~ul{
				background: skyblue;
			}

/* 相邻选择器-只会选择相邻的标签，这个+号可以也可以写多个 */
div+ul{
				background: skyblue;
			}

/* 后代选择器-作用于所有满足的后代上面 中间是空格 这个是使用最多的选择器 */
div ol{
				list-style: none;
			}
/* 子代选择器-只会作用于子代，不会作用于孙子辈 */
div>ol{
				list-style: none;
			}
/* 属性选择器 */
input[type=checkbox] { 
				width: 10px;
				height: 10px;
			}

/* 伪类选择器 */
/* 未访问时 */
			a:link {
				color: skyblue;
			}
			/* 访问后的 */
v死特
			a:visited{
				color: aliceblue;
			}
			/* 鼠标划过/悬停时 */
			a:hover{
				font-size: 30px;
				color: #87CEEB;
			}
			/* 激活/点击时 */
			a:active{
				font-size: 700;
				color: #FF0000;
			}
/* 伪类选择器应用 */
#dv1{
				width: 300px;
				height: 300px;
				background: skyblue;
			}
		
			#dv2{
				width: 100px;
				height: 100px;
				background: red;
				display: none;
			}
			#dv1:hover div{
				display: block;
			}


<p>一个人过叫快活，两个人过叫生活，但三个人就得你死我活。</p>
		<div> 我练过气功的，可以把你气死！</div>
		<div>
			<ol>
				<li>刷牙是件悲喜交加的事：一手拿着杯具，一手拿着洗具。</li>
				<ol>
					<li>别对我大呼小叫，我小时候被狗吓过。</li>
					<li>生活不仅有甜头，还有肉吃</li>
				</ol>
			</ol>
		</div>
		<ol>
			<li>现在的努力，是为了小时候吹过的牛。</li>
			<li>如果当年牛顿是坐在榴莲树下，那么我们的考试应该会容易得多了。</li>
		</ol>
		
		<p>我也不知道我追求的是对是错，只知道随心而为。</p>

<a href="https://www.baidu.com/s" target="_blank">伪类选择器</a>

<div id="dv1">
			<div id="dv2">
				
			</div>
		</div>

以上是所有CSS常见的复杂选择器，尤其要掌握后代选择器

同样的在面临复杂选择器的时候，优先级是怎样的呢？

li {
				background: yellow;
			}
ol li{
				background: yellowgreen;
			}
li.rap#cook {
				background: skyblue;
			}
#cook {
				background: gray;
			}

<ol>
				<li id="cook">刷牙是件悲喜交加的事：一手拿着杯具，一手拿着洗具。</li>
				<ol>
					<li class="rap" id="cook" style=“”>别对我大呼小叫，我小时候被狗吓过。</li>
					<li>生活不仅有甜头，还有肉吃</li>
				</ol>
			</ol>

优先级可以概括如下：

！important>行内> id > class > 标签
复杂选择器的优先级比较如下：
1. 先比 id（最高位），再比 class，最后比 tagName （标签个数）
2. id 个数不等，id越多，优先级越高
3. id相同，class越多，优先级越高
4. id，class都相同，则标签越多，优先级越高

3. CSS字体/文本

1. 字体

更改字体样式

.he1{
				/* font-family 字体浏览器，不同平台默认字体不一样，Windows默认是微软雅黑  */
				font-family: "arial black";
				font-size: 10px;
				/* font-size 字体大小 单位 px rem em % 
				px 谷歌浏览器默认字体大小 谷歌默认16px
				rem 相对于html（根标签）的字体大小
				rm 等于父级的字体尺寸-相对于父级字体大大小而言
				%  相对于父容器中字体的%调整
				 */
			}
			.he2 {
                威特
				font-weight: bolder;
				/* font-weight 字体粗细
				normal 默认字体 400
				lighter 较细  100
				bold 加粗 700
				bolder 很粗 900
				也可以用数字
				 */
			}
			.he3 {
				font-style: oblique;
				/* font-style 字体类型
                弄墨
				normal 默认 文字正常
                阿它勒
				italic 文字斜体(属性)
                哦b类
				oblique 文字斜体
				 */
			}
			.he4 {
				color: rgb(255,1,100);
				/* 
				color 文字颜色
				1. 英文单词 red green
				2. 16进制（0-9 a-f）#5544aa #54a #abd456
				3. rgb(0-255,0-255,0-255)
					r red / g green / b blue
				4. rgba(0-255.0-255,0-255,0-1)
					r red / g green / b blue
					a alpha(透明度) 0 完全透明 1 完全不透明
				 */
			}
		.he5 {
				/* 复合样式 */
				/* size | family */
				/* font: 20px "agency fb" */
				
				/* style | size | family */
				/* font: italic 20px "arial black", "arial narrow"; */
				/* style | weight | size | family */
				/* font: italic bold 20px "microsoft yahei"; */
				 /* style | variant(小型大些字母) | weight | size | family */
				  font: italic small-caps bold 20px "bodoni mt"; 
			}

<body>
		<!-- div[class=he$]{font$}*9 快速生成-->
		<div class="he1">font1</div> 
		<div class="he2">font2</div>
		<div class="he3">font3</div>
		<div class="he4">font4</div>
		<div class="he5">font5</div>
		<div class="he6">font6</div>
		<div class="he7">font7</div>
		<div class="he8">font8</div>
		<div class="he9">font9</div>
	</body>

以上是对于字体的一些设置。

2. 文本样式

对于文本设置样式

div.dv1 {
				width: 300px;
				/* height: 400px; */
				background: skyblue;
				/* 控制换行 */
				white-space: nowrap; /* normal正常换行 nowrap 不换行 */
				/* 超出隐藏 */
				overflow: hidden;
				/* 出现省略号 */
				text-overflow: ellipsis;
			}
			.p1 {
				/* 对齐方式 */
				text-align: center;
			}
			.p2 {
               
				/* 首行缩进 */
               
				text-indent: 2em;
			}
			.p3 {
				/* 大小写转换 */
				text-transform: uppercase;
				/* 线条 */
                
				text-decoration: underline
			}
			.p4 {
				/* 字距 */
              
				letter-spacing: 1.5px;
				/* 词距 */
				word-spacing: 10px;
			}
			.p5 {
				/* 设置行高 */
                line-height 属性设置行间的距离（行高）
				line-height: 30px;
			}

页面代码

<div class="dv1">
			<!-- p[class=p$]{p$ p$ p$}*6 -->
			<p class="p1">p1 p1 p1</p>
			<p class="p2">p2 p2 p2</p>
			<p class="p3">p3 p3 p3</p>
			<p class="p4">p4 p4 p4</p>
			<p class="p5">p5 p5 p5</p>
			<p class="p6">p6 p6 p6</p>

		</div>
		<div class="dv1">
			有一个人叫真咯嗦，娶了个老婆叫要你管，生了个儿子叫麻烦。有一天麻烦不见了！夫妻俩就去报案。警察问爸爸：请问这位男士你叫啥名字？爸爸说:真咯嗦。警察很生气，然后 他又问妈妈叫啥名字。妈妈说:要你管。警察非常生气的说:你们要干什么?夫妻俩说：找麻烦。
		</div>

4. CSS背景

CSS也是可以设置背景的

div.dv1 {
				background-color: skyblue;
				width: 600px;
				height: 400px;
				/* background-image: url("img/laugh2.gif"); */
				/* 图片默认是平铺的，也可以设置水平或者垂直平铺  */
				/* background-repeat: no-repeat; */
				/* background-repeat: repeat-x; */
				/* background-repeat: repeat-y; */
				/* background-size: 300px 200px; */
				/* background-size: contain; */
				/* contain 等比例缩放x轴或者y轴的一个方向，不一定铺满整个，但是可以看到整个图片
				  cover 等比例缩放知道铺满x，y轴，可以铺满整个框，但是不一定看到完整的图片*/
				  /* background-position: center; */
				  /* background-position 背景位置 x轴 y轴
				  x轴 left center right
				  y轴 top center bottom
				  如果只给一个值，默认在x轴，y轴默认center（50%）
				   */
				  /* 复合模式 */
				  /* image repeat position/size 一定要有这个/ */
				  background: url("img/laugh2.gif") no-repeat top/cover;
			}

<div class="dv1"></div>