珠海企业免费建站,电商大数据平台建设方案,网站打开速度检测攻击,wordpress翠竹林主题CSS定义
层叠样式表 (Cascading Style Sheets#xff0c;缩写为 CSS#xff09;#xff0c;是一种 样式表 语言#xff0c;用来描述 HTML 文档的呈现#xff08;美化内容#xff09;
书写位置#xff1a;title 标签下方添加 style 双标签#xff0c;style 标签里面书…CSS定义
层叠样式表 (Cascading Style Sheets缩写为 CSS是一种 样式表 语言用来描述 HTML 文档的呈现美化内容
书写位置title 标签下方添加 style 双标签style 标签里面书写 CSS 代码。
示例
bodytitleCSS 初体验/titlestyle/* 选择器 { } */p {/* CSS 属性 */color: red;}/stylep体验 CSS/p
/bodyCSS引入方式 一般CSS代码写在style标签中 开发CSS代码卸载单独的CSS文件中(.css) 在HTML中使用link标签引入 link relstylesheet href./my.css 行内配合JavaScript使用 CSS写在标签的style属性值里 div stylecolor: red; font-size:20px;这是 div 标签/div
选择器
作用查找标签设置样式
基础选择器
标签选择器类选择器id选择器通配符选择器
标签选择器
使用标签名作为选择器 → 选中同名标签设置相同的样式。
例如p, h1, div, a, img…
!-- 使用p作为选择器 --stylep {color: red;}/style标签选择器无法差异化同名标签的显示效果。 类选择器
查找标签差异化设置标签的显示效果。
步骤
定义类选择器 → .类名使用类选择器 → 标签添加 class类名“
示例 style/* 定义类选择器 */.red {color: red;}/style!-- 使用类选择器 --div classred这是 div 标签/div类名自定义不要用纯数字或中文尽量用英文命名 一个类选择器可以供多个标签使用 一个标签可以使用多个类名类名之间用空格隔开 style/* 定义类选择器 */.red {color: red;}/stylestyle.size50 {font-size: 50px;}/style!-- 使用类选择器 --div classred size50这是 div 标签/divid选择器
查找标签差异化设置标签的显示效果。
id 选择器一般配合 JavaScript 使用很少用来设置 CSS 样式
步骤
定义 id 选择器 → #id名使用 id 选择器 → 标签添加 id “id名” style/* 定义 id 选择器 */#red {color: red;}/style!-- 使用 id 选择器 --div idred这是 div 标签/div同一个 id 选择器在一个页面只能使用一次 通配符选择器
查找页面所有标签设置相同样式。
*不需要调用浏览器自动查找页面所有标签设置相同的样式
* {
color: red;
}通配符选择器可以用于清除标签的默认样式例如标签默认的外边距、内边距 复合选择器
定义由两个或多个基础选择器通过不同的方式组合而成。
作用更准确、更高效的选择目标元素标签。
后代选择器
后代选择器选中某元素的后代元素。
选择器写法父选择器 子选择器 { CSS 属性}父子选择器之间用空格隔开。
style
div span {color: red;
}
/style
span span 标签/span
divspan这是 div 的儿子 span/span
/div子代选择器
子代选择器选中某元素的子代元素最近的子级。
选择器写法父选择器 子选择器 { CSS 属性}父子选择器之间用 隔开。
stylediv span {color: red;}
/style
divspan这是 div 里面的 span/spanpspan这是 div 里面的 p 里面的 span/span/p
/div并集选择器
并集选择器选中多组标签设置相同的样式。
选择器写法选择器1, 选择器2, …, 选择器N { CSS 属性}选择器之间用 , 隔开。
stylediv,p,span {color: red;}
/style
div div 标签/div
pp 标签/p
spanspan 标签/span交集选择器
交集选择器选中同时满足多个条件的元素
选择器写法选择器1选择器2 { CSS 属性}选择器之间连写没有任何符号。
stylep.box {color: red;}
/style
p classboxp 标签使用了类选择器 box/p
pp 标签/p
div classboxdiv 标签使用了类选择器 box/div如果交集选择器中有标签选择器标签选择器必须书写在最前面 伪类选择器
伪类选择器伪类表示元素状态选中元素的某个状态设置样式。
鼠标悬停状态选择器:hover { CSS 属性 }
stylea:hover {color: red;}.box:hover {color: green;}
/style
a href#a 标签/a
div classboxdiv 标签/div超链接一共有四个状态
选择器作用:link访问前:visited访问后:hover鼠标悬停:active点击时(激活) 如果要给超链接设置以上四个状态需要按 LVHA 的顺序书写 结构伪类选择器
作用根据元素的结构关系查找元素。
选择器说明E:first-child查找第一个元素E:last-child查找最后一个元素E:nth-child(N)查找第N个E元素(第一个元素N值为1)
示例查找第一个li元素
li:first-child {background-color: green;
}:nth-child(公式)
根据元素的结构关系查找多个元素。
功能公式偶数标签2n奇数标签2n1;2n-1找到5的倍数的标签5n找到第五个以后的标签n5找到第五个以前的标签-n5 公式中的n取值从 0 开始 伪元素选择器
作用创建虚拟元素伪元素用来摆放装饰性的内容。
选择器说明E::before在E元素里面最前面添加一个伪元素E::after在E元素里面最后面添加一个伪元素 必须设置content: 属性用来设置伪元素内容如果没有内容引号留空即可伪元素默认是行内显示模式权重和标签选择器相同 div::before {content: before 伪元素;
}
div::after {content: after 伪元素;
}基本属性
属性名作用color颜色width宽度height高度background-color背景色
例子使用合适的选择器画盒子 style#red {background-color: red;width: 100px;height: 100px;}/stylestyle#orange {background-color: orange;width: 200px;height: 200px;}/stylediv idred/divdiv idorange/div文字控制属性
描述属性字体大小font-size字体粗细font-weight字体倾斜font-style行高line-height字体族(字体样式)font-family字体复合属性font文本缩进text-indent文本对齐text-align修饰线text-decoration
字体大小
属性名font-size
属性值文字尺寸PC 端网页最常用的单位 px 谷歌浏览器默认字号是16px 字体粗细
属性名font-weight
属性值
数字(开发用) 正常400加粗700 关键字 正常normal加粗bold
字体倾斜
作用清除文字默认的倾斜效果/添加文字倾斜效果
属性名font-style
属性值
正常normal倾斜italic
行高
作用设置多行文本的间距
属性名line-height
属性值
数字px固定行高数字当前标签font-szie属性值的倍数
行高从一行文字的最顶端最底端量到下一行文字的最顶端最底端。
字体族
属性名font-family
属性值字体名
示例
font-family: 楷体;
font-family属性值可以书写多个字体名各个字体名用逗号隔开执行顺序是从左向右依次查找
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, \5B8B\4F53, sans-serif;
font-family 属性最后设置一个字体族名网页开发建议使用无衬线字体
复合属性
div {/* font: 是否倾斜 是否加粗 字号/行高 字体; */font: italic 700 30px/2 楷体;
}复合属性属性的简写方式一个属性对应多个值的写法各个属性值之间用空格隔开。
font: 是否倾斜 是否加粗 字号/行高 字体必须按顺序书写 字号和字体值必须书写否则 font 属性不生效 文本缩进
属性名text-indent
属性值
数字 px数字 em推荐1em 当前标签的字号大小
文本对齐方式
属性名text-align
属性值
left左对齐默认center居中对齐right右对齐
图片对齐方式
text-align本质是控制内容的对齐方式如果想要对图片进行对齐属性要设置给内容的父级。
stylediv {text-align: center;}
/style
divimg src./images/1.jpg alt
/div文本修饰线
属性名 text-decoration
属性值
none无underline下划线line-through删除线overline上划线
颜色
属性名color
颜色表示方式属性值说明适用场景颜色关键字颜色英文单词red、green、blue…学习测试rgb表示法rgb(r,g,b)gb表示红绿蓝三原色取值0-255了解rgba表示法rgba(r,g,b,a)a表示透明度取值0-1开发使用十六进制表示法#RRGGBB#000#ffcc00简写#000#fc0开发使用
只要属性值为颜色都可以使用上述四种颜色表示方式例如背景色
CSS特性
继承性层叠性优先级
继承性
子级默认继承父级的文字控制属性。 如果标签有默认文字样式会继承失败。 层叠性
相同的属性会覆盖后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加不同的 CSS 属性都生效 选择器类型相同则遵循层叠性否则按选择器优先级判断。 优先级
优先级也叫权重当一个标签使用了多种选择器时基于不同种类的选择器的匹配规则。
规则选择器优先级高的样式生效。
公式通配符选择器 标签选择器 类选择器 id选择器 行内样式 !important
选中标签的范围越大优先级越低
如果是复合选择器则需要权重叠加计算。
公式每一级之间不存在进位行内样式, id选择器个数, 类选择器个数, 标签选择器个数
规则
从左向右依次比较选个数同一级个数多的优先级高如果个数相同则向后比较!important 权重最高继承权重最低
Emmet写法
Emmet写法代码的简写方式输入缩写 VS Code 会自动生成对应的代码。
HTML
说明标签结构Emmet类选择器div classbox/div标签名.类名id选择器div idbox/div标签名#id名同级标签div/divp/pdivp父子级标签divp/p/divdivp多个相同标签span1/spanspan2/spanspan*2有内容的标签div内容/divdiv{内容}
CSS
说明CSS属性Emmet宽度widthw宽度500pxwidth:500pxw500背景色background-colorbgc多个属性width: 200px;height: 100px;background-color: #fff;w200h100bgc
背景属性
描述属性背景色background-color背景图background-image背景图平铺方式background-repeat背景图位置background-position背景图缩放background-size背景图固定background-attachment背景复合属性background
背景图
网页中使用背景图实现装饰性的图片效果。
属性名background-imagebgi
属性值url(背景图 URL)
div {width: 400px;height: 400px;background-image: url(./images/1.png);
}背景图默认有平铺复制效果。 背景图平铺方式
属性名background-repeatbgr
属性值
属性值效果no-repeat不平铺repeat平铺(默认效果)repeat-x水平方向平铺repeat-y垂直方向平铺
div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;
}背景图位置
属性名background-positionbgp
属性值水平方向位置 垂直方向位置
关键字效果left左侧right右侧center居中top顶部bottom底部
或是使用坐标数字 px正负都可以 水平正数向右负数向左 垂直正数向下负数向上
div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;background-position: center bottom;background-position: 50px -100px;background-position: 50px center;
}关键字取值方式写法可以颠倒取值顺序 可以只写一个关键字另一个方向默认为居中数字只写一个值表示水平方向垂直方向为居中 背景图缩放
作用设置背景图大小
属性名background-sizebgz
常用属性值 关键字 cover等比例缩放背景图片以完全覆盖背景区可能背景图片部分看不见 contain等比例缩放背景图片以完全装入背景区可能背景区部分空白 百分比根据盒子尺寸计算图片大小 数字 单位例如px
div {width: 500px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;background-size: cover;background-size: contain;
}工作中图片比例与盒子比例相同使用 cover 或 contain 缩放背景图效果相同。 背景图固定
作用背景不会随着元素的内容滚动。
属性名background-attachmentbga
属性值fixed
背景复合属性
属性名backgroundbg
属性值背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定空格隔开各个属性值不区分顺序
div {width: 400px;height: 400px;background: pink url(./images/1.png) no-repeat right center/cover;
}CSS精灵
CSS 精灵也叫 CSS Sprites是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中再
background-position 精确的定位出背景图片的位置。
优点减少服务器被请求次数减轻服务器的压力提高页面加载速度
实现步骤 创建盒子盒子尺寸与小图尺寸相同 设置盒子背景图为精灵图 添加 background-position 属性改变背景图位置 使用 PxCook 测量小图片左上角坐标 取负数坐标为 background-position 属性值向左上移动图片位置
字体图标
字体图标展示的是图标本质是字体
作用在网页中添加简单的、颜色单一的小图标
优点
灵活性灵活地修改样式例如尺寸、颜色等轻量级体积小、渲染快、降低服务器请求次数兼容性几乎兼容所有主流浏览器使用方便先下载再使用
下载地址阿里巴巴矢量图标库
下载步骤登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标加入购物车 → 购物车添加至项目确定 → 下载至本地→解压 使用字体 引入字体样式表 link relstylesheet href./iconfont/iconfont.css标签使用字体图标类名 span classiconfont icon-xxx/spaniconfont字体图标基本样式字体名字体大小等 icon-xxx图标对应的类名 在下载的压缩包中找到demo_index.html可查看图标对应的类名
显示模式
显示模式标签元素的显示方式。
作用布局网页的时候根据标签的显示模式选择合适的标签摆放内容。 块级元素 独占一行宽度默认是父级的100%添加宽高属性生效 行内元素 一行可以显示多个设置宽高属性不生效宽高尺寸由内容撑开 行内块元素 一行可以显示多个设置宽高属性生效宽高尺寸也可以由内容撑开
转换显示模式
属性名display
属性值
属性值效果block块inline-block行内块inline行内
PxCook
PxCook像素大厨 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别
能够测量网页元素尺寸及颜色
盒子模型
作用布局网页摆放盒子和内容
盒子模型重要组成部分
内容区域 – width height内边距 – padding出现在内容与盒子边缘之间边框线 – border外边距 – margin出现在盒子外面 div {margin: 50px;border: 5px solid brown;padding: 20px;width: 200px;height: 200px;background-color: pink;
}边框线
属性名borderbd
属性值边框线粗细 线条样式 颜色不区分顺序
常用线条样式
属性值线条样式solid实线dashed虚线dotted点线
div {border: 5px solid brown;width: 200px;height: 200px;background-color: pink;
}设置单方向边框线
属性名border-方位名词bd方位名词首字母例如bdl
属性值边框线粗细 线条样式 颜色不区分顺序
div {border-top: 2px solid red;border-right: 3px dashed green;border-bottom: 4px dotted blue;border-left: 5px solid orange;width: 200px;height: 200px;background-color: pink;
}内边距
作用设置 内容 与 盒子边缘 之间的距离。
属性名padding / padding-方位名词
div {/* 四个方向 内边距相同 */padding: 30px;/* 单独设置一个方向内边距 */padding-top: 10px;padding-right: 20px;padding-bottom: 40px;padding-left: 80px;width: 200px;height: 200px;background-color: pink;
}padding 多值写法
取值个数示例含义一个值padding: 10px四个方向均为10px四个值padding: 10px 20px 40px 80px顺序上;右;下;左三个值padding: 10px 40px 80px顺序上;左右;下两个值padding: 10px 80px顺序上下;左右 从上开始顺时针赋值当前方向没有数值则与对面取值相同。 尺寸计算 默认情况 盒子尺寸 内容尺寸 border 尺寸 内边距尺寸 结论给盒子加 border/padding 会撑大盒子
外边距
作用拉开两个盒子之间的距离
属性名margin
提示与 padding 属性值写法、含义相同
技巧版心居中 – 左右 margin 值 为 auto盒子要有宽度
合并现象
场景垂直排列的兄弟元素上下 margin 会合并
现象取两个 margin 中的较大值生效
塌陷问题
场景父子级的标签子级的添加 上外边距 会产生塌陷问题
现象导致父级一起向下移动
解决方法
取消子级margin父级设置padding父级设置 overflow: hidden父级设置 border-top
清除默认样式
清除标签默认的样式比如默认的内外边距
/* 清除默认内外边距 */
* {margin: 0;padding: 0;box-sizing: border-box;
}
/* 清除列表项目符号 */
li {list-style: none;
}元素溢出
作用控制溢出元素的内容的显示方式。
属性名overflow
属性值
属性值效果hidden溢出隐藏scroll溢出滚动无论是否溢出都显示滚动条位置auto溢出滚动溢出才显示滚动条位置
行内元素-内外边距问题
场景行内元素添加 margin 和 padding无法改变元素垂直位置
解决方法给行内元素添加 line-height 可以改变垂直位置
span {/* margin 和 padding 属性无法改变垂直位置 */margin: 50px;padding: 20px;/* 行高可以改变垂直位置 */line-height: 100px;
}圆角
作用设置元素的外边框为圆角。
属性名border-radius
属性值数字px / 百分比 属性值是圆角半径 取值个数示例含义一个值border-radius: 10px四个角均为10px四个值border-radius: 10px 20px 40px 80px顺序左上;右上;右下;左下三个值border-radius: 10px 40px 80px顺序左上;右上左下;右下两个值border-radius: 10px 80px顺序左上右下;右上左下 从左上角开始顺时针赋值当前角没有数值则与对角取值相同。 常见应用
正圆形状给正方形盒子设置圆角属性值为 宽高的一半 / 50%
img {width: 200px;height: 200px;border-radius: 100px;border-radius: 50%;
}胶囊形状给长方形盒子设置圆角属性值为 盒子高度的一半
div {width: 200px;height: 80px;background-color: orange;border-radius: 40px;
}阴影
作用给元素设置阴影效果
属性名box-shadow
属性值X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影 X 轴偏移量 和 Y 轴偏移量 必须书写默认是外阴影内阴影需要添加 inset div {width: 200px;height: 80px;background-color: orange;box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}标准流
标准流也叫文档流指的是标签在页面中默认的排布规则例如块元素独占一行行内元素可以一行显示多个。
浮动
作用让块元素水平排列。
属性名float
属性值
left左对齐right右对齐
特点
浮动后的盒子顶对齐浮动后的盒子具备行内块特点父级宽度不够浮动的子级会换行浮动后的盒子脱标不占用标准流的位置
清除浮动
场景浮动元素会脱标如果父级没有高度子级无法撑开父级高度可能导致页面布局错乱
解决方法清除浮动清除浮动带来的影响 额外标签法 在父元素内容的最后添加一个块级元素设置 CSS 属性 clear: both 单伪元素法 .clearfix::after {content: ;display: block;clear: both;
}双伪元素法推荐 .clearfix::before,
.clearfix::after {content: ;display: table;
}
.clearfix::after {clear: both;
}overflow 父元素添加 CSS 属性 overflow: hidden
Flex布局
Flex 布局也叫弹性布局是浏览器提倡的布局模型非常适合结构化布局提供了强大的空间分布和对齐能力。
Flex 模型不会产生浮动布局中脱标现象布局网页更简单、更灵活。
设置方式给父元素设置 display: flex子元素可以自动挤压或拉伸
组成
组成部分
弹性容器弹性盒子主轴默认在水平方向侧轴 / 交叉轴默认在垂直方向 描述属性创建flex容器display: flex主轴对齐方式justify-content侧轴对齐方式align-items某个弹性盒子侧轴对齐方式align-self修改主轴方向flex-direction弹性伸缩比flex弹性盒子换行flex-wrap行对齐方式align-content
主轴对齐方式
属性名justify-content
属性值效果flex-start默认值弹性盒子从起点开始依次排列flex-end弹性盒子从重点开始依次排列center弹性盒子沿主轴居中排列space-between弹性盒子沿主轴均匀排列空白间距均分在弹性盒子之间space-around弹性盒子沿主轴均匀排列空白间距均分在弹性盒子两侧space-evenly弹性盒子沿主轴均匀排列弹性盒子与容器之间间距相等
侧轴对齐方式
属性名
• align-items当前弹性容器内所有弹性盒子的侧轴对齐方式给弹性容器设置
• align-self单独控制某个弹性盒子的侧轴对齐方式给弹性盒子设置
属性值效果stretch弹性盒子沿着侧轴线被拉伸至铺满容器弹性盒子没有设置侧轴方向尺寸则默认拉伸center弹性盒子沿侧轴居中排列flex-start弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列
修改主轴方向
主轴默认在水平方向侧轴默认在垂直方向
属性名flex-direction
属性值效果row水平方向从左向右默认column垂直方向从上向下row-reverse水平方向从右向左column-reverse垂直方向从下向上
弹性伸缩比
作用控制弹性盒子的主轴方向的尺寸
属性名flex
属性值整数数字表示占用父级剩余尺寸的份数
弹性盒子换行
弹性盒子可以自动挤压或拉伸默认情况下所有弹性盒子都在一行显示。
属性名flex-wrap
属性值
wrap换行nowrap不换行默认
行对齐方式
属性名align-content
属性值效果flex-start默认值弹性盒子从起点开始依次排列flex-end弹性盒子从重点开始依次排列center弹性盒子沿主轴居中排列space-between弹性盒子沿主轴均匀排列空白间距均分在弹性盒子之间space-around弹性盒子沿主轴均匀排列空白间距均分在弹性盒子两侧space-evenly弹性盒子沿主轴均匀排列弹性盒子与容器之间间距相等
定位
灵活的改变盒子在网页中的位置
实现
定位模式position边偏移设置盒子的位置
属性名
leftrighttopbottom
属性值
百分比示例top: 50%从父标签顶部开始向下移动父标签高度50%示例right: 30%从父标签右部开始向左移动父标签宽度30%
相对定位
position: relative
特点
不脱标占用自己原来位置显示模式特点保持不变设置边偏移则相对自己原来位置移动
绝对定位
position: absolute
使用场景子级绝对定位父级相对定位子绝父相
特点
脱标不占位显示模式具备行内块特点设置边偏移则相对最近的已经定位的祖先元素改变位置如果祖先元素都未定位则相对浏览器可视区改变位置
定位居中
实现步骤
绝对定位水平、垂直边偏移为 50%子级向左、上移动自身尺寸的一半 左、上的外边距为 –尺寸的一半transform: translate(-50%, -50%)
固定定位
position: fixed
场景元素的位置在网页滚动时不会改变
特点
脱标不占位显示模式具备行内块特点设置边偏移相对浏览器窗口改变位置
堆叠层级
堆叠层级 z-index
默认效果按照标签书写顺序后来者居上
作用设置定位元素的层级顺序改变定位元素的显示顺序
属性名z-index
属性值整数数字默认值为0取值越大层级越高
修饰属性
垂直对齐方式
属性名vertical-align
属性值
属性值效果baseline基线对齐(默认)top顶部对齐middle居中对齐bottom底部对齐
过渡transition
作用可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名transition复合属性
属性值过渡的属性 花费时间 (s)
提示
过渡的属性可以是具体的 CSS 属性也可以为 all两个状态属性值不同的所有属性都产生过渡效果transition 设置给元素本身
示例
img {width: 200px;height: 200px;transition: all 1s;
}
img:hover {width: 500px;height: 500px;
}透明度opacity
作用设置整个元素的透明度包含背景和内容
属性名opacity
属性值0 – 1
0完全透明元素不可见1不透明0-1之间小数半透明
光标类型cursor
作用鼠标悬停在元素上时指针显示样式
属性名cursor
属性值效果default默认值通常是箭头pointer小手效果提示用户可以点击text工字形提示用户可以选择文字move十字光标提示用户可以移动
SEO
SEO搜索引擎优化提升网站百度搜索排名
网页头部 SEO 标签
title网页标题标签description网页描述keywords网页关键词
示例 Favicon图标
Favicon 图标网页图标出现在浏览器标题栏增加网站辨识度。
图标favicon.ico一般存放到网站的根目录里面
!-- link:favicon --
link relshortcut icon hreffavicon.ico typeimage/x-icon
