- 博客(79)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 CSS盒子模型-05-border使用方法
3.1边框(border) -连写形式➢属性名: border➢属性值:单个取值的连写，取值之间以空格隔开·如: border : 10px solid red;➢快捷键:bd+tab3.2边框(border) -单方向设置➢场景:只给盒子的某个方向单独设置边框➢属性名: border -方位名词➢属性值:连写的取值3.3边框(border) -单个属性➢作用:给设置边框粗细、边框样式、边框颜色效果➢单个属性: 作用 属性名
2021-12-12 16:45:03
230
原创 CSS盒子模型-04-内容width和height
2.1内容的宽度和高度➢作用: 利用width和height属性默认设置是盒子内容区域的大小➢属性: width / height➢常见取值:数字+px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met.
2021-12-12 15:57:01
211
原创 CSS盒子模型-03-组成
1.1盒子模型的介绍1.盒子的概念1. 页面中的每一个标签，都可看做是一个“盒子” ，通过盒子的视角更方便的进行布局2.浏览器在渲染 (显示)网页时，会将网页中的元素看做是一个个的矩形区域， 我们也形象的称之为子2. 盒子模型➢CSS中规定每个盒子分别由:内容区域(content) 、内边距区域(padding) 、边框区域(border)、 外边距区域(margin)构成，这就是盒子模型3.记忆: 可以联想现实中的包装盒<!DOCTYPE html&g.
2021-12-12 15:32:07
458
原创 CSS盒子模型-02-优先级-叠加计算
3.2权重叠加计算★场景: 如果是复合选择器，此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效★权重叠加计算公式: (每一级之间不存在进位)★比较规则:1.先比较第一级数字,如果比较出来了，之后的统统不看2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看3. ......4.如果最终所有数字都相同, 表示优先级相同，则比较层叠性(谁写在下面，谁说了算!)★注意点: !important如果不是继承， 则权重最高，天下第一.
2021-12-10 15:34:13
336
原创 CSS盒子模型-01-优先级-基本测试
3.1优先级的介绍★特性: 不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式★优先级公式:·继承<通配符选择器<标签选择器<类选择器< id选择器<行内样式< !important★注意点:1. !important写在属性值的后面， 分号的前面!2. !important不能提升继承的优先级， 只要是继承优先级最低!3.实际开发中不建议使用 !important。<!DOCTYPE html><
2021-12-10 15:10:21
238
原创 CSS进阶-19-CSS特性-层叠性
2.1层叠性的介绍★特性:1.给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上2.给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效★注意点:1.当样式冲突时,只有当选择器优先级相同时，才能通过层叠性判断结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-U
2021-12-09 19:34:09
111
原创 CSS进阶-18-CSS特性-继承性
四、CSS特性1.1继承性的介绍★特性:子元素有默认继承父元素样式的特点(子承父业)★可以继承的常见属性(文字控制属性都可以继承)1. color2. font-style、font-weight、 font-size、font-family3. text-indent.、text-align4. line-height5. ......★注意点:·可以通过调试工具判断样式是否可以继承<!DOCTYPE html><html lang="en
2021-12-09 19:26:43
226
原创 CSS进阶-17-拓展-标签嵌套
拓展1: HTML嵌套规范注意点1.块级元素一般作为大容器，可以嵌套:文本、块级元素、行内元素、行内块元素等等......★但是: p标签中不要嵌套div、p、h等块级元素2. a标签内部可以嵌套任意元素★但是: a标签不能嵌套a标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati
2021-12-09 18:49:14
247
原创 CSS进阶-16-显示模式-转换
4.1元素显示模式转换★目的: 改变元素默认的显示特点，让元素符合布局要求★语法:属性 效果 使用频率 display: block 转换成块级元素 较多 display:inline-block 转换成行内块元素 较多 display:inline 转换成行内元素 较少 <!DOCTYPE html><html lang="en"><head> <meta charset="
2021-12-09 18:03:04
225
原创 CSS进阶-15-显示模式-行内块
3.1行内块元素★显示特点:1. 一行可以显示多个2.可以设置宽高★代表标签:·input、textarea、 button、 select......·特殊情况: img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA
2021-12-09 16:16:59
117
原创 CSS进阶-14-显示模式-行内
2.1行内元素★显示特点:1.一行可以显示多个2.宽度和高度默认由内容撑开3.不可以设置宽高★代表标签:·a、span 、b、u、i、s、strong、 ins、em、del......<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg
2021-12-09 15:38:47
111
原创 CSS进阶-13-显示模式-块
三、元素显示模式1.1 块级元素★显示特点:1.独占一行(一行只能显示一个)2.宽度默认是父元素的宽度, 高度默认由内容撑开3.可以设置宽高★代表标签:· div、 p、h系列、ul、li、 dl、 dt、dd、form、header、nav、footer......<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta h
2021-12-09 15:28:33
139
原创 CSS进阶-12-背景图和img的区别
6.1 (拓展) img标签和背景图片的区别★需求:需要在网页中展示一张图片的效果?★方法一: 直接写上img标签即可·img标签是一个标签，不设置宽高默认会以原尺寸显示★方法二: div标签+背景图片·需要设置div的宽高，因为背景图片只是装饰的CSS样式,不能撑开div标签...
2021-12-09 14:43:58
438
原创 CSS进阶-11-背景-background
★属性名：background (bg)★属性值:·单个属性值的合写，取值之间以空格隔开★书写顺序:·推荐: background: color image repeat position★省略问题:·可以按照需求省略·特殊情况:在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background: url()★注意点：·如果需要设置单独的样式和连写①要么把单独的样式写在连写的下面②要么把单独的样式写在连写的里面<!DOCTYPE html&g
2021-12-09 14:33:44
84
原创 CSS进阶-10-背景-背景位置
4.1背景位置★属性名: background-position (bgp)★属性值: background-position: 水平方向位置 垂直方向位置;★注意点:·方位名词取值和坐标取值可以混使用，第一个取值表示水平， 第二个取值表示垂直...
2021-12-08 21:16:44
95
原创 CSS进阶-09-背景-背景平铺
3.1背景平铺★属性名: background-repeat (bgr)★属性值:取值 效果 repeat （默认值）水平和垂直方向都平铺 no-repeat 不平铺 repeat-x 沿着水平方向（x轴）平铺 repeat-y 沿着水平方向（y轴）平铺 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &
2021-12-08 21:00:28
87
原创 CSS进阶-08-背景-背景图
2.1背景图片★属性名: background-image (bgi)★属性值: background-image: url( '图片的路径' );★注意点:·背景图片中urI中可以省略引号·背景图片默认是在水平和垂直方向平铺的·背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色，是不能撑开盒子的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2021-12-08 20:46:30
98
原创 CSS进阶-07-背景-背景色
二、背景相关属性目标:能够使用背景相关属性装饰元素的背景样式学习路径:1. 背景颜色2.背景图片3.背景平铺4.背景位置5.背景相关属性连写1.1背景颜色★属性名: background-color (bgc)★属性值:颜色取值:关键字、rgb表示法、rgba表示法、 十六进制......★注意点:·背景颜色默认值是透明: rgba(0,0,0,0) 、transparent·背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先
2021-12-08 13:39:32
239
原创 CSS进阶-06-emmet语法
5.1 emmet★作用:通过简写语法，快速生成代码★语法:类似于刚刚学习的选择器的写法记忆 示例 效果 标签名 div <div></div> 类选择器 .red <div class="red"></div> id选择器 #one <div id="one"></div> 交集选择器 p.red#one .
2021-12-08 13:24:59
64
原创 CSS进阶-05-选择器-伪类
4.1 hover伪类选择器★作用：选中鼠标悬停在元素上的状态,设置样式★选择器语法:选择器:hover { css }★注意点:1.伪类选择器选中的元素的某种状态<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
2021-12-08 12:55:18
70
原创 CSS进阶-04-选择器-交集
3.1交集选择器:紧挨着★作用: 选中页面中同时满足多个选择器的标签★选择器语法: 选择器1选择器2 { css }★结果:(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式★注意点:1.交集选择器中的选择器之间是紧挨着的，没有东西分隔2.交集选择器 中如果有标签选择器，标签选择器必须写在最前面<!DOCTYPE html><html lang="en"><head> <meta charset="
2021-12-08 12:46:31
581
原创 CSS进阶-03-选择器-并集
2.1并集选择器: ,★作用: 同时选择多组标签,设置相同的样式★选择器语法: 选择器1，选择器2{css }★结果:找到选择器1和选择器2选中的标签,设置样式★注意点:1.并集选择器中的每组选择器之间通过 ,分隔2.并集选择器 中的每组选择器可以是基础选择器或者复合选择器3.并集选择 器中的每组选择器通常一行写一个,提高代码的可读性<!DOCTYPE html><html lang="en"><head> <meta
2021-12-08 12:36:56
218
原创 CSS进阶-02-选择器-子代
1.2子代选择器: >★作用: 根据HTML标签的嵌套关系，选择父元素 子代中满足条件的元素★选择器语法: 选择器1 >选择器2 { css }★结果：在选择器1所找到标签的子代 (儿子)中，找到满足选择器2的标签，设置样式★注意点:1.子代只包括: 儿子2.子代选择器中, 选择器与选择器之前通过>隔开<!DOCTYPE html><html lang="en"><head> <meta charset="
2021-12-08 12:27:34
372
原创 CSS进阶-01-选择器-后代
一、选择器进阶目标:能够理解复合选择器的规则，并使用复合选择器在HTML中选择元素学习路径:1.复合选择器2.并集选择器3.交集选择器4. hover伪类选择器5. Emmet语法1.1后代选择器:空格★作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素★选择器语法:选择器1 选择器2 { css }★结果:在选择器1所找到标签的后代 (儿子、孙子、重孙子...)中,找到满足选择器2的标签,设置样式★注意点:1.后代包括: 儿子、孙子、.
2021-12-08 12:12:22
324
原创 CSS基础-17-拓展-标签居中
拓展标签水平居中方法总结 margin: 0 auto★如果需要让div、 p、h (大盒子)水平居中?·可以通过margin : 0 auto ; 实现★注意点:1.如果需要让 div、p、h (大盒子)水平居中，直接给当前元素本身设置即可2. margin: 0 auto 一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度<!DOCTYPE html><html lang="en"><head> &l
2021-12-07 16:04:59
526
原创 CSS基础-16-拓展-颜色取值
拓展颜色常见取值(了解)★属性名:· 如:文字颜色: color· 如:背景颜色: background-color★属性值: 颜色表示方式 表示含义 属性值 关键词 预定义的颜色名 red、green、 blue、yellow...... rgb表示法 红绿蓝三原色。每项取值范围: 0~255 rgb(0,..
2021-12-07 15:55:11
220
原创 CSS基础-15-谷歌调试工具
1.打开谷歌浏览器选中空白处→鼠标右键→检查→点击想要查看的位置2.出现黄色叹号：说明写错了，漏写3.出现删除线，表示出现层叠样式了
2021-12-07 15:30:28
253
原创 CSS基础-14-行高
3.1行高★作用:控制一行的上下行间距★属性名:line-height★取值:·数字+px·倍数 (当前标签font-size的倍数)★应用:1.让单行文本垂直居中可以设置line-height :文字父元素高度2. 网页精准布局时， 会设置line-height: 1可以取消上下间距★行高与font连写的注意点:·如果同时设置了行高和font连写,注意覆盖问题·font : style weight size/line-height family ;...
2021-12-07 15:07:14
131
原创 CSS基础-13-文本修饰线
2.3文本修饰★属性名:text-decoration★取值:属性值 效果 underline 下划线(常用) line-through 删除线(不常用) overline 上划线(几乎不用) none 无装饰线(常用) ★注意点:·开发中会使用text-decoration : none ; 清除a标签默认的下划线<!DOCTYPE html><html lang="en"><head> .
2021-12-07 14:50:17
288
原创 CSS基础-12-水平对齐方式
2.2文本水平对齐方式★属性名:text-align★取值:属性值 效果 left 左对齐 center 居中对齐 right 右对齐 ★注意点:·如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置2.4水平居中方法总结 text-align : center★text-align : center能让哪些元素水平居中?1.文本2. span标签、a标签3. input标签、 img标签★注.
2021-12-07 14:39:05
380
原创 CSS基础-11-文本缩进
一、文本样式1.文本缩进: text-indent2.文本水平对齐方式: text-align3.文本修饰: text-decoration2.1文本缩进★属性名:text-indent★取值:·数字+px·数字+em (推荐: 1em =当前标签的font-size的大小)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
2021-12-07 14:18:00
3757
原创 CSS基础-10-font复合属性
1.7字体font相关属性的连写★属性名:font (复合属性)★取值：·font : style weight size family;★省略要求:·只能省略前两个，如果省略了相当于设置了默认值★注意点: 如果需要同时设置单独和连写形式·要么把单独的样式写在连写的下面·要么把单独的样式写在连写的里面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8.
2021-12-07 14:00:40
298
原创 CSS基础-09-拓展-层叠性
1.6样式的层叠问题★问题:·给同一个标签设置了相同的样式，此时浏览器会如何渲染呢?★结果:·如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖)，写在最下面的会生效★TIP:·CSS (Cascading style sheets)层叠样式表·所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&
2021-12-07 13:42:26
61
原创 CSS基础-08-文字-字体
三、字体和文本样式1.5字体系列font-family★属性名:font- family★常见取值:具体字体1,具体字体2,具体字体3,具体字体4...字体系列·具体字体: "Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等......·字体系列: sans-serif、serif、monospace等......★渲染规则:1.从左往右按照顺序查找， 如果电脑中未安装该字体,则显示下一一个字体2.如果都不支持， 此时会根据操作系统，显示最后字体系列的默认字..
2021-12-07 13:34:39
125
原创 CSS基础-07-文字基本样式
三、字体和文本样式目标：能够使用 字体和文本相关样式 修改元素外观样式学习路径：1.字体样式1.字体大小:font-size2.字体粗细:font-weight3.字体样式:font-style4.字体类型:font-family5.字体类型:font属性连写2.文本样式3.line-height行高1.1字体大小★属性名:font-size★取值: 数字+px★注意点:·谷歌浏览器默认文字大小是16px·单位需要设置，否则无...
2021-12-06 20:25:49
79
原创 CSS基础-06-选择器-通配符
4.通配符选择器★结构:*{css属性名: 属性值; }★作用:找到页面中所有的标签，设置样式★注意点:1.开发中使用极少,只会在极特殊情况下才会用到2.在基础班小页面中可能会用于去除标签默认的margin和padding(后续讲解)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co...
2021-12-06 16:53:19
353
原创 CSS基础-05-选择器-id
3. id选择器★结构: #id属性值{ css属性名:属性值; }★作用:通过id属性值,找到页面中带有这个id属性值的标签，设置样式★注意点:1. 所有标签上都有id属性2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!3. 一个标签上只能有一个id属性值4. 一个id选择器只能选中一个标签<!DOCTYPE html><html lang="en"><head> <meta charset="UT
2021-12-06 16:28:28
98
原创 CSS基础-04-选择器-类
2.类选择器★结构:.类名{ css属性名:属性值; }★作用:通过类名, 找到页面中所有带有这个类名的标签,设置样式★注意点:1.所有标签上都有class属性, class属性的属性值称为类名(类似于名字)2.类名可以由数字、 字母、下划线、中划线组成，但不能以数字或者中划线开头3.一个标签可以同时有多个类名, 类名之间以空格隔开4.类名可以重复, 一个类选择器可以同时选中多个标签<!DOCTYPE html><html lang="en">.
2021-12-06 16:14:07
56
原创 CSS基础-03-选择器-标签
目标：理解选择器的作用，能够使用基础选择器在HTML中选择元素学习路径：1.标签选择器2.类选择器3.id选择器4.通配符选择器1.2标签选择器★结构:标签名{ css属性名:属性值; }<style> p{ color: brown; } </style>★作用:通过标签名，找到页面中所有这类标签,设置样式★注意点:1.标签选择器选择的是一类标签, 而不是单独某一个2.
2021-12-04 10:29:53
84
原创 CSS基础-02-CSS引入方式
2.1 CSS引入方式★内嵌式:CSS写在style标签中·提示: style标签虽然可以写在页面任意位置，但是通常约定写在head标签中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view..
2021-12-04 10:16:52
204
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人