学习前端系列-CSS - Pursue wisdom love fun

CSS

CSS(Cascading Style Sheets): 层叠样式表，包括一个选择器和一组属性。

CSS介绍

/*css如何工作的*/
1. 浏览器把HTML和CSS转化为DOM(文档对象模型, 是树形结构)
2. 浏览器显示DOM内容
/*浏览器会解析HTML并通过它创建DOM, 之后解析CSS, 然后根据选择器将CSS属性更新到DOM*/

/*应用*/
/*外部样式表*/
<head><link rel="stylesheet" href="style.css"></head>
/*内部样式表*/
<head><style>style.css的内容</style></head>
/*内联样式*/
<p style="color:red;">test</p>

/*规则*/
/*元数据*/ @charset @import 'custom.css'; /*导入其他css文件*/
/*嵌套/条件语句*/ @doucument @media(min-width: 50px){}
/*描述性信息*/ @font-face

/*选择器*/
/*1. 简单选择器*/
类型选择器
<p> </p> <div> </div>
p {}
div {}

类选择器
<div class="first done"> </div>
.first {}
.done {}

ID选择器
<p id="myid"> </p>
#myid {}

通用选择器
* {}

/*2. 属性选择器*/
存在和值属性选择器
<li data-vegetable="liquid"> </li>
[data-vegetable] {} 所有具有data-vegetable属性的元素
[data-vegetable="liquid"]{} 属性等于liquid的元素
[data-vegetable~="spicy"]{} 属性包含spicy的元素

子串值属性选择器(伪正则)
[attr|=val] {} attr属性值是val或以val-开头的元素
[attr^=val] {} 以val开头的,包含val的元素
[attr$=val] 结尾
[attr*=val] 子字符串

/*3. 伪类和伪元素*/
一个链接的伪类
a {}
a:visited {}

a:hover,
a:active,
a:focus {}

伪元素
[href^http]::after {content: 'a'} 在链接后面增加一个a

/*4. 组合器和多重选择器*/
A, B {} 匹配A(和/或B)的任意元素
A B {} B是A的后代节点(B是A的子节点或子节点的子节点)
A > B {} B是A的直接子节点
A + B {} B是A的下一个兄弟节点(AB有相同的父节点, 并且B紧跟在A的后面)
A ~ B {} B是A之后的兄弟节点的任意一个

h1, h2, h3 {} 应用同一规则的选择器组

/*CSS的值和单位*/
绝对单位 px mm cm in pt pc
相对单位(当前元素字号(font-size)或视口(viewport))
em 1em与当前元素的字体大小相同, 默认16px
ex, ch 小写x的高度和数字0的宽度
rem 与em一样, 但它总是等于默认基础字体的大小, 继承的字体大小不起作用, 但旧版IE不支持
vw, vh 是视口宽度的1/100和高度的1/100

margin: 0; 0可以无单位
line-height: 1.5; 无单位表示乘法因子

width: 50%;

/*颜色*/
现代计算机中可用的标准颜色系统是24位, 通过不同的红 绿 蓝通道, 每个通道有256种不同的值, 从而显示出大约1670万种不同的颜色(256x256x256=16,777,216)

color: #ff0000; 6个16进制的数, 每对16进制数代表一个通道
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); 0.5表示透明度
opacity: 0.5; css透明度属性

background-image: url('test.png') url()表示函数

/*层叠和继承*/
/*因素 */
重要性
!important 尽量不用

专用性(计算专用性值)
用4个不同的数字表示
千位 声明在style属性中 1000
百位 包含ID选择器 0100
十位 包含类选择器 属性选择器 伪类 加1
个位 在整个选择器每包含一个元素选择武器或伪元素就加1

源代码次序
后面的优先

/*继承*/
color: inherit; 继承父元素
color: initial; 与浏览器默认值一样
color: unset; 重置为其自然值
color: revert; 如果当前节点没有应用任何样式, 则该属性恢复到它拥有的值

/*盒模型*/
weight height 表示内容框的宽度和高度
padding 表示内容框的外边缘与边间的内边缘之间的距离 上右下左
border 表示内边距的外边缘和外边距的内边缘之间 border: 1px solid black;
margin 表示CSS框周围的外部区域

溢流
overflow: auto; 滚动条
overflow: hidden; 隐藏
overflow: visible; 默认显示在盒子的外边

背景裁剪
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

轮廓
outline 在边框之外, 外边距区域之内

/*CSS框类型*/
display: block; 会独占一行
display: inline; 不会, 设置宽高无效
display: inline-block; 不会独占一行, 但能设置宽高, 要保持边框完整性, 第一行没有足够的空间, 下一行 , 一行空间都不够, 在里面换行

样式化文字

