后盾人教程_最专业的后盾

CSS 3 系列课程开课了，老铁快上车吧

一 引用CSS差别

link标签：外部

style标签：内联

style属性：嵌入式

注释：/* */

结尾：分号，不能省略

css导入其他css样式：

@import url（“path”）；

适合组件化设计

vscode支持less：安装easy less插件，写less自动生成css

vscode同步更新浏览器：按照live server插件，html文件里右键选择open with live server

玩透 CSS 3 选择器，网页元素任意操作

选择网页某个元素

选择器名 {

}

一 标签选择器

*：通配符，全部选择

h1：选择h1标签

h1,h2：并列选择h1和h2标签

一般用的少

二 类选择器：

.success：class属性为success的标签

三 ID选择器：

#content ：id属性为content的标签

id属性不仅给css用，也给js用

标签元素使用多类样式声明：属性中的各个选择器用空格分开

四 结构选择器：

h1 p：指定标签位置范围，h1标签里的后代p标签，空格代表每一层所有后代（所有选择器没有分隔符）

h1>p：h1的子元素p

h1 p~a：h1后代里p标签的兄弟a标签

h1 p+a：h1后代里p标签紧挨着的兄弟a标签

五 属性选择器

h1[title][id]：h1标签要含有title/id属性，类似jq的选择器使用

h1[title=”a”]：h1标签要含有title属性，值要是a

内容值筛选：

title这样的属性，可以跟着^这样的符号，代表值开头要是什么，类似正则表达式

^：开头包含

$：结尾包含

*：含字符串

~：含单词

|：字符串开头或者用-连接

六 伪类选择器

选择元素的不同状态或者不确定存在的元素

a:link：a标签元素被点中后

目标：:target伪类，当元素被跳转到后则选中

根伪类：:root伪类，根元素

空元素：:empty伪类，没有内容的标签

七 结构伪类选择器

首尾元素伪类：:first-child, last-child，所有元素里的第一个/最后一个，是每一层级的；:first-of-type，:last-of-type，某类型元素的第一个/最后一个

唯一子元素伪类：:only-child，only-of-type

元素编号：:nth-child(索引)，索引为n代表所有，从1开始；even代表奇数，odd为偶数；-n+2：某类型前两个；nth-of-type

从元素尾部伪类：:nth-last-child；:nth-last-of-type

not排除选择器：h1>p:nth-child(-n-3):not(1)，排除元素。

八 表单伪类

比如input:disabled等，代表状态，enabled，focus，checked，required

九 文本伪类

::first-letter：第一个字符

::first-line：第一行

::after：在之后添加内容，定义内容属性

::before：在之前添加内容，定义内容属性

搞定CSS 3权重，写CSS样式更流畅

层叠样式，是不同的选择器效果附加到元素上。如果有冲突，要使用权重排列

一 id与class权重

id权重：100

class权重：10

二 权重计算

同类权重，后出现的覆盖前面的

标签/伪元素：1

属性权重：10

行内：1000

三 强制权重优先级

对属性的配置里后加!important

四 元素继承权重

子元素继承父级元素的样式规则

继承没有权重，是NULL

不是所有规则都可以继承，比如边框

五 通配符与继承博弈

通配符权重是0

0 > NULL

六 预处理器

less

sass

带你玩转 CSS 3 文本，打牢前端开发基础

一 字体

font-family：用逗号分隔多个字体类型

@font-face：定义字体，引入自带字体

二 字重与字号

font-weight：字重，粗细

font-size：字号，相对值是父级字体

em：相对单位，父级元素的font-size

三 颜色与行高

color：

line-height：一般是1.5em

四 组合定义与倾斜风格

font-style：italic

组合：用font：来写，有顺序要求

五 字符大小写转换

font-variant，text-transform控制

六 文本线条

text-decoration来添加上划线或者下划线

七 文本阴影

text-shadow

八 文本溢出与空白处理

white-space：pre，保留原样式空白

溢出：white-sapce：nowrap，加上overflow：hidden，text-overflow：ellipsis，溢出部分隐藏

九 文本对齐与缩进

对齐：text-align指定水平方向对齐，vertical-align指定垂直方向对齐，可以是数值也可以是枚举

缩进：text-indent：em单位比较好

十 排版模式

letter-spacing：字符间距

word-spacing：单词间距

排版方向：writing-mode指定从哪里开始写

word的排版基本都可以实现

CSS3 盒子模型全面掌握

指定顺序：上右下左

auto：自动值

外距：margin

居中定义：块级元素左右设为auto。margin ： 0，auto

边距合并：向上边距和向下边距，取最大的

负值：外边距负值，溢出，左边的向右边动

宽高：width，height

内边距：padding

尺寸限制：box-sizing：border-box，固定大小

元素边框：border-style：边线样式，border-width：粗细，border-color：颜色，border-top：联合设立上部

圆角控制：border-radius，可以是数值也可以是百分数

轮廓线：outline-style等，不占据空间

元素显示：display：none，隐藏；block：块元素，inline-block，行级块（可以定宽高）；inline：文本行

visibility：hidden，不可见但是占位置

overflow控制溢出：scroll，滚动条；auto，自动，hidden：隐藏

尺寸控制：width，height，min-width，max-height，可以是数值和百分数

fill-available：属性值，块级元素自动充满高度或者宽度，要加–webkit这样的前缀

fill-content：块级元素根据内容设定大小

max-content：自适应，自动设为最大大小属性

min-content：自动设为最小大小属性

全面掌握 CSS 3 背景与渐变应用技巧

背景颜色：background-color

背景图像：background-image：url（）

背景裁切：background-clip，content值为背景应用于内容区

背景重复：background-repeat，no-repeat不重复，repeat-x在x轴重复

滚动：background-attachment，fixed为固定，比如应用于水印图片

位置：background-position，top right center等值，也可以是百分数，也可以是100px之类的数，也可以是负值

尺寸定制：background-size，可以是百分数，auto数值，cover，contain（会有留白）

多图：backg-image用逗号间隔多个图片

组合：background一句话定义多个属性

盒子阴影：box-shadow，

背景色激变：保存一像素图片，然后重复；linear-gradient()这个是线性渐变函数，可用于background

径向渐变：用函数radial-gradient（）

镜像标志位：标志位指定渐变开始结束的点，在渐变函数的颜色部分后边直接指定，控制渐变的范围

颜色渐变中间阈值：渐变过渡中间点，隔在颜色之间，控制渐变色占的比例

渐变重复：repeat-linear-gradient()

使用 CSS 3 操作数据内容样式，CSS没那么简单哟

数据使用表格或者列表展现

section，ul，li可以用display指定为table-header-group，table-row-group，table-row，table-cell

表格标题：caption标签

对齐：文本用文本对齐，表格用块对齐方式

表格颜色：与div差不多

表格背景：与div差不多

细线表格：border-collapse，设置collapse

间距：border-spacing

空白单元格：empty-cells：可以是hide

细线无边框：table标签的border：none

数据表格：tr：hover，鼠标放在表格上，cursor：pointer，鼠标形状

列表符号：list-style-type，list-style-image

列表符号多图背景：li等标签可以直接使用background-image

after，before

：：after

：：before

content指定内容，attr读取属性

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/167916.html原文链接：https://javaforall.cn