CSS基础
CSS 简介
CSS 指层叠样式表 (Cascading Style Sheets)
CSS 创建
CSS 语法
CSS注释以 /* 开始, 以 */ 结束
CSS Id 和 Class
- HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
- class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，可以在多个元素中使用。在 CSS 中，类选择器以一个点"."号显示
- 你也可以指定特定的HTML元素使用class。p.center {text-align:center;}所有的 p 元素使用 class="center" 让该元素的文本居中:
CSS 创建
插入样式表的方法有三种:
- 外部样式表(External style sheet):当样式需要应用于很多页面时，外部样式表将是理想的选择
- 内部样式表(Internal style sheet):当单个文档需要特殊的样式时，就应该使用内部样式表
- 内联样式(Inline style)
- 多重样式
- 如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 (如果重复的话，按优先级，不重复都要）
- 内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
- 内联样式 > 内部样式表 > 外部样式表 > 浏览器样式表
1、ID #id 2、class .class3、标签/元素 p 4、通用 *5、属性 [type="text"]
6、伪类 ：hover 7、伪元素 ::first-line 8、子选择器、相邻选择器
6、伪类 ：hover 7、伪元素 ::first-line 8、子选择器、相邻选择器
CSS 背景
当使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position
background-image
background-repeat
background-attachment
background-position
CSS 文本格式
- 文本颜色
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
- 文本的对齐方式:text-align
- 文本修饰 text-decoration
- 文本转换 text-transform
- 文本缩进 text-indent
- 字符之间的空间 letter-spacing
- 行之间的空间 line-height
- ...
CSS 字体
- 字体系列
p{font-family:"Times New Roman", Times, serif;}
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
- 字体系列 font-style
- 字体大小 font-size
请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
也可以用百分比
- font 在一个声明中设置所有的字体属性，不用加逗号
CSS 链接
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
相当于生命周期钩子，可以对颜色，大小，形式等进行调节
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
相当于生命周期钩子，可以对颜色，大小，形式等进行调节
CSS 列表
list-style-type
list-style-image: url('sqpurple.gif');
CSS 表格
边框：
边框折叠：border-collapse
宽度高度
文本对齐
表格填充：padding
表格颜色
CSS 盒子模型
width 对应的是content
border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
CSS 边框
- 边框样式 border-style:dotted dashed solid groove
- 边框宽度 border-width
- 边框颜***border-color
- 边框-单独设置各边 border-top-style
不可以加逗号！！！（字体加逗号是因为备用）
段落也可以有边框属性
CSS 轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
CSS margin(外边距)
Margin：margin-top...
😉类似于border-style,只不过值是px或者百分比
CSS padding（填充）
用法类似于margin
CSS 分组和嵌套选择器
- 分组选择器
为了尽量减少代码，你可以使用分组选择器。每个选择器用逗号分隔
h1,h2,p
{
color:green;
}
h1,h2,p
{
color:green;
}
- 嵌套选择器
p.class
CSS 尺寸
CSS Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏
隐藏元素
- {display:none;} 可以隐藏某个元素，且隐藏的元素不会占用任何空间
- {visibility:hidden;} 该元素虽然被隐藏了，但仍然会影响布局。
CSS Display - 块和内联元素
- 块元素是一个元素，占用了全部宽度，在前后都是换行符。<h1>、<p>、<div>
- 内联元素只需要必要的宽度，不强制换行 <span> <a>
li {display:inline;}
span {display:block;}
CSS Position
- static
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
静态定位的元素不会受到 top, bottom, left, right影响。
- relative
相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
- fixed
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
即使窗口是滚动的它也不会移动：
- absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
- sticky
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
- 重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
z-index:-1;
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
z-index:-1;
- 裁剪元素的外形 clip:rect(0px,60px,200px,0px);
- 滚动条来显示元素内溢出的内容 overflow: scroll;
- cursor:pointe
CSS Float
- 几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻
- 清除浮动 clear:both; 指定元素两侧不能出现浮动元素。
!!!! 多层次标签耦合
CSS 布局
- 元素居中对齐：margin: auto; 如果没有设置 width 属性(或者设置 100%)，将不起作用
- 文本居中对齐：text-align: center
- 图片居中对齐：display: block;放入块中，再margin: auto;
- 左右对齐：position: absolute;当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding
使用 float 方式，子元素设置了浮动且将溢出，这时可以使用 "overflow: auto;" 来解决该问题
- 垂直居中对齐：padding: 70px 0;---父元素的高度不固定
使用 line-height 如果文本有多行vertical-align: middle; 此时应该用<!DOCTYPE html>
使用 position 和 transform
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);（返回元素大小的一半）
top: 50%;
left: 50%;
transform: translate(-50%, -50%);（返回元素大小的一半）
当元素宽度小于父元素时（必须设定宽度），里面加一个div空标签，把它的高度设为100%，宽度设置为0，再给它一个vertical-align:middle样式，
同样的给class="box"的div一个vertical-align:middle样式，那么box就可以在div里面垂直居中了。
CSS 组合选择符
- 后代选择器(以空格 分隔)
- 子元素选择器(以大于 > 号分隔）只能选择作为某元素直接/一级子元素的元素。外面不能包裹类似<span>
- 相邻兄弟选择器（以加号 + 分隔） 可选择紧接在另一元素后的元素，且二者有相同父元素
- 普通兄弟选择器（以波浪号 ～ 分隔）
CSS 伪类---重点学习
伪类可以理解为可以直接使用的函数：
p > i:first-child
input:focus
li a:hover:not(.active) 链式
CSS 伪元素
p::firsr-line
CSS 导航栏
链式反应，当根据伪类，更改对应的满足条件的元素的格式
CSS 提示工具
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
border-color 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。
我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:
CSS 图片廊
CSS 图像透明
opacity
CSS 图像拼合技术
img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
先确定容器，然后放入裁剪的图片
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
先确定容器，然后放入裁剪的图片
CSS 媒体类型
@media 规则
CSS 属性选择器
具有特定属性的HTML元素样式不仅仅是class和id。
- title
[title]
{
color:blue;
}
{
width:120px;
margin-left:35px;
display:block;
}
{
color:blue;
}
- input
{
width:120px;
margin-left:35px;
display:block;
}
CSS 表单
input[type=text]
textarea
select
CSS 计数器
CSS 计数器使用到以下几个属性：
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
- counter-reset - 创建或者重置计数器
- counter-increment - 递增变量
- content - 插入生成的内容
- counter() 或 counters() 函数 - 将计数器的值添加到元素 结果是数字
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
CSS 网页布局
根据位置创建相应的类
CSS !important 规则
CSS 中的 !important 规则用于增加样式的权重。
!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。
使用 !important 是一个坏习惯
!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。
使用 !important 是一个坏习惯
CSS3 简介
CSS3 边框
- border-radius 圆角
- box-shadow 阴影
- border-image 图片
CSS3 圆角
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
按照顺序来，如果缺少就按照对角补充原则
CSS3 背景
- background-image
可以给不同的图片设置多个不同的属性，中间用逗号隔开
#example1 { background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat; }
- background-size
- background-origin:background-origin:content-box;
- background-clip:背景剪裁属性是从指定位置开始绘制。 background-clip: content-box;
CSS3 渐变
canvas使用的是驼峰法则，css用的是-
线性渐变
- background-image: linear-gradient(to bottom right, red, yellow);
- background-image: linear-gradient(-90deg, red, yellow); 主要角度
- 多个颜色节点 background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
- 使用透明度 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
- 重复的线性渐变 background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。
10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。
85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。
10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。
径向渐变
- 设置形状
background-image: radial-gradient(circle, red, yellow, green);
- 渐变的大小
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
两个方向的渐变半径，都以最近的为准
- 重复的径向渐变
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
CSS3 文本效果
- text-shadow
水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：(可以多个，此时同类应该用，隔开）
text-shadow: 5px 5px 5px #FF0000;
- box-shadow:
- text-overflow: ellipsis(...)/clip(截断）
over-flow 可以滑动
- word-wrap：自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：
word-wrap:break-word;
- word-break 单词拆分换行
word-break: break-all;
CSS3 字体
可以下载自己喜欢的字体
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
CSS3 2D 转换
- translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
transform: translate(50px,100px);
- rotate() transform: rotate(30deg); 绕着圆心旋转
- scale() 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
transform: scale(2,3);
- skew() 分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
transform: skew(30deg,20deg);相当于挤压矩形
- matrix() matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
CSS3 3D 转换
translate3d(x,y,z)
translateZ(z)
CSS3 过渡
必须规定两项内容：指定要添加效果的CSS属性；指定效果的持续时间。
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
CSS3 动画
- 先定义关键帧
@keyframes myfirst
{
from {background: red;} 相当于0%
to {background: yellow;} 相当于100%
}
{
from {background: red;} 相当于0%
to {background: yellow;} 相当于100%
}
- 使用
div
{
animation: myfirst 5s linear infinite alternative;
}
{
animation: myfirst 5s linear infinite alternative;
}
animation-name
animation-duration
aniamtion-timing-function
animation-delay
CSS3 多列
- column-count ：column-count: 3;
- column-gap : column-gap: 40px;
- column-rule-style : column-rule-style: solid;
- column-rule-width : column-rule-width: 1px;
- column-rule-color : column-rule-color: lightblue;
- column-rule : 简化的设置的边框的厚度，样式及颜色：
- column-span ： column-span: all;
- column-width ：column-width: 100px;
CSS3 用户界面
- outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
- 轮廓与边框有两点不同：1、轮廓不占用空间 2、轮廓可能是非矩形
-
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
resize属性指定一个元素是否应该由用户去调整大小
div { resize:both; overflow:auto; }
CSS 图片
- 圆角图片
border-radius: 8px;
}
- 图片滤镜
filter: grayscale(100%); 黑白滤镜
- 图片 Modal(模态)
首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。
然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：
然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：
后面的感觉类似于实战的感觉
CSS 按钮
CSS 分页实例
ul ol 进行格式设置
面包屑导航
ul ol 进行格式设置
CSS3 弹性盒子
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
display: flex;
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
display: flex;
选择器
普通选择器：
组合选择器：
属性选择器：在CSS3中借鉴了类似正则表达式的方法
E[arr^="val"] 匹配以val开头的属性
E[arr$="val"] 结尾
E[arr*="val"] 包含
伪类选择器：
- css2
E:first-child
E:link/visited/hover/activate
E:focus
- css3
E:enabled 被激活的元素
E:disabled 禁用的元素
E:checked
E::selection 选中的元素
- css3结构性伪类元素
E：nth-child(n) 第n个子元素 当n可以是odd、even。
E：nth-last-child(n) 单数第几个元素
E：last-child
E:empty
伪元素选择器
- CSS2
E::first-line
E::first-letter
E::before
E::after
before 和 after 使用注意点:
1. 必须设置 content
2. 默认是行内元素
如果要设置大小, 需要转换显示模式
display: block/inline-block;
或者定位position: absolute/fixed;
3. before 和 after 都是伪元素, 不是真实存在的元素, 不能添加 hover,
且 不能通过 js 进行获取
1. 必须设置 content
2. 默认是行内元素
如果要设置大小, 需要转换显示模式
display: block/inline-block;
或者定位position: absolute/fixed;
3. before 和 after 都是伪元素, 不是真实存在的元素, 不能添加 hover,
且 不能通过 js 进行获取
?E:target
标签展示原则：冲突的覆盖，不冲突的叠加3
HTML5布局之路
3.5 CSS代码规范
书写风格：大括号前后加空格，冒号后面空格
命名：用-或者_连接
样式书写顺序：显示样式（float,position,display等）- 自身样式（宽高边框）-文本样式-CSS新样式
3.7 盒模型
为一个元素的左、右、底设置为10像素 实线 红色
border: 10px solid red
border-top:0
3.7.7 盒模型的问题区
必须先设置边框样式，才可以设置边框的其他属性
如果想要突出显示一个元素可以修改其背景，如果是标记其边框的话，很容易导致盒模型的大小发生变化
设置如图所示的格式：
div {
width: 0px;
height: 0px;
border-width: 50px;
border-style: solid;
border-color: red black green yellow;
}
4. 1. 4 浮动特效分析
水槽原理特性小结
float : left 表示 向左浮动，标签（或元素）从右边向上浮起，再从右向左浮动到水槽左边
float : right ；表示向右浮动，标签从左边向上 起，再从左向右浮动到水槽的右边
在浮动过程 ，如果遇到 方向的其 元素，有可能会被“阻碍”
在浮动过程中，左浮动的元素和右浮动的元素并不会互相干涉、阻碍对方运动。
在物理空间的占用方面，左右浮动元素会互相影响
🤩可以为一个元素设置多个类，不同的类名使用空格进行分隔即可，一个元素可以有 个或多个类，并无限制
