揭阳城乡建设局网站,深圳专门做网站,中国建盏品牌形象设计大赛,屏蔽 wordpress 插件文章目录前言系列文章目录1 Emmet语法1.1 快速生成HTML语法结构1.2 快速生成CSS样式语法1.3 快速格式化代码2 CSS复合选择器2.1 什么是复合选择器2.2 后代选择器#xff08;*#xff09;2.3 子选择器2.4 并集选择器#xff08;*#xff09;2.5 伪类选择器2.6 链接伪类选择器…
文章目录前言系列文章目录1 Emmet语法1.1 快速生成HTML语法结构1.2 快速生成CSS样式语法1.3 快速格式化代码2 CSS复合选择器2.1 什么是复合选择器2.2 后代选择器*2.3 子选择器2.4 并集选择器*2.5 伪类选择器2.6 链接伪类选择器2.7 :focus为类选择器3 CSS的元素显示模式3.1 什么是元素的显示模式3.2 块元素3.3 行内元素3.4 行内块元素3.5 元素的显示模式的转换*3.6 一个小工具Snipaste的使用3.7 单行文字垂直居中原理3.8 案例简洁版小米侧边栏4 CSS背景4.1 背景颜色4.2 背景图片*4.3 背景平铺4.4 背景位置4.5 背景图像固定背景附着4.6 背景属性复合写法4.7 背景色半透明5 总结前言
这篇文章为我跟随pink老师重新系统学习前端时做的一些笔记。
系列文章目录
【前端学习】D1HTML简介与HTML标签 【前端学习】D2-1CSS入门 【前端学习】D2-2CSS基础 1 Emmet语法
Emmet语法的前身是Zen Coding它使用缩写来提高HTML/CSS的编写速度VS Code内部已集成该语法。
1.1 快速生成HTML语法结构
生成标签直接输入标签名按tab键即可。如果想要生成多个相同标签加上*如div*3。如果有父子级关系的标签可以用如ulli。如果有兄弟关系的标签用如divp。如果生成带有类名或者id名字的直接写.demo或者#two再使用tab键。默认生成div也可生成其他标签如ulli#two。如果生成的div类名是有顺序的使用自增符号$。如.demo$*5。如果想要在生成的标签内部写内容可以用{}表示如div{text}。
1.2 快速生成CSS样式语法
CSS基本采取简写形式。
比如 w200 按tab可以生成 width: 200px;比如 lh26 按tab可以生成 line-height: 26px;
1.3 快速格式化代码
VS Code快速格式化代码右键 -- 格式化代码 或 shift alt f 也可以设置页面保存时自动格式化代码
文件 -- 首选项 -- 设置搜索emmet.include在settings.json下的用户中添加以下语句 “editor.formatOnType”:true, “editor.formatOnSave”:true 2 CSS复合选择器
2.1 什么是复合选择器
在CSS中可以根据选择器的类型把选择器分为基础选择器和复合选择器复合选择器是建立在基础选择器之上对基本选择器进行组合而形成的。
复合选择器可以更准确、更高效地选择目标元素标签复合选择器是由两个或多个基础选择器通过不同的方式组合而成的常用的复合选择器包括后代选择器、子选择器、并集选择器、伪类选择器等
2.2 后代选择器*
后代选择器又称为包含选择器可以选择父元素里面的子元素。其写法就是把外层标签写在前面内层标签写在后面中间用空格分隔。当标签发生嵌套时内层标签就称为外层标签的后代。
元素1 元素2 { 样式说明 }上述语法表示选择元素1里面的所有元素2后代元素。
元素1和元素2中间用空格隔开元素1是父级元素2是子级最终选择的时元素2元素2可以是儿子也可以是孙子等只要是元素1的后代元素元素1与元素2可以是任何基础选择器
ol li a {color: red;
}
.nav li a {color: red;
}2.3 子选择器
子元素选择器子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
元素1 元素2 { 样式声明 }上述语法表示选择元素1里面的所有直接后代子元素元素2。
元素1和元素2中间用大于号隔开。元素1是父级元素2是子级最终选择的是元素2。元素2必须是亲儿子直接后代。
2.4 并集选择器*
并集选择器可以选择多组标签同时为它们定义相同的样式通常用于集体生命。 并集选择器是个选择器通过英文逗号,连接而成任何形式的选择器都可以作为并集选择器的一部分。
元素1,
元素2 { 样式声明 }上述语法表示选择元素1和元素2。
2.5 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果比如给链接添加特殊效果或选择第n个元素。 伪类选择器书写最大的特点是用冒号:表示比如:hover:first-child。
2.6 链接伪类选择器
a:link /* 选择所有未被访问的链接 */a:visited /* 选择所有已被访问的链接 */a:hover /* 选择鼠标指针位于其上方的链接 */a:active /* 选择活动链接鼠标按下未弹起的链接 */
为了确保生效按照LVHA的顺序声明即:link:visited:hover:active因为a链接在浏览器中具有默认样式所以实际开发中都需要给链接单独指定样式
2.7 :focus为类选择器
:focus伪类选择器用于获取获得焦点的表单元素。 焦点就是光标一般情况input类表单元素才能获取因此这个选择器也主要针对表单元素。
input:focus {background-color: yellow;
}3 CSS的元素显示模式
3.1 什么是元素的显示模式
元素显示模式就是元素标签以什么方式进行显示。 HTML元素一般分为块元素和行内元素两种类型。
3.2 块元素
常见的块元素有h1~h6、p、div、ul、ol、li等其中div标签是最经典的块元素。 块元素的特点
独占一行。高度宽度外边距以及内边距都可以控制。宽度默认是容器父级宽度的100%。是一个容器及盒子里面可以放行内或者块级元素。
文字类的元素内不能使用块级元素。p标签主要用于存放文字因此p里面不能放块级元素。h1~h6等都是文字类块元素同p。
3.3 行内元素
常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等其中span是最典型的行内元素。有时也将行内元素称为内联元素。 行内元素的特点
相邻行内元素在一行上一行可以显示多个。高、宽直接设置是无效的。默认宽度就是它本身内容的宽度。行内元素只能容纳文本或其他行内元素。
链接里面不能再放链接。特殊情况链接a里面可以放块级元素但a需转换为块级模式。
3.4 行内块元素
行内元素中有几个特殊的标签img /、input /、td它们同时具有块元素和行内元素的特点称之为行内块元素。 行内块元素的特点
和相邻行内元素行内块在一行上但是它们之间会有空白缝隙。一行可以显示多个行内元素特点。默认宽度就是它本身内容的宽度行内元素特点。高度、行高、外边距以及内边距都可以控制块内元素特点。
3.5 元素的显示模式的转换*
特殊情况下需要元素模式的转换。简单理解一个模式的元素需要另一种模式的特性比如想要增加链接a的触发范围。
转换为块元素display: block;a {width: 150px;height: 50px;background-color: red;display: block;
}转换为行内元素display: inline;div {width: 150px;height: 50px;background-color: red;display: inline;
}转换为行内块元素display: inline-block;span {width: 100px;height: 300px;background-color: red;display: inline-block;
}3.6 一个小工具Snipaste的使用
Snipaste是一个简单但抢答的截图工具可以将截图贴回屏幕上。 常用快捷方式
F1可以截图同时测量大小、设置箭头、书写文字等F3在桌面置顶显示点击图片alt可以取色按下shift切换取色模式按下esc取消图片显示
3.7 单行文字垂直居中原理
CSS没有提供文字垂直居中的代码。 解决方案让文字的行高等于盒子的高度。 原理
行高上空隙文字本身高度下空隙。行高盒子高度文字偏上。行高盒子高度文字偏下。
3.8 案例简洁版小米侧边栏
思路
把链接a转换为块级元素这样链接就可以单独占一行并且有宽度和高度。鼠标经过a给链接设置背景颜色。
/* 1. 把a转换为块级元素 */
a {display: block;width: 230px;height: 40px;background-color: #55585a;font-size: 14px;color: #fff;text-decoration: none;text-indent: 2em;line-height: 40px;
}
/* 2 鼠标经过链接变换背景颜色 */
a:hover {background-color: #ff6700;
}4 CSS背景
通过CSS背景属性可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
4.1 背景颜色
background-color属性定义了元素的背景颜色。
background-color: 颜色值;一般情况下元素背景颜色默认值是transparent透明。
4.2 背景图片*
background-image属性描述了元素的背景图像。实际开发常见于Logo、一些装饰性的小图片或是超大的背景图优点是非常便于控制位置。
background-image: none | url(url);参数值作用none无背景图默认的url使用绝对或相对地址指定背景图像
当图片尺寸小于盒子尺寸时会有平铺效果。
4.3 背景平铺
如果需要在HTML页面上对背景图进行平铺可以使用background-repeat属性。
background-repeat: repeat | no-repeat | repeat-x | repeat-y;参数值作用repeat背景图像在纵向和横向上平铺默认的no-repeat背景图像不平铺repeat-x背景图像在横向上平铺repeat-y背景图像在纵向上平铺
4.4 背景位置
利用background-position属性可以改变图片在背景中的位置。
background-position: x y;参数代表的意思是x坐标和y坐标。可以使用方位名词或精确单位。
参数值说明length百分数 | 由浮点数字和单位标识符组成的长度值positiontop | center | bottom | left | center | right 方位名词
参数是方位名词 如果指定的两个值都是方位名词则两个值前后顺序无关比如left top和top left效果一致。 如果只指定了一个方位名词另一个值省略则第二个值默认居中对齐。 案例一 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle背景位置方位名词应用一/titlestyleh3 {width: 118px;height: 40px;/* background-color: pink; */font-size: 14px;font-weight: 400;line-height: 40px;background-image: url(images/icon.png);background-repeat: no-repeat;background-position: left center;text-indent: 1.5em;}/style/headbodyh3成长守护平台/h3/body
/html案例二 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle超大背景图片/titlestylebody {background-image: url(images/bg.jpg);background-repeat: no-repeat;/* background-position: center top; */background-position: center 40px;}/style/headbody/body
/html参数是精确单位 如果参数值是精确坐标那么第一个一定是x坐标第二个一定是y坐标。如果只指定一个数值那该数值一定是x坐标另一个默认垂直居中。 如果参数是混合单位 如果指定的两个值是精确单位和方位名词混合使用则第一个值是x坐标第二个值是y坐标。
4.5 背景图像固定背景附着
background-attachment属性设置背景图像是否固定或随着页面的剩余部分滚动。 background-attachment后期可以制作视差滚动的效果。
background-attachment: scroll |fixed;参数作用scroll背景图像是随对象内容滚动默认值fixed背景图像固定
4.6 背景属性复合写法
可以将所有属性合并简写在同一个属性background中从而节约代码量是实际开发中提倡的写法。 当使用简写属性时没有特定的书写习惯一般习惯约定顺序为
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;如
body {background-image: url(images/bg.jpg);background-repeat: no-repeat;background-position: center top;background-attachment: fixed;background-color: black;color: #fff;font-size: 20px;
}可简写为
body {background: black url(images/bg.jpg) no-repeat fixed center top;color: #fff;font-size: 20px;
}4.7 背景色半透明
CSS3提供了背景颜色半透明的效果。
background: rgba(0, 0, 0, 0.3);最后一个参数是alpha透明度取值范围在0~1之间。习惯把0.3的0省略掉写为background: rgba(0, 0, 0, .3)背景半透明是指盒子背景半透明盒子里面的内容不受影响。
5 总结
复合选择器 以前只使用过简单选择器和并集选择器现在才认真了解复合选择器。元素模式转换 以前做导航栏都是div里面嵌套a标签代码很臃肿。现在把行内元素a标签转换为行内块元素设置样式很方便就是这几个模式刚开始学很容易分不清。background-image 以前我插入图片特别是超大背景图只会用img标签调整位置和尺寸就很难受现在学了background-image感觉方便多了。
要坚持不下去了CSS的内容怎么这么多。还是那句话希望有下一篇。
