三天速成前端——CSS

编程入门行业动态更新时间:2024-10-11 13:26:50

三天速成前端——<a href=https://www.elefans.com/category/jswz/34/1771373.html style= CSS"/>

三天速成前端——CSS

CSS

HTML+CSS+JavaScript

结构+表现+交互

什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页——字体，颜色，边距，宽高，背景，网页浮动）

语法

选择器{

声明1;

声明2;

声明3;

}

三种导入方式

优先级：就近原则

	<head><meta charset="utf-8" /><title></title><!--内部样式：规范 <style>可以编写CSS代码</style>--><<style>h1{color: red;}</style><!--外部样式，通过链接，推荐--><link rel="stylesheet" href="css/第一个CSS.css" /></head><body><!--行内样式，内容表现黏在一起，不推荐--><h1 style="color: red;">标题</h1></body>

CSS的优势：

内容和表现分离
网页结构表现统一，可以实现服用
样式十分丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录！

拓展：外部样式的两种写法

1. 连接式：HTML
2. 导入式：CSS2.1特有的  @import url("css/style.css");

选择器

作用：选择页面上的某一个或者某一类元素

基本选择器

标签选择器
class选择器
id选择器

优先级：id选择器>class选择器>标签选择器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>/*标签选择器会选择页面上所有的这个标签*/h1{color: #FF0000;background: green;border-radius: 24px;}p{font-size: 90px;}/*类选择器，.class的名称  可以跨标签*/.carmine{color: purple;}/*id选择器，#id的名称  必须保证全局唯一 */#zy{color: blueviolet;}</style></head><body><h1 class="carmine">学java</h1><h1 class="carmine">学java</h1><h1 id="zy">学java</h1><p>听课</p></body>
</html>

层次选择器

后代选择器：在某个元素的后面
```
			body p{background: red;}
```
子选择器：一代，儿子
```
			body>p{background: red;}
```

相邻兄弟选择器一个，同辈

			/*相邻兄弟，只有一个（向下）*/			.active +p{background: red;}

通用选择器向下，同辈
```
            /*通用选择器，当前选中元素向下的所有兄弟*/.active ~p{background: red;}
```
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q9Vw6FDi-1612868362707)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210208100036832.png)]

结构伪类选择器

伪类：条件下过滤；特效

			/*ul的第一个子元素*/ul li:first-child{background: green;}/*ul的最后一个子元素*/ul li:last-child{background: red;}/*选中p1：先定位到父级元素，选中子元素的第三个*/p:nth-child(3){background: gray;}/*选中p1：先定位到父级元素，选中p元素的第二个*/p:nth-of-type(2){background: yellow;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Tvhz2eP-1612868362715)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210208095234052.png)]

属性选择器（常用）

			/*a标签存在id属性的元素*//*a[属性名]*/a[id]{background: yellow;}/*a[属性名=属性值（正则）]*/a[id=first]{background: green;}/*a[属性名*=包含的值]。选中class中包含links的*/a[class*="links"]{background: red;}/*选中herf中以http开头的*/a[href^="http"]{background: yellowgreen;}/*选中href中以pdf结尾的*/a[href$="pdf"]{background: gold;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iDkzDtOL-1612868362717)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210208102054483.png)]

美化网页元素

span标签：突出重点的字（约定俗成）

div标签：一个区域nav

字体样式

			/* 字体 颜色 字号 粗体*/body{font-family:"arial black" "微软雅黑";color: brown;}h1{font-size: 50px;}.p1{font-weight: bolder;}/*也可以放在一起写斜体 细体 25px字号 楷体*/.p2{font: oblique lighter 25px "楷体";								}

文本样式

颜色 color：rgba()
对齐方式 text-align: center;
首行缩进 text-indent: 2em;
行高 line-height: 100px; 单行文字上下居中 line-height=height
装饰（下划线） text-decoration: underline;
文本图片水平对齐 vertical-align: middle;

			/** 	颜色 RGB 0~FRGBA A：0~1text-align ： 排版text-indent: 2em; 段落首行缩进行高与块的高度一致，可以居中text-decoration： 下划线* */h1{color: rgba(255,255,0,0.9);text-align: center;}.p1{text-indent: 2em;text-decoration: underline;}.p2{background: blue;line-height: 100px;height: 100px;}/*水平对齐*/img,span{vertical-align: middle;}

超链接伪类

			/*默认颜色*/a{text-decoration: none;color: black;}/*鼠标悬停状态（重点）*/a:hover{color: orange;font-size: 30px;}/*鼠标按住状态*/a:active{color: greenyellow;}

