CSS学习

一瓢凉水爽 發表於 2021-10-7 17:10:00

# 1、什么是CSS
如何学习
1. CSS是什么 2. CSS怎么用（快速入门） 3. CSS选择器（重点+难点） 4. 美化网页（文字，阴影，超链接，列表，渐变....） 5. 盒子模型 6. 浮动 7. 定位 8. 网页动画（特效效果）
 
## 1.1、什么是CSS
Cascading Style Sheet层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动....
![](E:\OneDrive - sijiainternet\HOME\学习笔记\CSS学习\images\百度一下，你就知道 - Google Chrome 2021_8_10 15_09_03.png)
 
## 1.2、发展史
CSS1.0
CSS2.0 DIV(块) + CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画.....浏览器兼容~
![](E:\OneDrive - sijiainternet\HOME\学习笔记\CSS学习\images\练习格式.png)
 
## 1.3、快速入门
style
**基本入门**
```html <title>Title</title>
 <style>\3c br> h1 { }</style> 
<h1>我是标题</h1>
 ```
建议使用这种规范
![](E:\OneDrive - sijiainternet\HOME\学习笔记\CSS学习\images\css规范.png)
 
css的优势
1. 内容和表现分离 2. 网页结构表现统一，可以实现复用 3. 样式十分丰富 4. 建议使用独立于html的css文件 5. 利用SEO，容易被搜索引擎收录！
 
## 1.4、CSS的3种导入方式
```html <title>Title</title> <style>\3c br> h1 { }</style> 

 <h1>我是标题</h1>
 ```
拓展：外部样式两种写法
- 链接式：
html
```html ```
- 导入式：
@import 是 CSS2.1特有的
```html <style></style> ```
 
# 2、选择器
> 作用：选择页面上的某一个或某一类元素
 
## 2.1、基本选择器
1. 标签选择器：选择一类标签标签{}
 ```html <title>Title</title> <style>\3c br> /*标签选择器，会选择到页面上所有的这个标签的元素*/\3c br> h1 { }
\3c br> p { }</style> <h1>学Java</h1> <h1>学Java</h1> 斯嘉学 ``` 2. 类选择器class：选择所有class属性一致的标签，跨标签 .class名{}
 ```html <title>Title</title> <style>\3c br> /*类选择器的格式 .class的名称{}\3c br> 好处，可以多个标签归类，是同一个class，可以复用\3c br> */\3c br> .sijia { }
\3c br> .ks { }</style> <h1 class="sijia">标题1</h1> <h1 class="ks">标题2</h1> <h1 class="sijia">标题3</h1> P标签 ```
3. id选择器：全局唯一！ #id名{}
 ```html <title>Title</title> <style>\3c br> /*id选择器 id必须全局保证唯一！\3c br> #id名称{}\3c br> 不遵循就近原则，固定的\3c br> id选择器>class选择器>标签选择器\3c br> */\3c br> #sijia { }
\3c br> .style1 { }</style> <h1 id="sijia">标题1</h1> <h1 class="style1">标题2</h1> <h1 class="style1">标题3</h1> <h1>标题4</h1> <h1>标题5</h1> ```
 
优先据：id > class > 标签
 
## 2.2、层次选择器
1. 后代选择器：在某个元素的后面祖爷爷爷爷爸爸你
 ```css /*后代选择器*/ body p{ background: red; } ```
2. 子选择器：一代儿子
 ```css /*子选择器*/ body>p{ background: #009688; } ```
3. 相邻兄弟选择器：同辈
 ```css /*相邻兄弟选择器：只有一个（向下）*/ .active + p{ background: aqua; } ```
4. 通用选择器
 ```css /*通用兄弟选择器，当前选中元素的向下的所有兄弟*/ .active~p{ background: yellow; } ```
 
## 2.3、结构伪类选择器
 
```css <title>Title</title> <style>\3c br> /*ul的第一个子元素*/\3c br> ul li:first-child { }
\3c /p>
\3c p> /*ul的最后一个子元素*/\3c br> ul li:last-child { }
\3c /p>
\3c p> /*选中p1：定位到父元素，选择当前的第一个元素\3c br> 选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！\3c br> */\3c br> p:nth-child(1) { }
\3c /p>
\3c p> /*选中父元素，下的p元素的第二个，类型*/\3c br> p:nth-of-type(2) { }</style> p1 p2 p3 <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul>
 ```
![](E:\OneDrive - sijiainternet\HOME\学习笔记\CSS学习\images\伪类结构选择器效果.png)
## 2.4、属性选择器(常用)
id + class结合~
```html <title>Title</title>
 <style>\3c /p>
\3c p> .demo a { }
\3c /p>
\3c p> /* 属性名，属性名 = 属性值（正则）\3c br> = 绝对等于\3c br> *= 包含这个元素\3c br> ^= 以这个开头\3c br> $= 以这个结尾\3c br> */\3c br> /*存在id属性的元素 a[]{}*/\3c br> /*a{*/\3c br> /* background: yellow;*/\3c br> /*}*/\3c br> /*id= fiast的元素*/\3c br> /*a{*/\3c br> /* background: yellow;*/\3c br> /*}*/\3c br> /*class 中有 links的元素*/\3c br> /*a{*/\3c br> /* background: yellow;*/\3c br> /*}*/\3c /p>
\3c p> /*选中heref中以http开头的元素*/\3c br> /*a{*/\3c br> /* background: red;*/\3c br> /*}*/\3c /p>
\3c p> a { }</style>
 

 1 2 3 4 5 6 7 8 9 10
 
 ```
