持续性学习-Day15（前端基础CSS3）

合集 - 前端基础(4)

1.持续性学习-Day14（前端基础HTML5）2024-04-17

2.持续性学习-Day15（前端基础CSS3）2024-04-22

3.持续性学习-Day16（前端基础JavaScript）2024-05-284.持续性学习-Day22（大前端）2024-07-09

收起

参考教学视频：秦疆

1. 什么是CSS

Cascading Style Sheet 层叠样式表

CSS3 圆角、阴影、动画...浏览器兼容性

CSS优势：

1. 内容和表现分离

2. 网页结构表现统一，可以实现复用

3. 样式十分的丰富

4. 建议使用独立html的css文件

5. 利用SEO，容易被搜索引擎收录

2. 入门

<link rel="stylesheet" href=""> //引入CSS文件

2.1 CSS的导入方式

1. <!-- 行内样式：在标签中元素中，编写一个style属性，编写样式即可-->

2. <style></style> <!--内部样式，style标签中-->

3. <link rel="stylesheet" href=""> <!--外部样式，引入css文件-->

4. <style>@import url();</style> <!--导入式 CSS2.1特有-->

优先级：行业样式 > 内部/外部样式（就近原则）

2.2 选择器

1. 标签选择器

2. 类选择器：.className

3. id选择器（id全局唯一）：#idName

不遵循就近原则，id选择器>类选择器>标签选择器

2.3 层次选择器

body 子标签{} //后代选择器

body>子标签 //子选择器

.className + 标签名 //相邻兄弟选择器：只有一个（向下）

.className~子标签 //通用兄弟选择器，当前选中元素向下的所有兄弟元素

2.4 结构伪类选择器

ul li:first-child{} //ul列表第一个子元素 ul li:last-child{} //ul列表最后一个子元素

p:nth-child(1){} //选择当前p标签的父级元素，选中父级元素中的第一个元素，并且是当前元素才生效 p:nth-of-type(1){} //选择父元素下的p元素的第一个，按类型选

2.5 属性选择器

a[ ]{} //= *= (正则)^= $=

2.6 某些样式

text-indent=2em;//首行缩进 height == line-height //行内居中 text-decoration:underline/line-through/overline //下中上划线 ul li{ list-style:none;//列表样式去掉原点 circle空心圆 decimal数字 square正方形 } background-repeat:no-repeat;//背景图片，不平铺 background: color url("") 270px 10px no-repead;

3. 盒子模型

margin：外边距

border：边框 1px solid color

padding：内边距

//h1,ul,li,a,body{ margin:0;padding:0;text-decoration:none;} 常见操作

4. 圆角边框及阴影

border-radius: px px px px;//顺时针

// 圆圈：圆角=半径

box-shadow: px px px color;//盒子阴影

5. 浮动

标准文档流

块级元素，行内元素（内联元素）

行内元素可以被包含在块级元素之中

display:none/inline-block(保持块元素的特性，但是可以放在一样)/block

float:

clear:both;//清除浮动，两侧不允许有浮动元素

父级边框塌陷问题

解决方案

1. 增加父级元素高度

2. 下方，增加一个空的div {clear:both;margin:0;padding:0;}

3. overflow:hidden;

4. 父类添加一个伪类 #idName:after{content:'';display:block;clear:both;}

6. 定位

position:

1. relative;

2. absolute;

   • 没有父级元素的前提下，相对于浏览器定位

   • 父级元素存在定位，通常会相对于父元素进行偏移

   • 在父级元素范围内移动

3. fixed; //固定定位

z-index

z-index 图层等级

opacity 背景透明度

filter:alpha(opacity= )背景透明度，IE8之前

 

工具

Grabiend //渐变

模版之家

vue-element-admin

ice.work//飞冰

less 编程的语言生成CSS

canvas html动画