阴影

			/* 阴影 ：颜色、水平偏移、垂直偏移、偏移半径*/#price{text-shadow: lightblue 10px 10px 2px;}

列表样式

/*ul li*/
/*list-style: none; 去掉圆点/数字  circle 空心圆 decimal 数字* */
ul li{height: 30px;list-style: none;text-indent: 1em;
}

背景图片

			div{width: 700px;height: 500px;border: 1px solid red;background-image: url("img/1.jpg");}/*水平平铺*/.d1{background-repeat: repeat-x;}.d2{background-repeat: repeat-y;}.d3{background-repeat: no-repeat;}

            .title{font-size: 20px;font-weight: bold;text-indent: 1em;line-height: 30px;/*背景： 颜色 图片 平铺 图片位置*/background: red url(../img/1.jpg) no-repeat 200px 10px;}

            /*Grabient渐变色*/background-color: #0093E9;background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qP9uSJGQ-1612868362719)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210208163103745.png)]

		/*初始化：默认效果都去掉*/body,h2,ul,li{margin: 0;padding: 0;}

margin：外边距

				/*外边距的妙用：上下为0 左右自动——实现居中*/margin: 0 auto;

border：边框

		/*border：粗细 样式 颜色 */#app{width: 300px;border: 1px solid red;}div:nth-of-type(1) input{border: 3px dashed black;}

padding：内边距

元素大小=padding+margin+border+内容宽度

圆角边框

			/*顺时针：左上 右上   右下 左下*/div{width: 100px;height: 100px;border: 10px solid red;border-radius: 20px 50px 10px 5px;	}

阴影

		/*margin：0 auto居中的前提外面有块元素，块元素固定宽度*/img{margin: 0 auto;border-radius: 100px;box-shadow: 10px 10px 100px yellow;}

浮动

display

		/*block 块元素inline 行内元素inline-block 是块元素，但是可以内联，在一行！*/div{width: 100px;height: 100px;border :1px solid red;display: inline;}span{width: 100px;height: 100px;border :1px solid red;display: inline-block;}

也是一种实现行内元素排列的方式，方向不可控，但是很多情况都使用float

float&clear

			/*float:left/right 独立于下面的层，浮动在左侧、右侧clear：both/left/right 两侧都不允许浮动*/div{float: right;clear:  both;}

父级边框塌陷

问题描述：float之后，元素不在父元素内。

解决方案：

增加父级元素的高度（太low，元素高度修改后不适应）
漂浮元素块之后加一个div标签，清除浮动。（空的div代码不合适）
```
			<div class="clear"></div>.clear{clear: both;margin: 0;padding: 0;}
```

overflow（多余部分会被切除）

在父级元素中增加一个 overflow:hidden;

在父类后加一个after（代码实现div，避免手动写✔）
```
			#father:after{content: '';display: block;clear: both;}
```

定位

相对定位

相对于原来的位置移动（原位置也保留），仍然在标准文档流中

			#first{background-color: firebrick;border: 1px solid red;/*相对定位，相对于自己原来的位置进行偏移top距离上面-20，向上移*/position: relative;top: -20px;left: 20px;}

绝对定位

没有父级元素定位的前提下，相对于浏览器定位
父级元素 position: relative; 相对于父级定位

			#second{background-color: firebrick;border: 1px solid red;/*绝对定位应用：淘宝首页购物栏*/position: absolute;right: 30px;top: -10px;}

固定定位

			#third{background-color: firebrick;border: 1px solid red;/*固定定位,上下滑动也不改变位置应用：返回顶部*/position: fixed;right: 0;bottom: 0;}

z-index

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NlpSizoy-1612868362722)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210209162347231.png)]

图层：z-index默认是0，最高无限制（有浮动才有层级）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/zindex.css" /></head><body id="content"><div><ul><li><img src="img/background.png" alt="" /></li><li class="tipText">学习微服务</li><li class="tipBg"></li><li>时间：2099-01-01</li><li>地点：月球一号基地</li></ul></div></body>
</html>

#content{width: 700px;padding: 0;margin: 0;overflow: hidden;font-size:12px;line-height: 25px;border: 1px #000000 solid;
}
ul,li{padding: 0;margin: 0;list-style: none;
}
/*父级元素相对定位*/
#content ul{position: relative;
}
/*浮动*/
.tipText, .tipBg{position: absolute;width: 612px;height: 25px;top: 238px;
}
.tipText{color: white;/*0是最底层，文字显示在前面*/z-index: 999;
}
.tipBg{background: black;/*给背景加一个透明度*/opacity: 0.5;
}