![](E:\OneDrive - sijiainternet\HOME\学习笔记\CSS学习\images\属性选择器效果.png)
``` = *= ^= $= ```
 
# 3、美化网页元素
## 3.1、为什么要美化网页
1、有效的传递页面信息
2、美化网页，页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户的体验
 
span标签：重点要突出的字，使用 span 套起来
```html <title>Title</title>
 <style>\3c br> #title1 { }</style>
 
欢迎学习 Java
 ```
## 3.2、字体样式
 
```html <style>\3c br> boby { }
\3c br> h1 { }
\3c br> .p1 { }</style> ```
## 3.3、文本样式
1、颜色 color rgb rgba
2、**文本对齐方式 text-align = center**
3、**首行缩进 text-indent: 2em**
4、**行高 line-height: 单行文字上下居中！** line-height=height
5、装饰 text-decoration
6、文本图片水平对齐：vertical-aling:middle;
```html <title>Title</title>
 <style>\3c br> h1 { }
\3c br> .p1 { }
\3c br> .p3 { }
\3c br> /*下划线*/\3c br> .l1 { }
\3c br> /*中划线*/\3c br> .l2 { }
\3c br> /*上划线*/\3c br> .l3 { }
\3c br> /*超链接去下划线*/\3c br> a { }
\3c br> /*\3c !--*/\3c br> /*水平对齐~ 参照物，a，b*/\3c br> /*-->*/\3c br> img,span { }</style>
 
 <img src="images/a.png"> 光伏发电和规范化风格和德国 
 123
123123123 123123123 123123123
 
 <h1>故事介绍</h1> 平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。 在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。 
Bill is a math teacher.In the morning,he usually goes to work by subway.After lunch,he reads neawspapers.And sometimes,he goes home at 5:30.In the evening,he always waches TV.At 10:00,he goes to bed. 
 ```
 
## 3.4、阴影
```css /*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/ #price{ text-shadow: #1fccdc 10px -10px 2px; } ```
 
## 3.5、超链接伪类
正常情况下，a，a:hover
```css /*默认的颜色*/ a{ text-decoration: none; color: #000000; } /*鼠标悬浮的状态(只需要记住:hover)*/ a:hover{ color: #009688; font-size: 50px; } ```
 
## 3.6、列表
```css /*ui li*/ /* list-style: none 去掉圆点 circle空心圆 decimal 数字 square正方形 */ /*ul{*/ /* background: whitesmoke;*/ /*}*/
ul li{ height: 30px; list-style: none; text-indent: 1em; } ```
 
## 3.7、背景
背景颜色
背景图片
```css <style>\3c br>div { }
\3c br>.div1 { }
\3c br>.div2 { }
\3c br>.div3 { }</style> ```
练习：
![](E:\OneDrive - sijiainternet\HOME\学习笔记\CSS学习\images\练习.png)
## 3.8、渐变
```css background-color: #85FFBD; background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%); ```
 
# 4、盒子模型
## 4.1、什么是盒子模型
![](E:\OneDrive - sijiainternet\HOME\学习笔记\CSS学习\images\盒子模型.png)
margin：外边距
padding：内边距
boeder：边框
 
## 4.2、边框
1、边框的粗细
2、边框的样式
3、边框的颜色
```css <style>\3c br>/*body总有一个默认的外边距margin: 0，常见操作*/\3c br>/*h1,ul,li,a,body{*/\3c br>/* margin: 0;*/\3c br>/*}*/\3c br>/*border：粗细，样式，颜色*/\3c br>#box { }
\3c br>h2 { }
\3c br>form { }
\3c /p>
\3c p>div:nth-of-type(1) input { }
\3c br>div:nth-of-type(2) input { }
\3c br>div:nth-of-type(3) input { }</style> ```
 
## 4.3、内外边距
```css <title>Title</title>
 <style>\3c /p>
\3c p> #box { }
\3c br> /*\3c br> 顺时针旋转\3c br> margin: 0\3c br> margin: 0 1px\3c br> margin: 0 1px 2px 3px\3c br> */\3c br> h2 { }
\3c br> form { }
\3c /p>
\3c p> input { }
\3c br> div:nth-of-type(1) { }</style>
 
<div id="box"> <h2>会员登录</h2> <form action="#"> <div> 用户名： <input type="text"> </div> <div> 密码： <input type="password"> </div> <div> 邮箱： <input type="text"> </div> </form> </div>
 ```
 
盒子的计算方式：你这个元素到底多大
![](E:\OneDrive - sijiainternet\HOME\学习笔记\CSS学习\images\盒子模型计算.png)
margin + border + padding + 内容宽度
 
