用php和mysql做网站,wordpress怎么登陆ftp,wordpress登录链接修改,加盟网页制作CSS
1简介
1.1定义
层叠样式表 (Cascading Style Sheets#xff0c;缩写为 CSS#xff09;#xff0c;是一种 样式表 语言#xff0c;用来描述 HTML 文档的呈现#xff08;美化内容#xff09;。
1.2 特性
继承性 子级默认继承父级的文字控制属性。层叠性 相同的属性…CSS
1简介
1.1定义
层叠样式表 (Cascading Style Sheets缩写为 CSS是一种 样式表 语言用来描述 HTML 文档的呈现美化内容。
1.2 特性
继承性 子级默认继承父级的文字控制属性。层叠性 相同的属性会覆盖后面的 CSS 属性覆盖前面的 CSS 属性不同的属性会叠加不同的 CSS 属性都生效 也叫权重当一个标签使用了多种选择器时基于不同种类的选择器的匹配规则 选择器优先级高的样式生效优先级顺序通配符选择器 标签选择器 类选择器 id选择器 行内样式 !important
2基础语法
2.1引用方式
内部样式表 CSS 代码写在 style 标签里面
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 放置在head标签内书写样式 --style/style
/head外部样式表开发使用 CSS 代码写在单独的 CSS 文件中.css,在 HTML 使用 link 标签引入
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 方式二引入css文件 --link relstylesheet href./css/引入样式.css
/head行内样式表 CSS 写在标签的 style 属性值里
div stylecolor: red; font-size:20px;这是 div 标签/div2.2选择器
作用查找标签设置样式
2.2.1基础选择器
标签选择器 作用使用标签名作为选择器 → 选中同名标签设置相同的样式。 p {color: red;}语法标签名 {样式}类选择器 作用查找相应class标签差异化设置标签的显示效果。这里要在相应标签添加 class“类名”一个标签有多个类名类名间用空格隔开 .red {color: red;}语法类名 {样式}id 选择器 作用查找相应id标签差异化设置标签的显示效果。这里要在相应标签添加 id“id名”一个标签只有id名 #id{color: red;}语法#id名 {样式}通配符选择器 作用查找页面所有标签设置相同样式
* {color: red;
}2.2.2 复合选择器
由两个或多个基础选择器通过不同的方式组合而成。 作用更准确、更高效的选择目标元素标签。
后代选择器 选中某元素的后代元素。
语法父选择器 子选择器 { CSS 属性}父子选择器之间用空格隔开。
div span {color: red;
}子代选择器 选中某元素的子代元素最近的子级。
语法父选择器 子选择器 { CSS 属性}父子选择器之间用 隔开。
div span {color: red;
}并集选择器 选中多组标签设置相同的样式。
语法选择器1, 选择器2, …, 选择器N { CSS 属性}选择器之间用 , 隔开。
div,
p,
span {color: red;
}交集选择器 选中同时满足多个条件的元素。
语法选择器1选择器2 { CSS 属性}选择器之间连写没有任何符号。
p.box {color: red;
}伪类选择器 伪类表示元素状态选中元素的某个状态设置样式。
语法选择器:hover { CSS 属性 }
a:hover {color: red;
}2.2.3 进阶选择器
结构伪类选择器 作用根据元素的结构关系查找元素。 伪类状态
选择器说明E:first-child寻找 第一个E元素E:last-child寻找 最后一个E元素E:nth-child(N)寻找 第N个E元素(索引从1开始)
语法符合选择器:结构伪类选择器 { CSS 属性 }
li:first-child {background-color: green;
}nth-childN选择器中的N可以根据公式查询 n取值从0 开始 偶数2n 奇数2n - 1 5的倍数5n 5以后的标签n 5 五以前5 - n
伪元素选择器 作用创建虚拟元素伪元素用来摆放装饰性的内容。 伪元素分类 |选择器| 说明 | |–|–| | E:before | 在E元素最前面添加一个伪元素| | E:after | 在E元素最后面添加一个伪元素| 注意点必须设置 content: ””属性用来 设置伪元素的内容如果没有内容则引号留空即可伪元素默认是行内显示模式权重和标签选择器相同
语法符合选择器:伪元素选择器 { CSS 属性 }
div::before {content: before 伪元素;
}
div::after {content: after 伪元素;
}2.3 文字属性
字体大小 属性名font-size 属性值文字尺寸PC 端网页最常用的单位 px
p {font-size: 16px;}字体粗细 属性名font-weight 属性值 400(normal) 正常700bold加粗
p {/* 不加粗 */font-weight: 400;/* 加粗 */font-weight: 700;}字体样式是否倾斜 属性名font-style 属性值 正常不倾斜normal倾斜italic
p {/* 不加粗 */font-style: normal ;/* 倾斜 */font-style: italic;}行高 属性名line-height 属性值数字 px 文字垂直居中的方法:行高属性值等于盒子高度属性值
p {line-height: 100px;}字体族 属性名font-family 属性值字体名
p {font-family: Microsoft YaHei,Heiti SC;}font-family属性值可以书写多个字体名各个字体名用逗号隔开执行顺序是从左向右依次查找
字体复合属性 属性名font 属性值是否倾斜 是否加粗 字号/行高 字体必须按顺序书写
div {font: italic 700 30px/2 楷体;
}文本缩进 属性名text-indent 属性值数字 em推荐1em 当前标签的字号大小
p{text-indent: 2em;
}文本对齐方式 属性名text-align 属性值 left: 左对齐默认right右对齐center居中对齐
p{text-align: center;
}文本修饰线 属性名 text-decoration 属性值 none: 无underline: 下滑线line-through 删除线overline: 上划线
p{text-decoration: none;
}字体颜色 属性名color 属性值 颜色名颜色单词rgb表示法rgb(r, g, b)rgba表示法rgbar,gba)十六进制表示法: #RRGGBB
p{color: red;
}2.4 背景属性
背景色 属性名background-color 属性值: 颜色四种取值的一种即可
body{background-color: red;
}背景图 属性名background-imagebgi 属性值url(背景图 URL)
div{background-image: url(./images/1.png);
}背景图默认有平铺复制效果。
背景图平铺方式 属性名background-repeatbgr 属性值 no-repeat: 不平铺repeat: 平铺repeat-x: 水平平铺repeat-y: 垂直平铺
div{background-repeat: no-repeat;
}背景图位置 属性名background-positionbgp 属性值水平方向位置 垂直方向位置 坐标数字 px正负都可以 水平正数向右负数向左 垂直正数向下负数向上关键字 left , right, center, top, bottom
div{background-position: center bottom;background-position: 50px -100px;background-position: 50px center;
}背景图缩放 属性名background-sizebgz 属性值 关键字 cover等比例缩放背景图片以完全覆盖背景区可能背景图片部分看不见contain等比例缩放背景图片以完全装入背景区可能背景区部分空白 百分比根据盒子尺寸计算图片大小数字 单位例如px
div{background-size: cover;background-size: contain;
}背景图固定 属性名background-attachmentbga 属性值fixed
div{background-attachment: fixed;
}背景复合属性 属性名backgroundbg 属性值背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定空格隔开各个属性值不区分顺序
div{background: pink url(./images/1.png) no-repeat right center/cover;
}2.5 显示模式
标签元素的显示方式。 作用布局网页的时候根据标签的显示模式选择合适的标签摆放内容
块级元素 独占一行宽度默认是父级的100%添加宽高属性生效 行内元素 一行可以显示多个设置宽高属性不生效宽高尺寸由内容撑开 行内块元素 一行可以显示多个宽高尺寸也可以由内容撑开设置宽高属性生效 转换显示模式
属性名display 属性值 block 块级inline-block 行内块inline 行内
span{display: block;
}3 盒子模型
盒子模型重要组成部分
内容区域 – width height内边距 – padding出现在内容与盒子边缘之间边框线 – border外边距 – margin出现在盒子外面 *
3.1 边框
全方向边框 属性名borderbd 属性值边框线粗细 线条样式 颜色不区分顺序 常见线条样式
属性值样式solid实线dashed虚线dotted点线
div{border: 5px solid brown;
}以上默认添加四个方向的边框
设置单方向边框线 属性名border-方位名词bd方位名词首字母例如bdl 属性值边框线粗细 线条样式 颜色不区分顺序
div {border-top: 2px solid red;border-right: 3px dashed green;border-bottom: 4px dotted blue;border-left: 5px solid orange;}3.2 内边距
作用设置 内容 与 盒子边缘 之间的距离。 属性名padding / padding-方位名词 作用设置 内容 与 盒子边缘 之间的距离。 属性名padding / padding-方位名词 属性值数字px
div {padding-top: 10px;padding-right: 20px;padding-bottom: 40px;padding-left: 80px;
}padding 多值写法
多值写法示例含义一个值padding: 10px四个方向内边距均为10px两个值pading: 10px 80px上下10px 左右80px三个值pading: 10px 40px 80px上10px 左右40px 下80px四个值pading: 10px 20px 40px 80px上:10px 右20px 下 40px 左: 80px
记忆技巧从上开始顺时针赋值当前方向没有数值则与对面取值相同。
3.3 盒子尺寸
默认情况 盒子尺寸 内容尺寸 border 尺寸 内边距尺寸结论:给盒子加 border / padding 会撑大盒子解决 手动做减法减掉 border / padding 的尺寸內减模式box-sizing: border-box
3.4 外边距
作用拉开两个盒子之间的距离 属性名margin 属性值与 padding 属性值写法、含义相同
div {/* 版心居中 */margin: 0 auto;
}3.5 元素溢出
作用控制溢出元素的内容的显示方式。 属性名overflow 属性值
hidden: 溢出隐藏scroll: 溢出滚动auto: 溢出滚动内容溢出才有滚动
3.6 圆角
作用设置元素的外边框为圆角。 属性名border-radius 属性值数字px / 百分比圆角半径
img {border-radius: 100px;border-radius: 50%;
}3.8 阴影
作用给元素设置阴影效果 属性名box-shadow 属性值X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影
div {box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}3.7 特殊现象 合并现象 场景垂直排列的兄弟元素上下 margin 会合并 现象取两个 margin 中的较大值生效 外边距塌陷重叠问题 场景父子级的标签子级的添加 上外边距 会产生塌陷问题 现象导致父级一起向下移动 解决办法 取消子级margin父级设置padding父级设置 overflow: hidden父级设置 border-top 行内元素 – 内外边距问题 场景行内元素添加 margin 和 padding无法改变元素垂直位置 解决方法给行内元素添加 line-height 可以改变垂直位置
span {/* margin 和 padding 属性无法改变垂直位置 */margin: 50px;padding: 20px;/* 行高可以改变垂直位置 */line-height: 100px;
}4 布局
4.1 标准流
标准流也叫文档流指的是标签在页面中默认的排布规则
4.2 浮动
作用让块元素水平排列。 属性名float 属性值
left左对齐right右对齐 特点浮动后的盒子顶对齐浮动后的盒子具备行内块特点浮动后的盒子脱标不占用标准流的位置
4.3 Flex 布局
Flex 布局也叫弹性布局是浏览器提倡的布局模型非常适合结构化布局提供了强大的空间分布和对齐能力。Flex 模型不会产生浮动布局中脱标现象布局网页更简单、更灵活。 组成部分
弹性容器弹性盒子主轴默认在水平方向侧轴 / 交叉轴默认在垂直方向 flex布局属性
描述属性创建 flex 容器display: flex主轴对齐方式justify-content侧轴对齐方式align-items弹性盒子换行flex-wrap某个弹性盒子侧轴对齐方式align-self修改主轴方向flex-direction弹性伸缩比flex行对齐方式align-content 主轴对齐方式 属性名justify-content 属性值 flex-start 默认值从起点开始排列 类似左对齐flex-end 从中点开始排列 类似右对齐center 水平居中 类似居中对齐space-between 两端对齐space-around 分散对齐 侧轴对齐方式 属性名 align-items 属性值 stretchcenter 从中点开始排列 类似 居中对齐flex-start 默认值从起点开始排列 类似上对齐flex-end 从中点开始排列 类似下对齐 某个弹性盒子侧轴对齐方式 属性名align-self 属性值 stretchcenter 从中点开始排列 类似 居中对齐flex-start 默认值从起点开始排列 类似上对齐flex-end 从中点开始排列 类似下对齐 弹性盒子换行 属性名flex-wrap 属性值 wrap换行nowrap不换行默认 修改主轴方向 属性名flex-direction 属性值 row: 水平column : 垂直方向row-reverse 水平方向从右往左column: 垂直方向从下往上 弹性伸缩比 属性名flex 属性值整数数字表示占用父级剩余尺寸的份数 行对齐方式 属性名align-content 属性值 flex-start 默认值从起点开始排列 类似左对齐flex-end 从中点开始排列 类似右对齐center 水平居中 类似居中对齐space-between 两端对齐space-around 分散对齐
对单行弹性盒子模型无效
4.4 特殊现象
清除浮动 场景浮动元素会脱标如果父级没有高度子级无法撑开父级高度可能导致页面布局错乱 解决方法清除浮动清除浮动带来的影响
额外标签法: 在父元素内容的最后添加一个块级元素设置 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
5定位
5.1 定位模式
作用灵活的改变盒子在网页中的位置 属性position 属性值
relative 特点 不脱标占用自己原来位显示模式特点保持不变设置边偏移则相对自己原来位置移动 absolute 使用场景子级绝对定位父级相对定位子绝父相 特点 脱标不占位显示模式具备行内块特点设置边偏移则相对最近的已经定位的祖先元素改变位置如果祖先元素都未定位则相对浏览器可视区改变位 fixed 场景元素的位置在网页滚动时不会改变 特点 脱标不占位显示模式具备行内块特点设置边偏移相对浏览器窗口改变位置
6 CSS 修饰属性
6.1 垂直对齐方式
属性名vertical-align 属性值
baseline 基线对齐top 顶部对齐middle居中对齐bottom底部对齐
6.2 过渡
作用可以为一个元素在不同状态之间切换的时候添加过渡效果 属性名transition复合属性 属性值过渡的属性 花费时间 (s)
img {width: 200px;height: 200px;transition: all 1s;
}
img:hover {width: 500px;height: 500px;
}6.3 透明度
作用设置整个元素的透明度包含背景和内容 属性名opacity 属性值0 – 1
0完全透明元素不可见1不透明0-1之间小数半透明
6.4 光标类型
作用鼠标悬停在元素上时指针显示样式 属性名cursor
default : 通常为箭头pointer: 小手形状text: 工字形move十字光标