/*字体*/
p {
    color: red;
    font-family: arial, "Trebuchet MS", sans-serif; /*字体栈, 依次寻找*/
    font-size: 1.4rem;
    font-style: normal; italic oblique /*斜体*/
    font-weight: normal; bold lighter bolder /*粗细*/
    text-transform: none; uppercase lowercase capitalize full-width /*转换字体*/
    text-decoration: none; underline overline line-through /*下划线*/
    text-shadow: 4px 4px 5px red; /*阴影*/

    text-align: left; right center justify /*对齐*/
    line-height: 1.5; /*行高*/
    letter-spacing: 2px; /*字母和字母之间的间距*/
    word-spacing: 4px; /*单词和单词之间的间距*/
}

/*列表*/
ol {
    list-style-type: upper-roman; /*设置符号样式*/
    list-style-position: inside; /*符号位置*/
    list-style-image: url(star.svg); /*自定义符号图片*/
    background-size: 1.6rem 1.6rem; /*背景图片的大小*/
    background-repeat: no-repeat; /*只复制一次*/
}
<ol start="4" reversed> 从4开始
    <li value="2"></li>
</ol>

/*链接*/
a {} 顺序不能乱
a:link {} 默认
a:visited {} 已经访问过
a:focus {} 被选中时, 如tab键
a:hover {} 鼠标停留在这个链接
a:active {} 被点击

a[href*="http"]{ /*给http的链接添加背景图*/
    background: url('');
    background-size: 16px 16px;
    padding-right: 19px;
}

/*Web字体*/
@font-face{ /*自定义字体*/
    font-family: "myFont";
    src: url("myFont.ttf"); /*下载字体*/
}
html {
    font-family: "myFont";
}

样式化区块

/*盒子的高级属性*/
width: 70%
max-width: 1280px
min-width: 480px 设置宽的约束, 通常响应式设计的时候用, 设置最值

margin: 0 auto 父容器居中

一个盒子的宽度 = width + padding + border
box-sizing: border-box 完全改变盒模型, 改变总宽度, 使总宽度=width, 其他自动缩小

box-shadow: 5px 5px 5px rgba(0,0,0,0.7) 水平偏移 垂直偏移 模糊半径 颜色

.filter { /*过滤*/
  -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
  filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
}

background-blend-mode: multiply 背景混合模式
mix-blend-mode: multiply 元素混合模式

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

/*背景*/
background-color: yellow;
background-image: url();
background-repeat: repeat no-repeat repeat-x repeat-y
background-position: 99% center 位置
background-image: linear-gradient(to bottom, yellow, orange 40%, yellow) 渐变色
background-attachment: scroll fixed local 当内容滚动式, 滚动 固定 滚动
background-size: 16px 16px

/*边界*/
border-radius: 20px 边界圆角
border-image-source: url()
border-image-slice: 40
border-image-repeat: stretch repeat round space

CSS排版

/*细节*/
浮动 定位 CSS表格 弹性盒子 网格

/*浮动*/
允许元素浮动到另一个元素的左侧或右侧, 而不是默认的堆叠, 可以让两个div并列显示
float: left rigin none inherit

clear: left right both 清除浮动

/*定位*/
允许我们将一个元素从它在页面的原始位置准确地移动到另外一个位置
.positioned {
    position: relative; /*相对周围元素*/
    background: yellow;
    top: 30px; /*下, 右移*/
    left: 30px;
}

position: static; 静态定位 默认
postion: absolute; 绝对定位 父节点的边缘
postion: fixed; 浏览器窗口边缘
postion: sticky; 相对位置和固定位置混合, 一直滚动到一个阈值, 固定
z-index: 1; 更改堆叠顺序, 默认为auto, 实际为0

/*正常布局*/
首先, 取元素的内容放在一个独立的元素盒子中, 然后在其周边加上内边距 边框 外边距
默认, 一个块级元素的内容宽度是其父元素的100%, 其高度和其内容高度一致, 行内元素的高 宽和内容一致
默认, 块级元素按顺序放置, 每个块级元素会在上一个元素下面另起一行, 是垂直组织的
行内元素不会另起一行, 只要其父级块元素的宽度有足够空间, 会安排在一行, 如空间不够, 溢出的元素会移到新的一行
如果相邻的元素都设置了margin并且连个margin有重叠, 那么大的设置会保留, 小的会消失, 这被称为外边距叠加

/*弹性盒子*/
display: flex inline-flex 给父元素设置
flex容器 flex container 父元素
主轴 横向 main start main end
交叉轴 垂直 cross start cross end
flex项 盒子内的元素

flex-direction: columm 设置主轴的方向
flex-wrap: wrap 换行, 溢出的元素会移到下一行
flex-flow: row wrap 上面的缩写
align-items: stretch center 默认flex项沿交叉轴的方向拉伸以填充父容器
justify-content: flex-start flex-end center space-around space-between 控制flex项在主轴的位置

flex: 1 200px 子元素沿flex主轴的可用空间, 最低
order: 1 排序

/*网格布局*/
略

/*多列布局*/
column-count: 3 浏览器计算三列
column-width: 200px 浏览器按指定的宽度创建列
column-gap: 20px 列间隙
column-rule: 4px dotted rgb(19, 185, 227) 线条
break-inside: avoid 避免内容拆分 折断
page-break-inside: avoid