css-02

最新推荐文章于 2024-02-10 12:00:00 发布
最新推荐文章于 2024-02-10 12:00:00 发布
阅读量103 收藏
点赞数
分类专栏： 查漏补缺 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41860476/article/details/108899611
版权

目录

css加载与阻塞

css样式优先级

background简写时的顺序

 关于文本的属性

关于字体的属性

列表相关属性

表格可以用到的属性

边框（border）相关属性

轮廓（outline）相关属性

margin、padding、border简写时共有特性

css加载与阻塞

不会阻塞DOM树的解析

会阻塞DOM树的渲染

会加载阻塞后面js语句的执行

css样式优先级

内联>内部>外部 【注：当外部样式的引用在内部样式之后，则覆盖内部样式中相同的样式】

选择器优先级：

id选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素

background简写时的顺序

background属性：

background、background-color、background-image、background-repeat、background-attachment、background-position

background：color image repeat attchment position;

 关于文本的属性

  1. 字体颜色：color
  2. 文本对齐方式：text-align
  3. 文本修饰：text-decoration
  4. 文本缩进：text-indent
  5. 文本转换：text-transform: uppercase | loweicase | capitalize
  6. 行高：line-height
  7. 文本阴影：text-shadow：水平阴影 垂直  模糊值  颜色
  8. 元素的垂直对齐：vertical-align
  9. 元素空白处理：white-space
  10. 字符间距:letter-spacing（英文单词的字母之间）
  11. 字间距：word-spacing（英文单词之间 | 汉字）
  12. 设置或返回文本是否被重写：unicode-bidi（少见）

关于字体的属性

字体系列：font-family

字体样式：font-style: noraml | italic（斜体） | oblique（倾斜）

字体大小：font-size

字体粗细：font-weight

列表相关属性

列表项标志的类型：list-style-type

列表项标志的位置 ：list-style-position

将图像设置为列表项标志：list-style-image

简写顺序

list-style: type position image;

表格可以用到的属性

border-width、border-style、border-color、border-collapse

其他通用：height、width、text-align、vertical-align、paddding、background-color... 

边框（border）相关属性

边框样式：border-style

边框宽度：border-width

边框颜色：border-color

简写：

border： width   style(required)   color;

轮廓（outline）相关属性

概念：是绘制于元素周围的一条线，位于边框边缘的外围，可以起到突出元素的作用

【注：轮廓不占空间】

轮廓颜色：outline-color

轮廓样式：outline-style

轮廓宽度：outline-width

margin、padding、border简写时共有特性

 四个值：上  右   下  左

三个值：上   左右  下

两个值：上下    左右

一个值：上下左右