## 4.4、圆角边框
4个角
```html <style>\3c br>div { }</style> ```
 
## 4.5、盒子阴影
```html <title>Title</title> <style>\3c br> img { }</style>
 <div style="width: 500px; display: block; text-align: center"> <img src="images/tx.png"> </div>
 ```
 
# 5、浮动
## 5.1、标准文档流
 
块级元素：独占一行
``` h1~h6 p div 列表... ```
 
行内元素：不独占一行
``` span a img strong... ```
行内元素可以被包含在块级元素中，反之，则不可以
 
## 5.2、dispaly
```html <style>\3c br> div { }
\3c br> span { }</style> ```
1、这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
## 5.3、float
1、左右浮动 float
```css div{ margin:10px; padding:5px; } #father{ border:1px #000 sold; } .lsyer01{ border:1px #F00 dashed; dispaly:inline-block; float:righr; } .lsyer02{ border:1px #00F dashed; dispaly:inline-block; float:righr; } .lsyer03{ border:1px #660 dashed; dispaly:inline-block; float:righr; } .lsyer04{ border:1px #666 dashed; font-size:12px; line-height:23px; dispaly:inline-block; float:righr; } ```
 
## 5.4、父级边框塌陷的问题
clear
```csss /* clear: right; 右侧不允许有浮动元素 clear: left; 左侧不允许有浮动元素 clear: both; 两侧不允许有浮动元素 clear: none; */ ```
 
解决方案：
1、增加父级元素的高度~
```css #father{ border: 1px #000 solid; height:800px } ```
2、增加一个空div标签，清除浮动
```css <div class="clear"></div>
.clear{ clear: both; marin: 0; padding: 0; } ```
3、overflow
``` 在父级元素中增加一个 overflow: hidden; ```
4、父级添加一个伪类：after
```css #father:after{ content: ''; dispaly: block; clear:both; } ```
 
**小结：**
1. 浮动元素后面增加空div
 简单，代码中尽量避免div
2. 设置父元素高度
 简单，元素假设有了固定的高度，就会被限制
3. overflow
 简单，下拉的一些场景避免使用
4. 父级添加一个伪类：after（推荐）
 写法稍微复杂一点，但是没有副作用，推荐使用。
 
## 5.5、对比
* display
方向不可以控制
* float
浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题。
 
# 6、定位
## 6.1、相对定位
```html <title>Title</title> <style>\3c br> body { }
\3c br> div { }
\3c br> #father { }
\3c br> #first { }
\3c br> #second { }
\3c br> #third { }</style>
 
 <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div>
 ```
相对定位：postion: relative
相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留
```css top: -20px; left: 20px; bottom: -10px; right: 20px; ```
### 6.1.1、练习
```html <title>Title</title>
 <style>\3c br> #box { }
\3c br> a { }
\3c br> a:hover { }
\3c br> .lj2,.lj4 { }
\3c br> .lj5 { }</style>
 
<div id="box"> 百度 博客 山河 QQ音乐 网易云 </div>
 ```
效果图：
![](E:\OneDrive - sijiainternet\HOME\学习笔记\CSS学习\images\6.1.1练习效果图.png)
 
## 6.2、绝对定位
定位：基于xxx定位，上下左右
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
```html <title>Title</title>
 <style>\3c br> div { }
\3c br> #father { }
\3c br> #first { }
\3c br> #second { }
\3c br> #third { }</style>
 
 <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div>
 ```
 
 
## 6.3、固定定位 fixed
```html <title>Title</title>
 <style>\3c br> body { }
\3c br> div:nth-of-type(1) { }
\3c br> div:nth-of-type(2) { }</style>
 
<div>div1</div> <div>div2</div>
 ```
 
## 6.4、z-index
![](E:\OneDrive - sijiainternet\HOME\学习笔记\CSS学习\images\图层.png)
 
图层~
z-index：默认是0，最高无限~999
```html <title>Title</title> 
<div id="content"> <ul> <li><img src="images/bg.png"></li> <li class="tipText">害怕区一姐，找欣小萌</li> <li class="tipBg"></li> <li>时间：2031-01-01</li> <li>地点：火星一号基地</li> </ul> </div>
 ```
 
 opacity: 0.5;/*背景透明度*/
 
```css #content{ width: 380px; padding: 0px; margin: 0px; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px solid #009688; } ul,li{ padding: 0px; margin: 0px; list-style: none; } /*父级元素相对定位*/ #content ui{ position: relative; } .tipText,.tipBg{ position: absolute; width: 380px; height: 25px; top: 223px; } .tipText{ /*z-index: 999;*/ color: white; } .tipBg{ background: black; opacity: 0.5;/*背景透明度*/ filter: opacity(0.5);/*背景透明度*/ } ```
 
 
# 7、动画
 
# 8、总结
 
 
 
 
  
来源：https://www.cnblogs.com/sijiawork/p/15376470.html

頁: [1]

琼殿技术论坛's Archiver

CSS学习