web前端——CSS

已于 2022-07-26 16:16:23 修改
阅读量868 收藏 5
点赞数 2
分类专栏： css 文章标签： css
于 2021-09-21 16:49:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Atlantis_Qi/article/details/120403089
版权

 杂知识点汇总

  • html链入式引用：<link href="Untitled-2.css" type="text/css" rel="stylesheet">
  • 双类名：class="b c"。b为主类名，c为子类名。 
  • 类选择器：.类名{ }。类名第一个字符不能为数字。class="a b"
  • id选择器：#类名{ }，一个内容不能命名为多个id值。id="a b"
  • 通配符选择器：*{}。设置公共样式，修改所有内容样式。
  • 标签不透明度：opacity：0（完全透明） 1（完全不透明）
  • CSS样式规则是由选择器和声明构成。
  • 常见块属性：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table（可调整边距等属性）
  • 伪类：鼠标悬停：选择器：hover{样式}。
  • 浮动：float。使图文内嵌环绕，视觉和谐。
  • 清楚浮动：clear:left、right、both（使用空标记保护父元素）。解除此元素受到的来自其他元素的浮动影响。或者用overflow:hidden，形成BFC，来清楚浮动保护父元素。
  • 定位：position:absolute/relative。top left：距离。
  • 鼠标变样式：cursor： crosshair（十字形）text（文本型）wait（沙漏型） pointer（手型）、help（问号形）progress（加载）not-allowed。
  • css盒模型，块之间共享垂直外边距margin，margin取其中的大值。
  • border-radius：50%  元素变圆形。
  • outline=none:文本框点开无边框
  • 根据属性值进行选择：[disable]{}
  • 颜色集
  • link和@import：
  • 伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾 。
  • :nth-child(n),n从1开始计数，:nth-child(an+b),n从0开始计数。
  • 绝对定位和固定定位会脱离标准文档流 相对定位不会。
  • a标签不能套a标签，p标签不能套块标签。
  • BFC：
  • fieldset用来分组，而legend用来分组描述。
  • 引起回流： ① 改变窗口大小 ② font-size大小改变 ③ 增加或者移除样式表 ④ 内容变化（input中输入文字会导致） ⑤ 激活CSS伪类（:hover） ⑥ 操作class属性，新增或者减少 ⑦ js操作dom ⑧ offset相关属性计算 ⑨ 设置style的值 ...... 另外: reflow与repaint（重绘）是减缓js的几大主要原因，尤其是reflow更是性能杀手，所以我们应该想法避免。
  • 可以被继承的属性主要有文本(font-)，颜色(背景颜色不可以！)，列表(list-style-type)，元素可见性visibility。
  • 主流浏览器内核私有属性css前缀：
  • link标签是同时加载的 script标签才会加载完一个再加载另一个，css样式会合并

引入css样式表

 

font

文本样式属性 

  • font-size：设置字号。em（倍率，相对尺寸）px（像素）
  • font-family：设置字体。"微软雅黑"，"宋体"，"黑体"
  • font-weight：定义字体粗细。normal（400，标准），bold（700，粗体），bolder（更粗），lighter（细体）。
  • font- style：字体风格。normal（标准），italic（斜体），oblique（倾斜）。
  • font：综合属性。italic bold px "微软雅黑" 

@font-face：定义服务器字体（后在font-family属性引用）。{font-family：命名字体名称；src：字体路径}

文本外观属性 

  • letter-spacing：定义字间距，字符和字符之间，汉字和汉字之间，允许负值。
  • word-spacing：定义单词间距，对中文无效，允许负值。
  • line-height：行间距。px
  • text-align：设置文本位置。left，right，center
  • text-transform：控制英文大小写。capitalize（首字母大写） uppercase（全部变大写）lowercase（全部变小写）
  • text-decoration：文本装饰效果。underline（下划线） overline（上划线） line-throug（删除线）blink（文字闪烁）none（去掉超链接下划线）。
  • text-indent：首行缩进。1cm，px，em
  • white-space：空白符。pre（保留空格）nowrap（强制不换行）
  • text-shadow：为文本添加阴影效果。text-shadow：5px（水平偏移） 5px（垂直偏移） 阴影颜色；
  • text-overflow：从块中溢出文本。对某个整体块使用
  • word-wrap：break-word；块内换行。实现长单词和URL地址的自动换行。
  • vertical-align：bottom（与所在行底部对齐，紧贴下面），top，middle、
  • text-transform用来设置文本的大小写，值为：none（默认值，不设置）、capitalize（使文本中的每个单词的首字母大写）、uppercase（将文本中的内容转换成大写）、 lowercase（ 将文本中的内容转换成小写）

