108-02-CSS
2024-05-29 13:11:09
学习CSS ,分为三个方面的内容，1.样式的使用位置 2.选择器 3. 属性设置
- 层叠样式表
- 插件工具 tilt_3d 立体查看网页
- 样式的使用位置
- 样式直接写在标签上的话，称为内联样式，结构与表现耦合，开发中不推荐使用；
- link引用样式表，完全将表现与结构分离，最大限度的使样式服用，而且最大限度的使用缓存文件，提供用户体验性，在开发中推荐使用
- CSS 语法
- /这是CSS注释*/
- 选择器：{
声明块
（在一个声明块中可以有多个声明，中间用分号（;）分开）
};
- 公共方法
- 针对浏览器对元素设置的默认样式，可以通过下面的进行消除
*{margin:0px;padding:0px;
}3.1 布局
3.1.1 盒模型
- 垂直外边距的重叠问题：导致Margin 长度无效
3.1.2 Flex布局
3.2 选择器
- 常用选择器：元素选择器：可以选中页面中的所有元素---->语法：元素{样式设置}
- ID选择器：#id{样式设置}
- class选择器：
语法： .name{样式设置}- 通过class的属性值，设置元素值
- 一个元素可以设置多个class ,通过空格隔开
- 选择器分组（并集选择器）：
语法：选择器1，选择器2，选择器n{
样式设置
} - 复合选择器（交集选择器）
语法：
选择器1选择器2{样式声明块} - 统配选择器（*）
*{样式设置} - 元素的关系梳理：
- 父元素：直接包含子元素的元素
- 子元素：直接被父元素包含的元素>语法：父元素>子元素{样式设置}
- 子元素选择器
- :first-child:选择第一个子标签
- :last-child:选择最后一个标签
- :nth-child(even):选择指定位置的子标签 (偶数位置)
- :nth-child(odd): 选择指定位置的子标签 （奇数位置）
- :first-of-type:选择指定类型的第一个子元素,例 p:first-of-type
- :last-of-type:选择指定类型的最后一个子元素,例 p:last-of-type
- :nth-of-type:选择指定类型的指定位置的子元素:
- 例子：plate:nth-of-type(2n+3) n 从0开始
- 例子：plate:nth-of-type(2)
- 例子：plate:nth-of-type(even) （even 偶数 odd 奇数）
- 例子： apple:only-of-type 父元素中只有一个元素的apple 元素
- :only-child 选择器，匹配父元素中唯一子元素的元素（只有一个子元素的元素）
- 子元素选择器
- 祖先元素
- 后代元素：后代元素选择器（筛选指定元素的后代元素）语法：祖先元素 后代元素{样式设置}
- 兄弟元素
- 语法：
- 元素1+元素2{} ：选中 元素1后紧挨着的的元素2
- 元素1~元素2{} ：选中 元素1后所有的元素2
- 语法：
- 伪类选择器
- 伪类：表示元素的一种特殊 状态（例如：选中后的超链接颜色，输入框中字的颜色…）
- 常用伪类（浏览器判断网址是否访问过，依据的是浏览器的历史记录）
- :link 表示曾经访问过的链接，专用于 a标签
- ：visited 表示未访问过的链接，注意这个涉及隐私问题伪类选择器只能设置元素的 字体颜色，不能修改其他的元素属性 ，专用于 a标签
- :hover 表示鼠标移入后元素状态，此伪类可以应用于其他元素
- :active 表示鼠标点击选中的状态，此伪类可以应用于其他元素
- :focus 获取焦点状态
- ::selection 表示选中内容
注意：在火狐中此伪类不可用可以使用其他写法 ::moz-selection{background-color:red;} - 注：a元素的伪类（link、：visited、hover、active）优先级相同，编写的时候顺序： link visited hover、active
- 伪元素：表示元素中的一些特殊位置
* :first-letter 指定元素的第一个字符
* :first-line 指定元素的第一行
* :before 元素最前位置，一般结合 content属性使用
* :after 元素最后位置，一般结合 content属性使用 - 属性选择器：可以根据元素的属性或者属性值，筛选元素
语法：- 元素[属性] ：表示筛选元素存在指定属性的元素
- 元素[属性=“ab”] ：表示筛选元素的属性值为ab的元素
- 元素[属性^=“ab”] ：表示筛选元素的属性值以ab开头的元素
- 元素[属性$=“ab”] ：表示筛选元素的属性值以ab结尾的元素
- 元素[属性*=“ab”] ：表示筛选元素的属性值包含ab的元素
- 否定伪类：可以从已经选中的元素中删除某些元素
- 语法 :not(选择器) p:not(.hello)
样式的继承：像儿子继承父亲遗产一样，在css 中，祖先元素上的样式，也会被他的后代元素所继承，利用继承，可以将一些基本的样式设置给祖先元素，这样后代元素均可拥有此样式。注意：并不是所有的样式，都会被子元素所继承，例如：背景相关样式都不会被继承。
选择器的优先级问题
| 选择器类别 | 占比值 |
|---|---|
| 行内样式（内联样式） | 1000 |
| 行内样式（内联样式） | 1000 |
| ID选择器 | 100 |
| 类、伪类 | 10 |
| 元素 | 1 |
| 通配符 | 0 |
- 继承样式 没有优先级
- 当选择器中出现多种选择器时，需要将优先级的值相加后比较
- 可以在样式后添加 !imporant（尽量少用或者不用，不便于维护）
.p{backgroundcolor:red !imporant;}
A：长度单位解释
- 像素（px）：屏幕中的一个小点
屏幕就是由多个点组成;不同显示器中的一个像素的大小尺寸也不同，显示效果越好，像素的尺寸越小，反之越大 - 百分比%：指的是父元素的尺寸百分比；使用此单位可以根据父元素的尺寸进行变更，便于实现自适应效果；
- em:相对于当前元素的字体大小进行计算，1em=1 font-size ，应用场景：设置字体相关样式时
B：设置颜色
- 可以直接设置颜色单词设置颜色：red yellow blue…
- 可以设置RGB值：1. 设置方式为直接设置数字：0-255；2. 设置百分比（值为：百分比*255）
- 可以通过16进制设置：范围:00-ff ,
- 设置语法：#ffffff(#+红色值+绿色值+蓝色值)
- 简写：#ffffff–>#fff （两两重复可以简写）
3.3 属性–边框和背景属性
- boder-width:10px 20px 30px 40px；（上右下左）
3.4 属性–盒模型属性
- 内联元素不能设置长和宽
- 内联元素的 外边距只能设置水平方向，不能设置垂直方向
- 内联元素的可以设置边框，但是垂直的边框不影响页面布局
- 内联元素与块级元素的类型转化（display）
- inline 将元素作为内联元素显示
- block 将元素作为块级元素显示
- inline-block 将元素作为行内块元素显示（使一个元素即有块元素特性也可以有行内元素特性）
- none 隐藏元素，并且不占位置；扩展（使用visibility用来设置元素的显示与隐藏）
- visibility 规定元素是否可见
- hidden : 虽然隐藏，但是位置还是被占用
- 其他
3.5 属性–布局属性
3.6 属性–文本属性
- 字体颜色 color
- 字体大小 font-size–并不是设置文字大小，而是设置的字体所在空间的尺寸
- font-family 设置字体
- 可以设置多个字体（font-family：微软雅黑,华文琥珀），执行顺序为：当前程序所在电脑以及字体是否能够显示此字体 ，最后如果设置的字体都不能正常显示则会选择浏览器默认的字体
- 查看本机上支持哪些字体方法：C:\Windows\Fonts
- font-style:normal（正常）itatic(斜体)…
- font 的使用…
- 文本的行间距无法直接设置，只能通过line-height来间接设置行高； line-height=行高-字体大小
- 应用：1 .单行文本垂直居中：line-height设置的值为所在行的行高 2. font：10px/20px 微软雅黑；
3.7 属性–过渡、动画和变换属性
3.8 属性–其他属性
- title 属性 ，可以给任何标签指定，当鼠标移入时，问题提示显示
2. overflow
* 解决问题：子元素超出父元素尺寸的话，产生滚动条
* 值：* visible ：默认值，不会对内容进行处理，超出的会进行超出显示* hidden :超出部分隐藏* scroll :超出部分会出现滚动条，但是如果未超出的话，依然会有滚动条样式* auto : 需要出现滚动条则出现滚动条，否则不出现 （推荐使用）
- demo
<style type="text/css">
.box1{width: 300px;height: 300px;background-color: aqua;overflow:hidden;}
.box2{width: 200px;height: 500px;background-color: green;
}
</style>
<div class="box1"><div class="box2"></div></div>3. 文档流
- 什么是文档流：文档流处在网页的最底层，它表示一个页面中的位置，我们所创建的元素均在文档流中；
- 元素在文档流中的特征：
- 块元素
- 块元素在文档流中会独占一行，块元素会自上向下排列
- 块元素在文档流中默认宽度是父元素的100%
- 块元素在文档流中默认高度为内容的高度
- 内联元素
- 内联元素在文档流中只占自身大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续从左向右
- 在文档流汇中内联元素的宽高是由内容决定
- 块元素
4. 浮动（float）
- 目的：使块级元素脱离文档流
- 元素：float(left right none)
- 特征：
- 当为元素设置浮动后（元素的float 属性为非none）,元素会立即脱离文档流，他下面的元素会立即向上移动
- 元素浮动以后，元素会尽量向左上或者右上漂浮，直到遇到他的父元素或者其他的浮动元素
- 如果浮动元素前的兄弟元素为块元素，则浮动不会超过此元素，最多是一样齐
- 浮动后，元素都会变为 内联块级元素，元素的长宽均需要被内容撑开
- 元素浮动后，后面的兄弟元素会上移，但是上移后，如果后面的兄弟元素中存在文字，则浮动元素不会覆盖后面兄弟元素中的文字（使用这个特性生成文章中图片环绕效果），下面为demo
<style type="text/css">.box1{height: 200px;width: 200px;background-color: greenyellow;float: left;}.p1{background-color: aqua; }</style><div class="box1"></div><p class="p1"> 这里面有若干文字..</p>5. 布局
布局分为：固定布局+响应式布局
6. 父元素高度塌陷
- 原因：在文档流中，当需求为父元素的高度需要由子元素内容决定时，当子元素设置浮动脱离文档流后，就会造成父元素的高度为0，形成塌陷，对后面的布局的元素造成错位。
- 解决：
- 方式一：父元素的高度固定写死（不推荐：父元素高度无法随着子元素内容变更而变更）
- 方式二：父元素设置：zoom:1;overflow:hidden; 此写法IE7以及以上所有浏览器
- 方式三：父元素设置：
.clearbox:after{content: "";display: block;clear: both;
}
/* 适用于IE6浏览器 */
.clearbox{zoom:1;
}* 方式四（终极写法：可以解决父元素高度塌陷+父子元素边框重叠问题）.clearfix：before,.clear:after{content:"";display:table;clear:both;}/* 兼容IE6 */.clearbox{zoom:1;
}
7. Clear
- 目的：清除浮动元素对本元素的影响，应用：解决高度塌陷问题
- 属性值：
- none
- left （清除本元素左侧的浮动元素对本元素的影响）
- right（清除本元素右侧的浮动元素对本元素的影响）
- both（清除对本元素影响最大的浮动）
<style type="text/css">.box1{height: 200px;width: 200px;background-color: greenyellow;float: left;}.box2{height: 300px;width: 300px;background-color: blueviolet;clear: left;}.box3{height: 400px;width: 400px;background-color: cornsilk;}
</style><div class="box1"></div><div class="box2"></div><div class="box3"></div>
8. 注意事项
- 初始化页面元素边距
<style type="text/css"></style>9. 定位（position）
- 目的：将指定的元素摆放到页面的任意位置（通过定位可以任意的摆放元素）
- 值：
- static
- relative：相对定位
- 当开启了元素的相对定位（开启定位指的是元素的position属性不为static）以后，二不设置偏移量，元素不会发生变化
- 相对于其正常位置进行定位
- 不会脱离文档流
- 相对定位会使元素提升一个层级
- 相对定位不会更改元素的性质（块级或者行内）不会发生变化
- 使用方法：position:relative;left:200px;top:200px;
- absolute 绝对定位-
- 相对于static定位以外的第一个祖先元素进行定位，如果所有的祖先元素都没有开启定位，则以浏览器窗口进行定位
- 开启绝对定位，元素会脱离文档流，并且会改变元素的性质（块级或者行内）
- 绝对定位会使元素提升一个层级
- fixed 绝对定位-
- 相对一浏览器窗口进行移动，且会固定在浏览器窗口某个位置，不会随着滚动条滚动
- 固定定位也是一种绝对定位
- 开启绝对定位，元素会脱离文档流，并且会改变元素的性质（块级或者行内）
- 绝对定位会使元素提升一个层级
- IE6 不支持固定定位
10. 元素的层级
- 如果定位缘元素的层级一样，则下面的元素会盖住上面的，可以通过Z-index 属性可以用来设置元素的层级
- 可以为z-index 指定一个正整数作为值，该值将作为当前元素的层级，成绩越高，显示越优先
- 对于没有开启定位（开启定位指的是元素的position属性不为static）的元素，不能使用z-index 属性
- z-index 只能作用于兄弟元素之间，即父元素的层级设置不会影响子元素的显示层级
11. 元素透明度
- opacity :设置元素背景透明度，设置的值区间为 0-1
- opacity 在IE8 及以下不支持，在IE8及其以下的写法为：filter:alpha(opacity=透明度) 注：透明度值为0-100
12. 背景属性
- 背景图片：backgroup-img:url(图片相对路径)
- 背景图片的显示方式：平铺，缩放…
13. CS或者js 文件压缩
使用工具进行压缩，目的是加快网页的加载速度
108-02-CSS相关推荐
- css专栏 01.css简介 02.css注释及语法结构
# 02.css注释及语法结构[toc]{type: "ol", level: [3]}### css注释 - 单行注释 ```css /*单行注释*/ ``` - 多行注释 `` ...
- Java EE之旅02 CSS基础
###css的简介 ####什么是css 概念:层叠样式表,css是对html进行样式修饰语言 层叠:就是层层覆盖叠加,如果不同的css样式对同一html标签进行修饰,样式有冲突的部分应用优先级高的, ...
- 02.CSS基础笔记及导入
CSS是什么 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS样式 CSS引 ...
- 02 css实现文字下划线动画效果
实现文字下划线从中间向两端延伸的动画效果,主要是通过css的transform和transition属性来实现,下面直接粘贴代码和效果图: <!DOCTYPE html> <html ...
- HTML、CSS综合02——css，样式表，选择器、盒子模型
回顾复习 什么是标签:标签由<tagName>开始,到</tagName>结束. xml的标签基本都是自定义的 html的标签,基本都是规定好的.(可以使用自定义标签)浏览器对 ...
- 【前端就业课 第二阶段】CSS 零基础到实战（02）标签类型、字体与图片
整个前端学习路线 以下路线为 CSDN C认提供: 如果想 快点搞完 并且 就业 可以选择超级实习生计划 如果有技术想稳定点找工作,可以C认证,C认证还可以 内推.招聘会 ,所以如果在校生想要稳一点, ...
- 前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
- 9.10 css
css css叫层叠样式表 ,用于给html添加样式 网页中如何嵌套style样式 1.行间样式(将style当做属性写在标签内) 例如:<P ></p> 2.行内样式(将st ...
- html 对话框 flatballoon,CSS纯样式实现箭头、对话框等形状
在使用第三方框架bootstrap的时候,本以为其是图片实现的小箭头,后来使用开发工具查看是用CSS来实现的,现记录如下: 理解完上面伪类的用法后,下面进入主题,直接贴上代码, border test ...
- 好程序员HTML5前端教程-css的引入方式和选择器
好程序员HTML5前端教程-css的引入方式和选择器 01.引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超 ...
最新文章
- JVM年轻代，老年代，永久代详解
- 编写jQueryUI插件(widget)
- tomcat配置manager
- ASP.NET的错误处理机制之一（概念）
- sh脚本和bash脚本_在脚本中使用Bash陷阱
- python读取指定字节_python读取指定字节及位置的文件内容
- swagger默认访问地址
- php怎么字符串转成json对象_php如何将字符串转成json_后端开发
- 计算机安装win10系统还原,详细教您win10怎么还原成win7
- 16秋南开计算机应用答案,南开16秋学期“计算机应用基础”在线作业.doc
- python循环结构教学设计_Python程序设计 循环结构说课稿
- Shell脚本自动源码包安装LA/NMP架构详解（赠软件包+脚本）
- 艾美智能影库服务器ip,艾美影库 篇一：艾美影库 | 精评丨性能与资源可兼得 艾美MS-200 高清影库...
- IKEA宜家社会责任验厂标准
- mysql DDL 语句
- 使用接口实现翻译日语
- 关于Linux中的docker-compose.yml配置文件
- 深度学习中的遥感影像数据集
- Flyweight模式——读书笔记
- 二极管反向恢复时间测试仪电脑程控测试系统智能识别示波器曲线演示分析