郑州企业自助建站,大兴58网站起名网站制作,佛山百度关键词排名,写wordpress目录 一、简单的网页结构
二、常用标签
三、列表
四、CSS引入方式
五、常用选择器
1、标签#xff08;元素#xff09;选择器 2、id选择器
3、class选择器
4、通配选择器
5、复合选择器
6、关系选择器
7、属性选择器
8、伪类选择器
9、a元素的伪类
10、伪元素…目录 一、简单的网页结构
二、常用标签
三、列表
四、CSS引入方式
五、常用选择器
1、标签元素选择器 2、id选择器
3、class选择器
4、通配选择器
5、复合选择器
6、关系选择器
7、属性选择器
8、伪类选择器
9、a元素的伪类
10、伪元素选择器 11、继承
12、选择器的权重
六、元素之间的转换
七、字体
字体的样式
字体的分类
字体的其他样式
八、盒子模型
1、什么是盒模型
2、影响盒模型大小
3、设置内边距
4、外边距
5、布局 6、外边距的重叠
7、元素的盒模型
九、浮动 设置浮动特点
解决高度塌陷的方法
清除浮动 十、定位
1、开启定位 2、开启定位后元素具有特点
开启绝对定位 开启固定 开启粘滞定位 一、简单的网页结构
!DOCTYPE html
文档声明 告诉浏览器我们写的代码是按照html文档类型来写的浏览器在编译代码时也要按照html规范来编译防止出现怪异模式
html/html html根标签 一个页面就一个根标签 所有的内容都要写在根标签里面开始标签和结束标签中间 head /head
head标签 帮助浏览器编译代码里面的内容用户一般看不到 body /body
body标签 是书写网页主体内容用户看到的所有内容 文字图片音视频等等都写在body !-- chinese lorem 假文 jw数字--有作洪锐领招承如。!-- lorem数字 --Lorem ipsum dolor sit amet. title/title title标签网站的标题 可以帮助推广部门进行网站推广非常重要一般具体内容都是推广部门来定的 meta/
meta标签是根据其配置的属性和属性值来确定功能, 设置一些元信息
属性和属性值写在开始标签和自标签内部的 charset属性charset属性值 charset属性 设置字符集 utf-8 字符集的类型-万国码 gb、gbk等 编码将汉字图片音视频等等转成二进制的过程 解码将二进制又转成汉字图片音视频等 乱码编码和解码参考的标准不统一就会出现乱码 二、常用标签
1、标题标签 h1-h6
默认样式字体加粗从h1-h6字体是逐步放小行与行之间的间距比较大独占一行 语义表示一个标题 可以帮助推广部门做推广 其中h1的语义最重一般情况下一个页面就一个h1 常用的是h1-h3 h1 一级标题 /h1 h2 二级标题 /h2 h3 三级标题 /h3 h4 四级标题 /h4 h5 五级标题 /h5 h6 六级标题 /h6 2、段落标签 p
默认样式行与行之间有间隔独占一行
语义表示一个段落
注意p中间一般只放文本或者图片
3、强调标签
strong 文本加粗强调
em 文本倾斜强调
4、center
语义使内容居中
默认样式会独占一行
5、br 强制换行
6、hr 分割线
7、del 删除线 不会独占一行
8、div 没有任何语义的标签会独占一行
9、span 没有任何语义的标签 不会独占一行
能够用有语义标签的时候一定要用对应的标签 三、列表
将一组一组数据列在一起
1、有序列表
用ol创建 li表示每个列表项
默认样式默认加项目符号123列表项前面有一定间距
2、无序列表
用ul创建li表示每个列表项
默认样式加项目符号黑心圆列表项前面有一定间距
3、定义列表
用dl创建dt表示下定义dd表示具体内容 注意1、常用的ulol在实际开发过程中不会特别区分有序或者无序 2、ul liol lidl dt dd是相对固定的结构里面一般情况下不嵌套其他子元素 3、ul ol li dl dt dd 都是块元素 4、ul ol 有一个属性 type属性可以更改项目符号 ol type 属性 可选值1 默认 A 、a、I、i ul type 属性 可选值 disc 黑心圆 square 实心方块 circle 空心的圆 5、列表可以相互嵌套使用 6、列表的默认样式一般情况下是不需要后期写样式之前需要去除 四、CSS引入方式
第一种方式内联样式/行内样式
写在开始标签或者自结束标签内部写一个style属性将css样式写在属性值
可以写多组样式但一定要用隔开
优点是有针对性
缺点
1、html结构和css样式耦合了不好看
2、不好修改
3、使用js不好修改后期维护也不行
不建议使用 第二种方式内部样式表
写在head标签内写一个style标签在style标签内通过选择器选中对应的内容
在{ } 内设置css样式可以写多组样式用 隔开
优点 方便修改
缺点1、css样式还是写在html文件内部会导致代码量很多 2、不方便复用
第三种方式外部样式表
在html文件的外面新建一个.css文件在css文件内选中对应的内容写css样式
通过在html文件head标签写link标签引入对应的css文件
或在style标签内import url ( 文件名 .css );
推荐使用 五、常用选择器
1、标签元素选择器
作用通过对应的标签名选中内容
语法标签名 { }
注意会波及其他的同标签名的内容 2、id选择器
作用通过id属性值选中对应的内容
语法#id属性值 { }
注意id属性值不能以数字汉字开头而且id属性值不能复用 3、class选择器
作用通过对应class属性值选中内容跟id选择器很像不同的是class属性值可重复使用 语法.class属性值 注意最常用的选择器 4、通配选择器
作用选中页面中所有的标签
语法*{ }
5、复合选择器
1、交集选择器
作用 同时符合选择器1选择器2···对应的内容 语法 选择器1选择器2····{} 注意如果选择器中有标签选择器那么标签选择器必须放在第一位 2、并集选择器群组选择器
在选择器1或者选择器2或者····里面的内容 语法选择器1,选择器2,····{} 6、关系选择器
1、子元素选择器
作用通过指定的父元素找到指定的子元素
语法父元素 子元素 { } 2、后代元素选择器
作用通过指定的祖先元素找到指定的后代元素
语法祖先元素 后代元素 { } 3、选择下一个兄弟紧挨着我的
作用通过指定的兄弟找到紧挨弟弟
语法 兄 弟 { } 4、选中指定元素下所有的兄弟
语法兄 ~ 弟{ } 7、属性选择器
语法[属性名]{} 选择含有指定属性的元素 [属性名属性值]{} 选择含有指定属性和属性值的元素 [属性名^属性值]{} 选择指定属性以指定属性值开头的元素 [属性名$属性值]{} 选择属性值以指定值结尾的元素 [属性名*属性值]{} 选择属性值含有某值的元素 8、伪类选择器
:first-child 第一个元素
:last-child 最后一个元素
:nth-of-child 选中第几个元素 特殊实参值
2n / even 偶数
2n1 / odd 奇数 是按照所有子元素的排列顺序 :first-of-type 第一个元素
:last-of-type 最后一个元素
:nth-of-type( ) 选中第几个元素 特殊实参值
2n / even 偶数
2n1 / odd 奇数 是按照同类型的子元素排序 9、a元素的伪类
1、:link 用来表示未访问过的链接正常链接
2、:visited 用来表示访问过的链接 由于隐私的原因所以visited只能改颜色
注意:link,:visited 是超链接独有的
3、:hover 用来表示鼠标移入的状态
4、:active 鼠标点击后的状态
:hover :active 适用所有的标签 10、伪元素选择器 伪元素表示页面中一些特殊的并不真实存在的元素元素的位置 ::first-letter 表示第一个字母 ::first-line 表示第一行 ::selection 选中的内容 ::before 元素的开始位置 ::after 元素的结束位置 before和after必须要结合content使用 11、继承 /* 共同的祖先元素设置统一的字体大小 */ body{ /* 字体的颜色、字体的大小、行高、字体 */ } 样式的继承继承祖先的资产 定义为一个元素设置的样式同时也会应用到它的后代元素上 优势方便我们开发讲一些通用的样式统一设置到共同的祖先元素上 子元素的样式都可以获取到样式 注意并不是所有的样式都会被继承比如背景相关的布局相关等不会被继承 12、选择器的权重
样式冲突 通过不同的选择器选中同一个元素进行一样的样式设定 发生样式冲突时应用哪一个样式由选择器的权重优先级决定
器的权重 内联样式 1000 id选择器 100 类选择器包括伪类选择器 10 标签选择器 1 通配选择器 0 继承的样式 没有权重 注意 1、当选择器的权重相同的时候谁靠下就使用谁
2、多个选择器共同使用则最终权重是多个选择器权重相加
3、如果选择器是并集选则选择器的权重是各算各的
4、选择器的权重再累加也不会超过它的上一级
5、important 权重最高 写在属性值的后面中间用空格隔开 后面是分号
慎用
一般情况在修改框架样式的时候使用
确认是否是选择器权重问题bug的时候 如果设置样式没有生效要么是没选中要么是权重的问题可以用important来做区分 六、元素之间的转换 display样式名 可选值 block 将元素转成块元素 inline 将元素转成行内元素 inline-block 将元素转成行内块元素 none 将元素隐藏 flex 弹性盒子 table 表格 注意最好不要经常转换 设置外边距 margin0
设置内边距 padding0
去除项目符号 list-stylenone
去掉下划线 text-decorationnone 七、字体 字体的样式
1:color 设置字体颜色,也可以设置其他颜色
2:font-size
3:font-family可以指定文字的字体
4:font-face
style/* 自定义字体 */font-face {/* 字体名字 */font-family: yangyang;/* 字体引入路径 */src: url(./字体/ZCOOLKuaiLe-Regular.ttf);}.p1 {color: #f00;font-size: 2em;/* 设计师会给具体的字体类型 */font-family: yangyang;} 字体的分类
在网页中将字体分成5大类 serif [serif]衬线字体 sans-serif非衬线字体 monospace 等宽字体 cursive [kə:siv]草书字体 fantasy [fæntəsi]虚幻字体
可以将字体设置为这些大的分类,当设置为大的分类以后
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类指定为font-family中的最后一个字体 ,用来兜底 字体的其他样式 设置一个文字大小 设置一个字体 设置文字斜体 font-style: ; 可选值 normal 文本正常显示 italic 文字斜体 常用 oblique 文字斜体 设置文字的加粗 font-weight: ; 可选值 normal 文本正常显示 bolder 文字加粗 bold 文字加粗 100-900 设置文字粗细效果100最细 900最粗 设置一个小型大写字母 font-variant: ; 可选值 small-caps normal font简写 font: italic bolder 40px monospace; 必写字体大小字体 顺序要求字体大小必须倒数第二位 字体必须倒数第一位 八、盒子模型
1、什么是盒模型
将一个内容放在页面合适的位置需要考虑到这个内容大小位置形状就相当于买一个家具 css将所有内容的形状统一成矩形然后只需要考虑内容大小
2、影响盒模型大小 影响盒模型大小内容区内边距边框 1、内容区 用来放具体内容 默认情况下 width: 设置内容区的宽度; height: 设置内容区的高度;
2:边框border元素设置边框 边框属于盒子边缘边框里面属于盒子内部出了边框都是盒子的外部 设置边框必须指定三个样式 1、 border-width:; 4个值 上 右 下 左 3个值 上 左右 下 2个值 上下 左右 1个值 上下左右 2、 可以单独设置某一边的宽度 border-xxx-width:; top right bottom left 3、 border-width:; 选写的 有默认值1.5px左右 1、 border-style: ; 可选值 none 默认值没有样式 solid 实线 dashed 虚线 double 双线 dotted 圆点虚线 2、单独设置某一边的边框样式 border-XXX-style: ; top right bottom left 3、border-style也可跟多个值规则跟border-width一样 1、 border-color:; 也可跟多个值规则跟border-width一样 2、单独设置某一边的边框样式 border-XXX-color: ; top right bottom left 3、自定义小箭头 border-color:transparent red transparent transparent; border简写 1、 border: 10px solid blue; 2、可以单独设置某一边的边框 border-xxx top right bottom left 3 、bordersolid 4、border-XXX: none; top right bottom left 3、设置内边距 1、padding:10px; 指的是盒子的内容区与盒子边框之间的距离 2、padding:; 也可跟多个值规则跟border-width一样 3、单独设置一边内边距 padding-xxx: ; top right bottom left
4、外边距 margin 用来控制元素与元素之间的距离 1、 margin-top:; 正值元素向下移动 负值元素向上 margin-left: ;正值元素向右移动负值元素向左 margin-bottom: ;元素自己不动正值挤着下面的元素向下负值下面的元素向上 margin-right: 对于块元素不生效 2、 margin:; 可以跟多个值规则跟border-width一样 5、布局
1、水平布局 过渡约束 浏览器的一种规则元素水平方向七个值数值相加要等于其父元素内容区宽度 如果不等于浏览器会进行强制调整这个过程就叫过度约束 怎么调整 1、七个值当中没有auto就调整margin-right 00010000500600 2、如果有automargin-leftwidthmargin-right可以被设置为auto 1个auto 谁是auto调整谁 margin-left为autowidthmargin-right为固定值 margin-right为autowidthmargin-left为固定值 width为automargin-leftmargin-left为固定值 000auto000600 2个auto margin-leftwidth为automargin-right为固定值 调整width widthmargin-right为automargin-left为固定值 调整width **** margin-leftmargin-right为autowidth为固定值 同时调整margin-leftmargin-right 3个auto margin-leftwidthmargin-right为auto 调整的width 总结如果width为auto就只调整width 2、垂直布局 overflow: ; 可选值 visible 默认值文本正常显示 hidden 裁剪多余 auto 根据需要出现滚动条 scroll 双滚动条 overflow-x:; overflow-y:; 6、外边距的重叠
垂直外边距的重叠 -兄弟元素 两者正值的话谁大听谁的 一正一负两者相加 两者负值的话谁小听谁的 一般情况兄弟元素的外边距重叠问题不需要特殊解决 -父子元素 如果父子元素的垂直外边距相邻了则子元素的外边距会传递给父元素 从而会影响到整个页面的布局必须要处理 解决方案 1、用透明边框隔开两者的外边距 2、overflow: 非visible的值;(可以开启元素的BFC属性)
7、元素的盒模型
行内元素的盒模型 1: 不能设置width和height被内容撑开 2: 可以设置padding但垂直方向padding不会影响页面的布局不会挤别人 3: 可以设置边框但是垂直的边框不会影响到页面的布局不会挤别人 4: 可以设置水平方向的外边距水平方向的相邻外边距不会重叠而是求和但不支持垂直外边距
九、浮动
浮动 就是使用float样式使元素脱离文档流 可选值 none 默认值不设置浮动 left 向左浮动 right 向右浮动 设置浮动特点 1、一旦元素设置了浮动元素就会脱离文档流它原来在文档流得位置 就会被它下面的元素挤上来 2、如果浮动元素它上面的元素不浮动则浮动元素无法上移 3、浮动元素也不会超过它前面浮动元素 4、浮动元素不会超出它的父元素
浮动特点二 当浮动元素遇到了文字浮动元素不会覆盖文字 文字会环绕在浮动元素的周围从而有文字环绕图片的效果 这也是设置浮动最开始的想要的效果 浮动特点三
当元素设置浮动以后会完全脱离文档流元素脱离文档流后 元素原来在文档流得特点就都没有了也就是说不再区分块行内行内块
解决高度塌陷的方法
一般情况下我们是不给父元素设置高度的让其内部的子元素自动撑开父元素的高度这样父元素的高度就可以随着子元素高度的变化而变化 ,然而子元素若设置浮动就会脱离文档流也就撑不开父元素的高度 从而导致父元素的高度丢失影响整个页面布局这就叫高度塌陷。
解决方案一、给父元素设置自己的高度 但不推荐使用
高度塌陷解决方案二 页面元素中的隐含属性Block Formatting Context 即块格式化上下文简称BFC 当开启元素的BFC以后元素会变成一个独立的布局区域不会在布局上影响到外面的元素 BFC 理解为一个封闭的大箱子箱子内部的元素不会影响到外部。 开启BFC后元素将会具有如下的特性 1.父元素的垂直外边距不会和子元素重叠 2.开启BFC的元素不会被浮动元素所覆盖 3.开启BFC的元素可以包含浮动的子元素可解决高度塌陷 如何开启元素的BFC 1.设置元素浮动不推荐 - 使用这种方式开启虽然可以撑开父元素但是会导致父元素的宽度丢失 而且使用这种方式也会导致下边的元素上移不能解决问题 2.设置元素为inline-block不推荐 - 可以解决问题但是会导致宽度丢失不推荐使用这种方式 3.将元素的overflow设置为一个非visible的值 4.设置元素绝对定位(暂时没学习) 元素也会脱离文档流虽然可以撑开父元素但是会导致父元素的宽度丢失 而且使用这种方式也会导致下边的元素上移不能解决问题 推荐方式将overflow设置为hidden是副作用最小的开启BFC的方式。 解决高度塌陷方案三 可以在浮动元素下面添加一个空白的块元素由于这个块元素没有浮动还在文档流中 可以给这个块元素设置清除浮动让其撑开父元素的高度 缺点是页面多了一个空白的结构 解决高度塌陷方案四 可以通过after伪类向元素的最后添加一个空白的块元素然后对其清除浮动 这样做和添加一个div的原理一样可以达到一个相同的效果 而且不会在页面中添加多余的div这是我们最推荐使用的方式几乎没有副作用
完善 /* 解决父子外边距重叠解决高度塌陷 */.clearfix::before,.clearfix::after {content: ;display: table;clear: both;}
清除浮动
clear可以用来清除其他浮动元素对当前元素的影响 可选值 none默认值不清除浮动 left清除左侧浮动元素对当前元素的影响 right清除右侧浮动元素对当前元素的影响 both清除两侧浮动元素对当前元素的影响,清除对他影响最大的那个元素的浮动 十、定位
1、开启定位 position样式设置定位 可选值 static 默认值不开启定位 relative 开启相对定位 absolute 开启绝对定位 fixed 开启固定定位 sticky 开启粘滞定位 2、开启定位后元素具有特点 position: relative; 开启相对定位 1、元素位置不发生变化不会脱离文档流 2、开启定位后元素需要配合偏移量去改变元素的位置 3、相对定位原点是其原来在文档流中的位置 4、开启相对定位后元素的层级变高了 开启绝对定位 position: absolute; 1、元素会脱离文档流也就是不会区分块元素行内元素行内块元素 2、元素的位置没有发生改变需要配合偏移量使用 3、绝对定位的原点是参照其包含块来定位的 一般情况会给其父元素设置相对定位叫“父相子绝”但根据项目需要 4、开启绝对定位元素的层级也会提高 包含块 1、没有定位的时候包含块就是其父元素 2、有定位的时候包含块就是离它最近的开启定位的祖先元素 如果其祖先元素都没有开启定位那包含块就是根元素html 开启固定 position: fixed; 1、开启固定定位会使元素脱离文档流就不会区分块元素行内元素行内块元素 2、开启固定定位元素不会随着滚动条的滚动而滚动 3、也是配合偏移量移动元素元素的原点是浏览器的视口html根标签 4、元素的层级也会提高 5、常用的场景 顶部导航侧边导航广告··· 开启粘滞定位 position: sticky; 1、元素不会脱离文档流 2、元素的位置没有发生改变也是配合偏移量使用 一般情况是配合top使用, 元素在没有到top值的时候元素是随着滚动条的滚动而滚动 当到达设置的top值后元素就固定了不会随着滚动条滚动而滚动 3、粘滞原点也是参考浏览视口 4、层级也会提高