css复合选择器

  1. 标签指定式选择器（交集）：p.box  其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，交集选择器 是 并且的意思。 即...又...的意思。
  2. 后代选择器：外部标签 内部标签  空格隔开，选择后代
  3. 并集选择器：p，.box,  逗号隔开连接关系（只是一种简便写法）
  4. 子元素（亲儿子）选择器：.demo > h3 {color: red;} 。>符号左右两侧各保留一个空格。说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
  5. 伪类选择器：.demo:hover{} 鼠标移动到链接上。.demo:link{} 未访问的链接。.demo:visited{} 已访问的链接。 .demo:active{} 选定的链接。:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素（伪元素）。
  6. +：.box + p 表示和box同级的，且紧跟着box后面出现的p

 CSS优先级

类选择器＝标签选择器＜类选择器＜id选择器

权重大小：标签选择器：1，类选择器：10，id选择器：100

（十个1优先级小于一个类选择器10）

行内css样式优先（就近原则），行内式＞内嵌式、链入式、导入式。

继承样式的权重为0

！important最大优先级(位于属性值和分号之间)

伪类选择器和类选择器的优先级是一样的

 盒子模型

border

 border-style:solid（实线） dashed（虚线） dotted（点线） double（双实线）

 border-top:solid 5px red

padding

 padding：5% 段落内边距为父元素宽度的5%

margin

margin：0 auto   水平居中

margin：5px auto  水平居中 上下5px边距

内外边距清除

*{

padding：0；

margin：0；

}

display

display:none 隐藏样式。

display:block 显示为块级元素，进而设置它的宽高和上下左右的padding和margin。

display:inline-block 既具有block元素可以设置width和height属性的特性。保持inline元素不换行的特性。

display:inherit 子div的display属性值继承了父div的display属性值

背景设置

  • 背景颜色：background-color
  • 背景图像：background-image：url（路径）
  • 图像平铺：background-repeat
  • 图像位置：background-position：20px 20px/center/50% 50%
  • 图像固定：background-attachment：fixed。
  • 综合应用
  • 图片边框
  • 阴影：box-shadow：5px
  • 渐变色：1、background: linear-gradient(to bottom,yellow 20%,blue 70%)  2、background: linear-gradient(to bottom,yellow 0 %,blue 25 %,lightcoral 75 %,darkcyan 100 %)   3、background: linear-gradient(to bottom,yellow,blue);

