CSS学习笔记
文章平均质量分 86
前端CSS
菜鸟自学编程
这个作者很懒,什么都没留下…
展开
-
致自己:CSS学习笔记一
CSS1、基础认识1、CSS(Cascading style sheets):层叠样式表,主要给HTML标签设置样式。2、引入方式:行内样式、内部样式、外部样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name原创 2022-03-10 21:28:24 · 151 阅读 · 0 评论 -
致自己:CSS学习笔记三
一、CSS三大特性1、优先级介绍1、特性:不同的选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式。2、优先级公式:继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important3、注意点:!important 写在属性值的后面,分号的前面!important 不能提升继承的优先级,只要是继承,则优先级最低实际开发中不推荐使用!important4、代码示例:<!DOCTYPE原创 2022-03-12 20:49:28 · 469 阅读 · 0 评论 -
致自己:CSS学习笔记六
1、CSS背景图片大小1、作用:设置背景图片的大小2、语法:background-size:宽度 高度;3、取值:取值场景数字+px使用简单方便,比较常用百分比相当于盒子自身的宽高百分比contain包含,将背景图片等比例缩放,直到不会超出盒子的大小cover覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白4、background连写:background:color image repeat position/size;backgr原创 2022-03-15 19:26:50 · 53 阅读 · 0 评论 -
致自己:CSS学习笔记五
CSS布局1、定位1、定位的基本介绍1、网页常见的布局方式1、标准流: 块元素独占一行--》垂直布局 行内元素/行内块元素一行可以显示多个--》水平布局 2、浮动: 可以让原本垂直布局的块级元素变成水平布局3、定位: 可以让元素自由的摆放在网页的任意位置 一般适用于盒子之间的层叠情况2、定位的基本使用1、使用步骤:1、设置定位方式:position:属性值;定位方式属性值静态定位static相对定位relative绝对定位原创 2022-03-14 21:14:50 · 322 阅读 · 0 评论 -
致自己:CSS学习笔记二
CSS21、选择器进阶1、复合型选择器1、后代选择器1、作用:根据HTML嵌套关系,选择父元素后代中满足条件的元素。2、语法:选择器1 选择器2{CSS属性名:属性值;};3、结果:在选择器1的后代(儿子、孙子、重孙子…)中找到满足条件的选择器2的标签,设置样式。4、注意点:后代包括:儿子、孙子、重孙子…后代选择器中:选择器与选择器之间使用空格隔开5、代码示例:<!DOCTYPE html><html lang="en"><head>原创 2022-03-12 08:57:18 · 508 阅读 · 0 评论 -
致自己:CSS学习笔记四
浮动1、结构伪类选择器1、作用:根据元素在HTML中的结构关系查找元素减少对于HTML中类的依赖,有利于保持代码整洁常用于查找父级选择器中的子元素2、选择器:选择器说明E:first-child {}匹配父元素中的第一个子元素,并且是E元素E:last-child {}匹配父元素中的最后一个子元素,并且是E元素E:nth-child(n) {}匹配父元素中的第n个子元素,并且是E元素E:nth-last-child(n) {}匹配父元素中的倒数原创 2022-03-13 13:05:09 · 2315 阅读 · 0 评论