前端(二)-CSS
1、样式
1.1 行内样式
<h1 style="color:red;">行内样式</h1>
1.2 内部样式
CSS代码写在 <head> 的 <style> 标签中
<style>
h1{color: green; }
</style>
1.3 外部样式
<link rel="stylesheet" href="css/style01.css" type="text/css"/>
<!--
外部样式，引入使用link标签，写在head标签中,是单标签，但是rel属性和href属性是必须的，且rel="stylesheet"是固定的引入外部样式才可以生效,href属性指定外部文件的资源路径，type="text/css"可以省略;
-->
1.4 CSS优先级
- 就近原则;
2、选择器
2.1 基本选择器
2.1.1 标签选择器
<!--
选择器，基本作用是用于定位网页中的元素，进行样式美化，选取的是一组元素，不是一定是单个；
标签选择器，语法：标签名{声明1：声明2...}
-->/
h2{
color: #FF0000;
}
2.1.2 类选择器
<!--类选择器，语法：标签的class属性值{声明1：声明2...} -->
.author{
color: #00FF00;
}
2.1.3 id选择器
<!-- id选择器 语法：标签的id属性值{声明1：声明2...} -->
#conent{
color: #0000FF;
}
2.1.4 选择器的优先级
ID选择器 > 类选择器 > 标签选择器
2.2 高级选择器
2.2.1 层次选择器
| 选择器 | 类型 |
|---|---|
| E F | 后代选择器 |
| E>F | 子选择器 |
| E~F | 通用兄弟选择器 |
| E+F | 相邻兄弟选择器 |
2.2.2 结构伪类选择器
| 结构伪类选择器 | 功能描述 |
|---|---|
| E:first-child | 父元素的第一个子元素 |
| E:last-child | 父元素的最后一个子元素 |
| E F:nth-child(n) | 父元素的第nth的子元素(括号里面的n可以是1，2，3 even,odd) |
| E:first-of-tyope | 父元素指定类型的第一个子元素 |
| E:last-of-type | 父元素指定类型的最后一个子元素 |
| E F:nth-of-type(n) | 父元素指定类型的第nth的子元素 |
2.2.3 属性选择器
| 属性选择器 | 功能描述 |
|---|---|
| E[attr] | 选择具有属性attr的元素 |
| E[attr=val] | 选择具有属性attr的元素，且属性值为val的元素 |
| E[attr^=val] | 选择具有属性attr的元素，且属性值以val开头的元素 |
| E[attr$=val] | 选择具有属性attr的元素，且属性值以val结尾的元素 |
| E[attr*val] | 选择具有属性attr的元素，且属性值中包含val的元素 |
3、美化网页元素
3.1 dispaly 行内元素与块元素的切换
| 属性 | 说明 |
|---|---|
| display:block | 将元素显示为块元素，前后有换行符 |
| display:inline | 将元素显示为内联(行内)元素，前后没有换行符 |
| display:inlineblock | 将元素显示为行内块元素 |
| display:none | 将元素隐藏 |
3.2 字体样式
| 属性 | 说明 |
|---|---|
| font-family | 设置字体类型(字体) |
| font-size | 设置字体大小 |
| font-style | 设置字体风格 |
| font-weight | 设置字体粗细 |
| font | 设置字体的所有属性（字体风格→字体粗细→字体大小→字体类型） |
字体的粗细
| 值 | 说明 |
|---|---|
| normal | 默认值，定义标准的字体 |
| bold | 粗体字体 |
| bolder | 更粗体字体 |
| lighter | 更细体字体 |
| 100,200,300,400,500,600,700,800,900 | 定义由细到粗的字体400等于normal,700等于bold |
3.3 文本样式
| 属性 | 说明 |
|---|---|
| color | 文本颜色 |
| text-align | 元素水平对其方式 |
| text-indent | 首行文本的缩进 |
| line-heighr | 文本的行高 |
| text-decoration | 文本的装饰 |
3.3.1 color
- RGB
- RGBA
3.3.2 text-align
元素水平对其方式
| 值 | 说明 |
|---|---|
| left | 把文本排列到左边 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |
3.3.3 text-indent
- 首行缩进：text-indent：em或px；
3.3.4 line-heighr
- 行高：line-height：px；
3.3.5 text-decoration
| 值 | 说明 |
|---|---|
| none | 去除默认样式 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
3.3.6 vertical-align 垂直对其方式
常用图片与文字垂直对其；
| 值 | 说明 |
|---|---|
| middle | 垂直居中 |
| top | 顶部 |
| bottom | 底部 |
<!-- 图片与文字居中 -->
img,span{
vertical-align: middle;
}
3.4 文本阴影
<!-- text-shadow:颜色 x轴 y轴 阴影半径 -->
text-shadow:color x-offset v-offset blur-radlus
3.5 超链接伪类
| 伪类名称 | 说明 |
|---|---|
| a:link | 未点击访问时超链接样式 |
| a:visited | 单击访问后超链接样式 |
| a:hover | 鼠标悬浮其上的超链接样式 |
| a:avtive | 鼠标单机未释放的超链接样式 |
- 设置伪类的顺序：alink->a:visited->a:hover->a:active;
3.6 列表样式
- list-style-type
- list-style-image
- list-style-position
- list-style
| 值 | 说明 |
|---|---|
| none | 清除默认样式 |
| disc | 实心圆 |
| circle | 空心圆 |
| square | 实行正方形 |
| decimal | 数字 |
- list-style:none;常用于去除无序列表的小黑点
3.7 背景样式
2.7.1 常见背景样式
- 背景图片，background-image
- 背景颜色，background-color
2.7.2 设置背景图像
2.7.2.1 background-Image属性
- background-image:url(图片路径);
2.7.3.2 background-repeat属性
| 值 | 说明 |
|---|---|
| repeat | 沿水平和垂直两个方向平铺 |
| no-repeat | 不平铺，即只显示一次 |
| repeat-x | 只沿水平方向平铺 |
| repeat-y | 只沿垂直方向平铺 |
2.7.3.3 background-position属性
| 值 | 说明 |
|---|---|
| Xpos Ypos | 单位px |
| X% Y% | 使用百分比 |
| X,Y方向关键词 | left,center,right,top,center,bootom |
2.7.3.4 简写
- background: 背景颜色 背景图像 背景定位 背景不重复显示；
2.7.4.4 background-size
| 值 | 说明 |
|---|---|
| auto | 保持原样 |
| percentage | 百分比 |
| cover | 放大填充整个元素 |
| contain | 保持比例，缩小到正好可以放 |
3.8 CSS渐变样式
- background-image:linear-gradient(position,color1 color2...) posotion:渐变方向(可以时任意角度，向上的0deg)
4、盒子模型
4.1 盒子模型元素
| 元素 | 说明 |
|---|---|
| margin | 外边距 |
| border | 边框 |
| padding | 内边距 |
| height | 高 |
| width | 宽 |
4.2 边框
4.2.1 border-color
边框颜色；
| 属性 | 说明 |
|---|---|
| border-top-color | 上边框 |
| border-right-color | 右边框 |
| border-bottom-color | 下边框 |
| border-left-color | 左边框 |
| border-color | 上 右 下 左 |
4.2.2 border-width
边框粗细；
- border-width-上 右 下 左
4.2.3 border-style
边框样式；
- border-style-上 右 下 左
| 值 | 说明 |
|---|---|
| none | 清除默认样式 |
| dotted | 点线 |
| dashed | 破折线 |
| double | 双实线 |
4.2.4 简写
- border:粗细 样式 颜色；
4.2.5 border-collapse
border-collapse 属性是用来设置 table 表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
| 属性值 | 说明 |
|---|---|
| border-collapse:collapse | 边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
| border-collapse:separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
| border-collapse:inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
设置表格单元格边框的方法
直接设置表格table属性：cellspacing="0"
CSS方法1：border-collapse: collapse; 边框会合并为一个单一的边框；
CSS方法2：border-spacing:0; 表格的相邻单元格边框之间的距离为0
4.2.6 border-spacing
border-spacing是CSS2的一个属性。其作用是规定表格的相邻单元格边框之间的距离。如果表格的border-collapse属性值为collapse时，border-spacing设置无效。
border-spacing:h-length v-length;
h-length即单元格之间的水平距离；
v-length即单元格之间的垂直距离。
4.3 内外边框
4.3.1 margin 外边距
- margin-top
- margin-right
- margin-bottom
- margin-left
4.3.2 外边距妙用
外边距妙用，网页居中对齐：margin:0px auto;
网页居中对齐条件：1.块元素 2.固定宽度
4.3.3 padding 内边距
- padding-left
- padding-right
- padding-top
- padding-bottom
4.4 圆角边框
- border-radius: 左上 右上 右下 左下
4.5 盒子阴影
box-shadow:shadowtype x-offset y-offset blur-radus color;
shadowtypetype:阴影类型(默认外阴影，inset内阴影)；
5、浮动
5.1 display属性
| 值 | 说明 |
|---|---|
| block | 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 |
| inline | 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 |
| inline-block | 行内块元素，元素既有内联元素的特性，又有块元素的特性 |
| none | 元素隐藏 |
5.2 浮动
- float属性
| 值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 不浮动 |
5.3 清除浮动
- clear属性
| 值 | 说明 |
|---|---|
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧不允许浮动元素 |
| none | 允许 |
5.4 解决父级边框塌陷的方法
5.4.1 添加空div,并清除两边浮动
5.4.2 设置父元素的高度(灵活性差)
5.4.3 添加overflow属性(溢出处理)
| 属性值 | 说明 |
|---|---|
| visible | 默认值，内容不会被修剪，会呈现在盒子之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其他剩余内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其他剩余内容 |
5.4.4 父级添加伪类after
<div id="father" class="clear">
<div class="layer01"><img src="data:image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="data:image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="data:image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮动的盒子……</div>
</div>
.clear:after{
content: ''; <!--在clear类后面添加内容为空-->
display: block; <!--把添加的内容转化为块元素-->
clear: both; <!--清除这个元素两边的浮动-->
}
6、定位 posotion属性
6.1 relative 相对定位
相对自身原来位置进行偏移，偏移设置：top、left、right、bottom;
相对定位的规律
1.设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置 ；
2.设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响 ；
3.设置相对定位的盒子原来的位置会被保留下来；
4.浮动后，相对定位，相对于盒子浮动后的位置，进行定位，盒子原始位置不会保留；
6.2 absolute 绝对定位
absolute属性值：偏移设置： left、right、top、bottom；
绝对定位的规律
1.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移 ；
2.如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位 ；
3.绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响 ；
4.元素位置发生偏移后，它原来的位置不会被保留下来；
5.一般定位都是相对定位和绝对定位配合使用，父级元素先相对定位，子元素再绝对定位；
使用场景：下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景；
6.3 fixed 固定定位
偏移设置： left、right、top、bottom；
类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口；
使用场景：在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等；
6.4 z-index属性
调整元素定位时重叠层的上下位置 ；
1.z-index属性值：整数，默认值为0 ；
2.设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系 ；
3.z-index值大的层位于其值小的层上方；
7、动画
7.1 变形 transform
| 函数 | 说明 |
|---|---|
| translate() | 平移函数，基于X、Y坐标重新定位元素的位置 |
| scale() | 缩放函数，可以使任意元素对象尺寸发生变化 |
| rotate() | 旋转函数，取值是一个度数值 |
| skew() | 倾斜函数，取值是一个度数值 |
translate（） 平移 px
| transform:translate（x,y） | 同时向x,y轴偏移 |
|---|---|
| transform:translateX（x） | 只向x轴偏移 |
| transform:translateY（y） | 只向y轴偏移 |
scale() 缩放 直接写倍数
| transform:scale(缩放倍数) | 同时向x,y轴缩放，中心放大 |
|---|---|
| transform:scaleX(缩放倍数) | 只向x轴缩放，水平拉伸 |
| transform:scaleY(缩放倍数) | 只向y轴缩放，垂直拉伸 |
rotate() 旋转 deg
| transform:rotate(旋转角度deg) | 相对原来的位置顺时针旋转 |
|---|---|
| transform:rotateX(旋转角度deg) | 相横坐标顺时针旋转 |
| transform:rotateY(旋转角度deg) | 相对原来的位置顺时针旋转 |
skew() 倾斜 deg
| transform:skew(ax,ay) | 倾斜调度deg |
|---|---|
| transform:skew(ax) | 只设置x轴的倾斜 |
| transform:skew(ay) | 只设置y轴的倾斜 |
7.2 过度 transition
transition:[transition-property transition-duration transition-timing-function transition-delay]
| transition-property | 过度或动态模拟css属性 |
|---|---|
| transition-duration | 完成过度所需要时间 |
| transition-timing-function | 指定过度函数 |
| transition-delay | 过度开始出现的延迟时间 |
7.2.1 过渡属性（ transition-property ）
定义转换动画的CSS属性名称
1.IDENT：指定的CSS属性（width、height、background-color属性等） ；
2.all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用al；
7.2.2 过渡所需的时间（ transition-duration ）
定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）；
7.2.3 过渡动画函数（ transition-timing-function ）
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画 的快慢方式；
- ease：速度由快到慢（默认值） ；
- linear：速度恒速（匀速运动） ；
- ease-in：速度越来越快（渐显效果） ；
- ease-out：速度越来越慢（渐隐效果）；
- ease-in-out：速度先加速再减速（渐显渐隐效果）；
7.2.4 过渡延迟时间（ transition-delay ）
指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果 ；
- 正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发 ；
- 负值：元素过渡效果会从该时间点开始显示，之前的动作被截断 ；
- 0：默认值，元素过渡效果立即执行；
7.3 过度的触发机制
1.伪类触发
- ：hover 鼠标悬停和划过时的显示效果
- ：active 控制按钮被点击时的显示效果
- ：focus 获得聚焦对象的元素
- ：checked 选中
2.媒体查询：通过@media属性判断设备的尺寸，方向等 JavaScript触发：
3.用JavaScript脚本触发
特殊用法
<!--
在进行伪类触发后还可以对指定标签操作；点击li的时候还可以改变span的背景色；
<li><span>1</span> 雅诗兰黛即时修护眼部精华霜15ml</li>
-->
ul li:hover>span {
background-color: aqua;
border-color: aqua;
}
7.3 动画
8、项目经常使用的几个属性
项目新用属性
| width: auto； | 宽度自适应,可以决绝窗口缩放展示错乱(用在头部导航栏等) |
|---|---|
| border: 0px none; | 剔除边框(常用去掉input的边框) |
| outline: none; | 去除选中文本框的样式(常用去掉，点击输入框时的边框变蓝) |
| cursor: pointer; | 光标移入变成手(常用作按钮的属性) |
前端(二)-CSS的更多相关文章
- web前端知识大纲：系列二 css篇
web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- web前端开发CSS命名规范参考
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- 前端研究CSS之文字与特殊符号元素结合的浏览器兼容性总结
页面布局里总是会有类似 “文字 | 文字” 的设计样式,不同的浏览器存在严重偏差. 有兼容问题就要解决,下面总结了3种解决方案,分享给大家: 一.系统默认的样式 1.元素换行的段落 <div c ...
- 第二章、前端之css
目录 第二章.前端之css 一.css介绍 二.css语法 三.css几种引入方式 四.css选择器 五.css属性相关 六.css盒子模型 第二章.前端之css 一.css介绍 css(Cascad ...
- 前端之CSS：CSS选择器
前端之css样式(选择器)... 一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器, ...
随机推荐
- ESP32+L298N+MQTT+4G无线远程监控+四驱动小破车
ESP32+L298N+MQTT+4G无线远程监控+四驱动小破车 小车源代码 注意修改WIFI 信息 #include <analogWrite.h> #include <WiFi. ...
- AI年代，谁还用难用的Keil？快快换CLion!!! 破解+环境替换 [下]
keil环境的替代 1.首先 我这里大体框架引入大佬稚晖君的博客: https://www.bilibili.com/read/cv6308000/ 如果有需要配置标准库的可以参考这里: https: ...
- PhpStorm 中切换PHP8以上报错 VCRUNTIME140.dll 与PHP 版本不兼容
错误原因:PhpStorm 附带了旧版本或错误版本的vcruntime140.dll 解决方法: 打开PhpStorm VCRUNTIME140 存在目录 C:\Program Files\JetB ...
- linux基本指令总结
拖了好久的linux学习,终于开始啦 环境终于没问题了 边学边总结 一.常用指令 1.1 关机与开机 poweroff 马上关机 reboot 马上重启 1.2 目录文件操作命令 cd / 切换到根目 ...
- AI智能学生体测小程序解决方案
引言: 近年来,随着教育理念的提升,对学生综合素质的教育越发重视,特别是越发重视学生的身体素质提升,各阶段的升学考试也将体测纳入考核范围.学校也推出了各种体测锻炼促进手段,今天为您介绍一个基于小程序的 ...
- Pylon C++ Programmer's Guide
移步至Pylon C++ Programmer's Guide观看效果更佳 Getting Started pylon编程指南是一个关于如何使用Basler pylon C++ API进行编程的快速指 ...
- Hibernate 之Hibernate缓存
1.缓存:缓存是什么,解决什么问题? 位于速度相差较大的两种硬件/软件之间的,用于协调两者数据传输速度差异的结构,均可称之为 Cache(摘自Robbin的<缓存技术浅谈>).目的:让数据 ...
- java公式解析器学习与开发（1）
public class Evaluate { public static void main(String[] args) { Stack<String> ops = new Stack ...
- Blazor 组件库 BootstrapBlazor 中AutoComplete组件介绍
AutoComplete组件介绍 AutoComplete组件和文本框基本上样子是一样的,只不过AutoComplete组件还带有一个下拉列表,可以从中选择对应的内容. 其同样继承自Bootstrap ...
- 为什么Spring官方不推荐使用 @Autowired？
前言 很多人刚接触 Spring 的时候,对 @Autowired 绝对是爱得深沉. 一个注解,轻松搞定依赖注入,连代码量都省了. 谁不爱呢? 但慢慢地,尤其是跑到稍微复杂点的项目里,@Autowir ...