小黑不白爱吃糖
关注
专栏目录
02-Css
Xstruggle的博客
04-18 226
CSS-2
qq_39290137的博客
03-30 1008
transition 过渡 transition-property 过渡属性 transition-duration 过渡持续时间 transition-delay 延迟过渡 transition-timing-function 过渡速度曲线 animation 动画 @keyframes 关键帧规则 animation-name 动画名称 animation-duration 动画持续时间 animation-delay 动画延迟时间 animation-iterat
基于css-vars-ponyfill实现换肤
小马甲
02-10 1601
自定义变量颜色：对于业务来说，可能基础色并不能满足所有业务的颜色覆盖，或者每种主题下基础色并不能一一对应，此时自定义变量颜色，这个功能变得必不可少。主要原理也是根据每种主题可以自己填写对应的业务需要的颜色（极端情况），这边也分以下两种情景：（1）完全自定义常量多态，即一种主题色自定义常量都有对应一种颜色例如 系统主题有四种，某个业务背景色，我们定义了一个常量dark1主题下的颜色是一个基础色dark.C01；dark2主题下的颜色是一个基础色dark.C02；light1主题下的颜色是一个基础色。
如何查看css-loader和style-loader对应 webpack版本
Yan65919的博客
05-05 3310
因为初学，问题太多，不断困扰着我，所以笔记多，而且初级，主要为了记录自己遇到的问题 今天问题：安装webpack3.6.0 安装css-loader和style-loader，我轻易认为会根据我本地项目的webpack版本，自动选择安装对应的css-loader和style-loader版本，结果一构建出错，提示：如下 webpack.config.js如下 /* 1、这个文件名是固定的，文件是自建的，建它的目的是在终端不再需要输入webpack ./src/main.js ./dist/bundl
CSS-LOADER配置详解
weixin_34146986的博客
12-04 2117
CSS-LOADER配置详解 前注： 文档全文请查看 根目录的文档说明。 如果可以，请给本项目加【Star】和【Fork】持续关注。 有疑义请点击这里，发【Issues】。 1、概述 对于一般的css文件，我们需要动用三个loader（是不是觉得好麻烦）； 1、css-loader： 先附上官网文档（中文）的链接：css-loader文档。 不过说实话，这个官方文档讲的很糟糕，看的人一脸懵逼。 c...
hft-asgmt-css-02siph1bif:hft-asgmt-css-02siph1bif由GitHub Classroom创建
03-30
hft-asgmt-css 去做 添加style.css html文件中的引用style.css 使用display: flex; 在身体上 以某种方式设置表格样式 在不重复的地方使用背景图片 在所有链接上使用悬停效果 使用其他字体
02-CSS-TUGAS-4-CSS:任务4 CSS
05-24
【标题】"02-CSS-TUGAS-4-CSS:任务4 CSS"指的是一个关于CSS（层叠样式表）的学习任务，可能是课程或者项目的一部分。这个任务可能旨在提升学习者对CSS的理解和应用能力。 【描述】"02-CSS-TASK-4-CSS 任务4 CSS...
lesson-w02d01-css-position
04-06
**CSS定位：理解与应用** 在网页设计中，CSS（层叠样式表）定位是至关重要的，它决定了元素在页面上的精确位置。本教程将深入探讨CSS定位的概念、属性及其在页面布局中的应用。 首先，我们需要了解四种主要的定位...
CSS-day02.pptx
01-25
"CSS复合选择器" CSS复合选择器是CSS选择器的一种，它由两个或多个基础选择器通过不同的方式组合而成的。学习CSS复合选择器的目的是为了可以选择更准确、更精细的目标元素标签。 后代选择器 后代选择器又称为包含...
02-高级-CSS-Portfolio-第一
02-23
在本课程“02-高级-CSS-Portfolio-第一”中，我们将深入探讨CSS（Cascading Style Sheets）的高级技巧和应用，特别是在创建个人作品集网页时所使用的策略和方法。CSS是网页设计的核心技术之一，用于控制网页的布局、...
节流和防抖
qq_41860476的博客
10-15 3531
节流和防抖的目的：都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，防止在短时间内频繁触发同一事件而出现延迟，假死或卡顿的现象。 节流和防抖的区别： 节流：目前有一事件A设置了定时器，那么在delay之前触发，都只会触发一次 防抖：如果不断在delay之前重新触发，那么定时器会不断重新计时，最终会在最后一次完后才执行，对于需要实时响应的，应该用节流。 以下分别是节流和防抖的实现代码 节流 <script> /* 节流 思路： 节流是确保在delay之前只有一次事件触
HTML-01
qq_41860476的博客
09-30 325
html相关 全局属性 所有的标签都可以用的属性！ 常见：id、class、style、title、contextmenu、contenteditable、data-*、hidden、lang、draggable、 html5新属性 暂无 html5新语义元素 常见：header、nav、article、section、aside、footer、time、meter、mark、progress、figure、hgroup、figcaption、contextmenu+me...
css-03
qq_41860476的博客
10-13 279
尺寸（dimension）相关属性 height、width、line-height、（max-height、max-width、min-height、min-width） 定位（position） 几个值的具体描述 position：static | relative | absolute | fixed | inherit static:默认值，没有定位，遵循正常的文档流对象；static的元素不受top/bottom/lsft/right影响 fixed：元素的位置相对于浏览器窗口的.
2020-10-18盒子科技笔试
qq_41860476的博客
10-18 224
考点：ECS6结构：{ }、[] <script> let [a=1,b]=[]; 其中a为1，b为undefined;类似于 let a=1,b; 赋值操作没有重新为两个变量赋新值 </script> 考点：let、const定义变量与使用 <script> 以下会报错的是 - let a=1;let a=1; - var a=1;a=1; - const a; - {let a=1} console.log(a); </scr.
javascript检测数据类型的四种方式
qq_41860476的博客
10-16 147
typeof typeof能检测出来的数据类型： number、string、boolean、undefined、object、function、symbol 【注】其中function虽然∈对象，但是其有自身的某些属性及方法，因此可以单独检测出来 问题：对于引用数据类型：Array、Object等无法分别是具体哪个，只能检测出∈object instanceof 该运算符主要用于检测针对使用typeof时对于引用数据类型（不是Function）时可以检测构造函数的prototyp..
html-02
qq_41860476的博客
10-13 123
web本地存储 客户端存储的两个数据对象为：localStorage、sessionStorage 二者可使用的API xxx.setItem(key,value) xxx.getItem(key) xxx.removeItem(key) xxx.clear() xxx.key(index) 要点： 二者都在同源下生效，sessionStorage更为严格还需在同窗口（也就是在浏览器的标签页下？不明白） html5新内容 Canvas 内联SVG:可伸缩矢量图形 MathML.
cookie
qq_41860476的博客
10-13 121
特点：可以设置过期时间；最大可以存储4kb,每一个域名下最多可以存储50条数据。 【注】只可以存储string，一般只存储重要信息（登录，是否点赞，视频播放进度等） 语法： 设置cookie document.cookie="name=value；expires=date；path=path；domain=somewhere.com；secure"; 取出cookie document.cookie 解决有中文乱码问题 enCodeURIComponent("xxx")； deCodeUR
css3-01
qq_41860476的博客
10-13 110
重要模块 选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面 css3边框 border-radius: box-shadow: h-shadow v-shadowblur(模糊距离) spread(阴影尺寸） color insect border-image: css3圆角属性-border-radius 四个值：左上 右上 右下 左下 三个值：左上 右上&左下 右下 两个值：左上&...
BootStrap-01
qq_41860476的博客
09-30 109
bootstrap相关 栅格选项 .col-xs-超小屏幕 手机（<768px） .col-sm-小屏幕 平板（>=768px） .co-md-中等屏幕 桌面显示器（>=992px） .col-lg-大屏幕 大桌面显示器（>=1200px）
CSS-02 网页美化与超链接属性综合示例
最新发布
09-07
CSS-02通常不是一个标准的术语，但这里我们可以理解为你想要了解的是如何使用CSS来美化网页以及超链接的属性。 网页美化通常包括以下几个方面： 1. 文本样式：通过设置`font-family`、`font-size`、`font-weight`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值