列表

  • list-style-image：url()
  • list-style-position：outside/inside
  • list-style-type：
  • list-style:list-style-type(标记） list-style-image list-style-position
  • background（整条列表，上方为列表标记）:url() no-repeat left center;

 浮动和定位

浮动 

  • 浮动：float。使图文内嵌环绕，视觉和谐。
  • 清楚浮动：clear:left、right、both（使用空标记保护父元素）。解除此元素受到的来自其他元素的浮动影响。或者用overflow:hidden，来清楚浮动保护父元素。

 overflow：

visible：内容不会被修建，呈现在元素框之外（默认值）

hidden：溢出内容会被修剪，且被修剪的内容不可见。

auto：溢出时，出现滚动条。

scroll：溢出内容被修剪，始终显示滚动条。

position定位

relative：相对定位，相对于原来自己进行定位。（对其他元素不太影响，下者反之）

absolute：绝对定位，相对于已定位的父元素进行定位（没有的话就是浏览器大框）。

fixed：固定定位，相对于浏览器大框进行定位。

sticky：粘性定位，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

边偏移属性：top：100px（向下移动100px），right，left，bottom。

滤镜filter 

模糊滤镜： filter:blur(4px);

亮度：filter:brightness(2);

对比度：filter:contrast(50%);

投影：filter:drop-shadow(2px 10px 0 rgba(255,0,0,0.5));(x偏移  y偏移   模糊范围   颜色)

灰度：filter:grayscale(0.5);

饱和度：filter:saturate(200%);

动画

变形transform

旋转：transform: rotate();——必须是块元素

（1）以x、y、z轴进行旋转，默认是z轴；

（2）rotateX（）、rotateY（）、rotateZ（）

（3）（）内的值单位是：deg角度

扩大和缩放：transform：scale()

值的绝对值>1，就是放大，比如2，就是放大2倍

值的绝对值 0<值<1，就是缩小，比如0.5，就是原来的0.5倍；

值的负值表示图形翻转。

倾斜拉伸：transform：skew（x，y），单位：角度deg

x，y为拉伸变形方向。

平移：transform：translate（）

transform：translate（20px）：一个值的时候，表示水平方向的平移20px，垂直方向0px；两个值的时候，水平方向和垂直方向分别平移。

transform：translateX()、transform：translateY()、transform：translateZ()，注意Z轴的平移是面向屏幕的。

transform：translate3d(x, y, z)：三个值分别对应三个方向


改变中心点，transform-origin: 50% 50%;

中心的默认值：50% 50%，即图形x轴、y轴的50%的位置。

保留3D效果，transform-style：preserve-3d。

perspective：number丨none；

transition

transition-property：需要动画过渡的名称。

transition-timing-function：linear（匀速变化） ease（缓冲） ease-in（缓冲-匀速）ease-out（匀速-缓冲）steps（n，end/start）。

transition-delay：鼠标放上延迟时间。

综合使用：

animation动画

在需要动画的元素写属性：

animation-name：动画的自定义名字，另一个动画名字。（后出现的优先级高，下同）

animation-duration：动画的持续时间，另一个动画持续时间。

animation-iteration-count：设置动画的循环次数。无限循环：infinite

animation-delay：动画延迟时间。

animation-fill-mode：forwards（动画结束应用结束时属性值），backwards（应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。）。填充模式

animation-direction：reverse（反向）、alternate（奇数正向，偶数反向）、alternate-reverse（反之）。动画方向。

animation-timing-function：ease（缓冲，默认）linear（匀速） ease-in（缓冲-匀速）ease-out（匀速-缓冲）cubic-bezier（贝塞尔曲线数据）、jump-both：动画变化速度

动画设置

0%：开始    100%：结束：

 可以组合写：

Flex布局

（转自：https://blog.csdn.net/z591391960/article/details/106044400）

原理：通过给父盒子设置flex，来控制子元素的位置和排列方式。

flixible Box
flex容器：使用display： flex就是flex容器
项目：flex容器中的子元素就是项目，不包括孙子元素
默认主轴方向排列，即横向
Flex-容器的属性

父项元素
1、display属性

作用：指定flex属性
取值：flex | inline-flex
flex：将对象作为弹性伸缩盒展示，相当于块级属性，有默认宽度100%
inline-flex：将对象作为内联块级弹性伸缩盒展示，即行级元素，没有默认宽度


2、flex-direction

作用：指定容器的主轴方向，主轴默认为水平向右方向，项目排列的方向
取值：row | row-reverse | column | column-reverse
row：默认值，主轴横向往右排列
row-reverse：主轴横向往左反向排列
column：垂直方向排列
volumn-reverse：垂直方向反向排列


3、flex-wrap

作用：描述如果一个轴线排列不下，如何换行
取值：nowrap | wrap | wrap-reverse
nowrap：默认不换行，会压缩子元素
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方


4、flex-flow

作用：是flex-direction和flex-wrap和合并缩写形式
取值：flex-direction || flex-wrap
     // 下方写法一和写法二效果一样：
    // 写法一
    .box {
        flex-flow: row wrap;
    }

    // 写法二
    .box {
        flex-direction: row;
        flex-wrap: wrap;
    }


5、justify-content属性（justify单词的意思是两端对齐）

作用：属性定义了项目在主轴上的对齐方式
取值：flex-start | flex-end | center | space-between | space-around
flex-start：默认的是从主轴开始位置对齐
flex-end：默认的是从主轴结 束位置对齐
center：居中对齐，项目形成的总宽度不变
space-between：先两边贴边，再平分空间。
space-around：所有项目的两侧间隔相等，主轴两端会留边，平分。


6、align-items属性

作用：定义侧轴上的堆砌方式
取值：flex-start | flex-end | center | baseline | stretch
flex-start：交叉轴的开始位置对齐
flex-end：交叉轴的结束位置堆砌
center：交叉轴居中
baseline：拉扯同步，基线对齐，文字第一行对齐
stretch：（单词意思是弹性、拉伸）默认值！！如果项目未设置高度或者设置为auto，将沾满整个容器的高度（自动填充）


7、align-content（调整行间距位置）

作用：定义了交叉轴线上的对齐方式
说明：如果项目只有一个轴线（一行），该属性不起作用，如果wrap换行了，那么才有作用
取值：flex-start | flex-end | center | space-between | space-around | stretch
flex-start：所有轴线都是从头开始，交叉轴开始位置开始，主轴横轴的话，就是上对齐
flex-end：从尾开始，交叉轴结束位置开始
center：所有从中间开始
space-between：多条轴线上下两端对齐
space-around：多条轴线上下两端分散对齐，上下两侧留白
stretch：默认!高度自动填充拉伸


Flex-项目的属性


定义子项目分配剩余空间，用flex决定分配多少份


1、order

作用：定义项目的排列顺序，-1在0的前面。
取值：integer


2、flex-grow

作用：定义项目的放大比例，默认是0，即如果存在剩余空间，也不放大
取值：> 0
默认值为0，默认不会自动放大
如果都设置为1，那么所有项目会平分剩余的空间
如果有三个元素，一个设置为2，剩余为1，那么项目2的就会占一半，剩下两个会各占四分之一。
如果有三个元素，一个width设置为200，剩余都为1，那么剩余的会平分固定宽度200之外的空间


3、flex-shrink

作用：定义项目的缩放比例，和grow相反
取值：>0
默认值为1，默认会自动缩小
如果所有项目都为1，当空间不足时候，都会等比例缩小
如果有一个项目为0，其他都为1，当空间不足时候，0不变，1都缩小


4、flex-basis

作用：定义分配多余空间之前，项目占据的主轴空间，和width差不多，但是比width优先级高


5、flex

作用：flex-grow、flex-shrink、flex-basis的简写
默认值：0 1 auto


6、align-self

作用：独立子项目在侧轴的对齐方式，可以覆盖父元素的align-items属性
取值：和align-items多了个auto
默认值为auto，表示继承align-items属性
————————————————

居中

Gird布局

   

一、grid-template-*相关

1、

grid-row-gap属性设置行与行的间隔（行间距），

grid-column-gap属性设置列与列的间隔（列间距）

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式

（每个一份）

（独立体）

二、gap ：独立块行间距（row-gap），独立块左右间距（column-gap）。  

三、

（字母里为一个区域号）

四、

 grid-auto-flow：row dense   根据独立体大小，活性调整。

 五、对齐方式（类似flex）

(部分)

（整体）

项目（子元素）属性

1、

（范围）

简写：grid-column：2/4  ：项目块的范围时第二个列开始到第四个列结束

grid-column-start：span 2  ：向右跨越两个的项目块

2、

grid-area：指定项目放在哪个区域

 简写：grid-area：1/1/3/3  column1到3  row1到3 

4、给自己定位

CSS精灵——sprites

Atlantis_Qi
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端开发之CSS
hu0708的博客
06-30 2653
css
Web前端---CSS
qq_44125413的博客
02-14 369
CSS概述 CSS是Cascading Style Sheets（级联样式表）。 CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如， CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。 可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分，可达到样式重复利用。 CSS与HTML的关系 HTML是网页内容 CSS定义页面的样式 基本语法 行内样式表 行内样式表,又有人称内联样式、行间样式、内嵌样式
web前端——CSS详解
小白一直白
09-17 725
简介    CSS（Casading Style Sheet）是一组HTML元素外观的设置规则，用于控制web页面的表现形式，一般被翻译为“级联样式表”或“层叠样式表”。通常情况下，我们是用HTML标签定义文档的内容，用CSS定义内容的表现形式，这样将页面内容与表现形式分离，可以使HTML文档代码看起来更加简练，缩短浏览器的加载时间。 CSS的语法     1.基本语法规则        ...
web前端 css
qq_49152190的博客
10-17 345
WEB前端 声明：WEB前端分为三个部分，即HTML4、CSS、CSS2;HTML5和CSS3;Javascript。第一部分对W3C、HTML系列、CSS系列、Javascript做出概述，后续部分不再解释。每部分由思维导图和文字叙述组成。每个知识点附有超链接实例，点击可全面了解。欢迎大家留言讨论，指出不足之处，以期共同进步。 W3C简介 W3C 指万维网联盟（World Wide Web Consortium） W3C 创建于1994年10月 W3C 由 Tim Berners-Lee 创建 W3C
你真的熟悉background吗？
aiwu9318的博客
09-01 125
一两个月没更新博客了，因为放假刚在深圳找了实习，一直都比较忙碌，不过我觉得再忙，还是需要时间去沉淀一些东西，工作的时候别人看到的只是你有没有实现最终的结果，但自己是否思考，是否去总结，决定着你工作是否轻松。基础不好的话，很多时候时间都花费在修复各种bug上了。所以思考总结很重要，做出好维护的代码才能让我们轻松走天下。找实习还是比较顺利的，有空可以分享下经验。好了，进入正题...
Web前端之CSS
ling的博客
12-24 4132
前面说了HTML，现在再来数一说CSS，所谓CSS是指层叠样式表 (Cascading Style Sheets)，通过引入样式表，从而极大的提高了工作效率。 CSS 基础语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector {declaration1; declaration2; … declarationN } 选择器通常是你需要改变样式的 ...
前端——CSS
q_everyday的博客
08-18 182
CSS 1.HTML内部添加样式 <!--style表明样式--> <p style="font-size:14px;color:white"></p> <!--设置字体粗细,一种是用数字,200,400,700等等；一种是单词:lighter，normal，bold，bolder--> <p style="font-weight: 200;">优课达--学的比别人好一点～</p> <p style="font-weight: l
Web前端——CSS盒模型
qq_25592087的博客
09-21 463
元素选择器{ /* 选中要修改地元素 */属性名:属性值;/* 属性名：修饰语法*/属性名:属性值;/* 属性值：属性的取值*/}
web前端——CSS实现加载页面效果
cloudYun的博客
07-29 2172
先上图 html代码 <div class="container"> <div class="trans"> <span>加载中...</span> </div> </div> 其中container是背景，trans是加载是旋转的正方形 CSS基本样式 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100
web前端基础——CSS入门
01-20
Web前端开发中，CSS（Cascading Style Sheets）是一种用于表现HTML或XML文档样式的样式表语言，对于网页设计和用户体验至关重要。本文将详细介绍CSS入门的基础知识，包括CSS的引入方式、选择器、字体样式、外观属性...
html,css前端网站模板（10个）
03-12
10个不错的前端网站模板
一些常用的完整前端网页模板
12-20
超过10个常用的网页模板，每个模板都是完整的，点击index.html即可运行，编写代码简洁，非常方便自己进行修改再使用，觉得OK的朋友点个赞哦~！
漂亮的html+css+js模板
08-26
非常漂亮的html+css+js模板,界面清晰简洁，采用滚动条实现网页切换
web前端——好玩的魔方.zip
12-04
在Web前端开发中，"好玩的魔方"项目是一个典型的交互式应用，它结合了HTML、CSS和JavaScript等核心技术，为用户提供了动态的魔方体验。这个项目旨在展示Web前端技术如何实现三维图形的交互与动画，同时也为学习者...
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
根据提供的文件内容，我们可以整理出以下Web前端设计基础的知识点： 1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言，用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...
Web前端——css
weixin_51748707的博客
05-19 543
1.什么是css CSS是指层叠样式表(Cascading Style Sheets)，通过引入样式表，从而极大的提高了工作效率。 2.作用 html：搭建网页的结构，承载页面的数据 css:美化页面，修饰标签 (亚洲4大邪术) 3.基础语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 css的使用方式 每个样式属性之间用分号连接，例： color:red; 字体颜色 background-color:yellow; 背景颜色 font-size: 50px; 字号大小 .
web前端之css
贵有恒，何必三更眠五更起；最无益，只怕一日曝十日寒
05-29 448
css——层叠样式表 css用于修饰html，使得html页面的布局更加好看。 1、css的注释 /*单行注释*/ /* 多行注释 */ 2、语法结构 选择器 {属性:属性值; 属性:属性值; 属性:属性值;} p {color: red; font-size: 20px} 3、css的引入方式 css有三种引入方式： I：在标签内通过style属性引入： &lt...
WEB前端之----CSS
苍穹之宇-的博客
04-22 207
1.伪类选择器 1、分类： 1、超链接伪类选择器：针对超链接的不同状态设置样式 2、动态伪类选择器：所有元素都可以使用 3、使用： 1、超链接伪类选择器： 访问前 :link 访问后 :visited 伪类选择器需要与其他选择器结合使用，不能单独使用 语法：a:link{访问前样式} ...
vscode:Web前端——登录、注册界面
最新发布
06-07
好的，我可以帮你提供一些思路。首先，登录和注册界面是Web前端的常见功能，可以使用HTML、CSS、JavaScript等技术来实现。以下是一些简单的步骤： 1.设计页面布局：可以参考一些常见的登录、注册页面的设计，例如输入框、按钮的布局和样式等。 2.编写HTML代码：根据设计的页面布局，编写HTML代码，将页面元素放到合适的位置。 3.使用CSS美化页面：通过CSS样式，可以实现页面的美化，例如颜色、字体、边框、背景等。 4.编写JavaScript代码：登录和注册功能需要与服务器进行交互，可以使用JavaScript编写相关代码，例如发送请求、验证输入等。 5.测试和调试：完成以上步骤后，可以进行测试和调试，确保功能正常。 总的来说，实现登录和注册界面需要一些前端技术的知识和经验，建议你参考一些相关的教程和示例，逐步学习和实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值