开封公司做网站,信誉好的大连网站建设,南京seo代理,阳江市建设网站超链接 a target页面打开位置 href链接地址内容/atarget:_blank 重新打开一个页面target:_self 当前页面打开
1.页面地址#xff1a; 基础功能#xff0c;用于进入该链接的页面#xff1b; 2.锚点#xff1a; 需要给标签名定义id…超链接 a target页面打开位置 href链接地址内容/atarget:_blank 重新打开一个页面target:_self 当前页面打开
1.页面地址 基础功能用于进入该链接的页面 2.锚点 需要给标签名定义id链接地址为#id名即可在当前页面进行跳转 3.功能性链接 打电话打电话 发邮件 ***
文本元素 - h1-h6:对应一级标题到六级标题字体大小默认情况下从大到小- p段落- q小段引用一般不超过一行- blockqoute:大段引用- abbr引用一般用于英文缩写的全称解释- cite引用参考文献- b加粗突出显示的文本。因加粗一般无法量化不利于排版一般不用- strong重要的文本- i应区别对待的文本斜体- em强调的文本
无语义元素 - div分区块便于排版- span行内元素不换行仅用于给一小段文本添加样式- br空元素用于在页面中换行因换行后间距无法量化不利于排版一般不用- hr空元素用于在页面中加入分割符号一般不用- pre:预格式化元素页面显示代码格式。
实体字符 书写格式实体名称或#实体编号背景在浏览器中有些字符会被特殊处理如,会被浏览器认为是标记符号不会直接显示到页面空白字符会被浏览器折叠成1个空格。空格 nbsp #160 小于符号 lt #60 大于符号 gt #62 并且符号 amp #38© 版权符号 copy; #169;
常见的CSS属性
color:red 颜色
text-align:center 对齐方式
font-size:28px 字 体大小
font-weightbold 文字粗细
background-colorred 背景颜色
CSS选择器
基础选择器
元素类ID锚点可以使用一般不推荐使用预留给JS用通配符选择器 格式* 声明块例子*{color:red;}并集选择器 h1{color:red;}h2{color:red;}h3{color:red;}格式元素或类或ID , 元素或类或ID 声明块例子h1,h2,h3{color:red;}p,.container,#box{background-color:deeppink;} 层次选择器子集选择器 格式父级元素名称 子级元素名称 声明块例子divp{color:red;}后代选择器 格式祖先元素名称 空格 后代元素名称 声明块例子div p{color:red;}兄弟选择器 格式兄弟元素A 兄弟元素B 声明块例子div p{color:red;}注只能选中元素A后面的第一个元素通用选择器 格式兄弟元素A ~ 兄弟元素B 声明块例子div~p{color:red;}注表示可以选择元素A后面任意位置的同级元素 伪类选择器
动态伪类选择器
未访问 格式a : link 声明块例子a:link{color:black;}已访问(访问后 格式a : visited 声明块例子a:visited{color:green;}悬停鼠标停留在链接上时的样式 格式a : hover 声明块例子a:hover{color:deeppink;}点击时 格式a : active 声明块例子a:active{color:deeppink;}焦点框多用于输入框肯链接 格式a : focus 声明块a:focus{color:五光十色}以上伪类书写顺序A方案link,visited,focus,hover,activeB方案visited,link,focus,hover,active注IE7以前是不支持:focus注IE6以前是不支持:hover,active
结构伪类选择器 1.格式元素名称 :nth-child(n) {声明块}例子 h1:nth-child(5){color:gray;}表示选中第5个h1元素颜色为灰色表示选中第5个元素并且满足是h1的情况才会应用样式注n中的n表示元素的位置:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素不论元素的类型。2.格式元素名称 :nth-of-type(n) {声明块}例子 h1:nth-of-type(5){color:gray;}表示选中类别为h1的第5个h1表示先筛选出所有的h1标签然后在结果里选中第5个h1:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。3.格式元素名称 :first-child {声明块}例子 h1:fist-child{color:gray;}表示选中第1个h1元素4.格式元素名称 :last-child {声明块}例子 h1:last-child{color:gray;}表示选中最后1个h1元素5.格式元素名称 :nth-child(odd) {声明块}例子 h1:nth-child(odd){color:gray;}表示选中奇数项6.格式元素名称 :nth-child(even) {声明块}例子 h1:nth-child(even){color:gray;}表示选中偶数项否定伪类选择器 格式元素名称 :not(相应的选择条件) {声明块}例子 h1:not(:nth-child(3)){color:gray;}表示除第3个h1元素都应用样式
伪元素选择器 1.格式元素名称 : before content:加的内容例子h1:before{content: F51;}表示在元素前面加内容2.格式元素名称 : after content:加的内容例子h1:before{content: F51;}表示在元素后面加内容3.格式元素名称 : first-line {声明块}例子p:first-line{color:green}表示选中第一行4.格式元素名称 : first-letter {声明块}例子p:first-letter{color:red}表示选中第一个字母5.格式元素名称 :: selection {声明块}例子p::selection{background-color:green;color:chocolate}表示设置选中内容的背景色和字体色
层叠
层叠机制
当发生声明冲突同一个样式的不同值应用到同一个标签上时浏览器会触发层叠机制。
层叠过程
比较优先级 重要性属性值 important;来源用户开发者浏览器比较特殊性特指值或特指度 每个声明都有一个特殊性specificity 选择器规则适用范围越大特殊性越小。 行内样式ID选择器类选择器元素选择器通配符选择器 a声明是行内样式则为1否则为0b规则中ID选择器的个数c规则中类选择器伪类选择器属性选择器个数d规则中元素选择器伪元素选择器的个数通配符选择器的特殊性为0。a, b, c, d依次比较只要对应位相同进入下一位比较否则停止比较该位上数值大的胜出。选择器分组时并集选择器要分开计算h1,h2,h3{color:red;}h1{color:blue;} 胜出比较源次序 最后出现的声明胜出其他的全部淘汰。该规则的实际应用CSS Reset代码前置 解决兼容性问题a元素的伪类书写顺序。 继承inherit 是指子元素会自动拥有父元素的某些属性 可被继承的属性color,font-size,font-weight,text-align等 基本上文本类的样式都可以被继承。 不可被继承的属性background-color。 继承的场景 该属性是可继承属性该属性在样式表中没有声明。
强制继承 也叫显示继承是指将css属性值设置为inherit。为了继承某些不可继承属性或已声明属性。
盒子模型 每个元素都在页面中形成一个矩形区域CSS称该区域为盒子box
盒模型 单个盒子组成视觉格式化模型 多个盒子的排列相互作用影响布局 实际应用
margin 外边框与其他盒子之间的距离。指盒模型可见部分之外的透明区域空间让我们可以控制页面元素之间的距离帮助将元素定位到页面上的一个特定位置上或者给元素提供呼吸的空间让他与其他元素保持一个安全的距离。
padding 内边距边框和内容之间的可选距离。他会应用到内容和内边距组成的区域。因此内边距常被用于在内容周围创建一个隔离带这样内容就会与背景混在一起。
content 内容的高度和宽度。
overflow 超出内容的展示方式。
1.overflow:hidden 表示超出内容隐藏 2.overflow:auto 表示哪个方向的内容超出该方向出现滚动条 3.overflow:visible 默认值溢出部分显示 4.overflow:scroll 表示垂直和水平方向上都出现滚动条但只有超出的方向滚动条可用。 全屏显示时页面紧张出现横向滚动条。
盒模型padding 类似于箱子和内部物品之间的填充物。padding-top上内边框不可继承默认值为0px其他取值单位em、%。
padding取1,2,3,4,个值分别对应不同的意义。 上右下左对应toprightbottomleft方向。
取1个值时4个方向相同 取2个值时上下相同对应第一个值右左相同对应第二个值 取3个值时第一个值对应上第三个值对应下第二个值对应相同的右左取4个值时分别对应上右下左。
border-radius
取1个值时4个角的弧度半径取2个值时第一个是左上和右下的弧度半径第二个是右上和左下的弧度半径。 设置某一个角的圆角 border-bottom-right-radius:30px(对应x轴半径) 20px对应y轴半径; border的默认颜色是当前标签的字体颜色。 取transparent值 表示透明色。 #盒子模型补充 子盒子 边框盒border-box 背景色默认渲染区域可通过设置background-clip 调节。 填充盒padding-box 严格意义上overflow溢出是指溢出填充盒。 内容盒content-box 默认情况下width和height属性是指内容盒的宽度和高度。 盒子尺寸的计算 box-sizing设置元素的尺寸范围。content-box默认值border-box表示元素的width和height设置区域是边框盒。可以解决页面横向滚动条的问题。 注width100%的基础上加margin设置box-sizing:border-box也无效。 outline外边框用法和border完全一致。不占尺寸显示可辅助布局。
视觉格式化模型visual formatting model css的一种机制规定了页面中多个盒子如何相互影响如何布局。
视口viewport 可视窗口通常指浏览器的可视区域。视口的尺寸仅受到浏览器可视窗口大小的影响和内容无关。当内容超出视口时浏览器会出现滚动条。
包含块contianing block 每个元素都有一个包含块他是指元素在页面中的摆放区域通常情况下元素的包含块是他父元素的内容盒。html根元素的包含块是初始化包含块initial containing block
定位体系
视觉格式化模型的基础一共有3种
常规流 normal flow 又叫文档流或常规文档流 浮动float默认值为none绝对定位 absolute positioned默认值为static 每一个元素都属于其中一个定位体系。 先判断绝对定位如果position属性值为absolute或fixed则为绝对定位否则进入浮动判断如果float值为left或right则为浮动定位否则为常规流。 盒模型和定位体系 盒模型 盒子尺寸 定位体系 盒子位置 定位体系会影响盒模型。width和height值为auto时margin px, em, %, auto可为负值border px, empadding px, em, %width px, em, %, autoheight px, em, %, auto
px和em是固定单位固定值或者绝对值 1em是指当前标签font-size的一倍。注当前标签没有font-size时注意继承关系。
%和auto是相对单位相对值。 常规流中width取值为%是指相对父级元素包含块width的百分比。marginpaddingwidth的百分比是包含块宽度的百分比。
三角形的绘制方法
将一个块级元素的border设置合适宽度width和height设置为0.只设置一边的颜色另外三边颜色设置为透明即可。通过调整每个边的border值调整三角形形状。 将width或者height设置合适的值可绘制梯形。
块级元素水平方向居中方法
该元素margin-left-50% 包含块padding-left50%
盒模型padding 类似于箱子和内部物品之间的填充物。padding-top上内边框不可继承默认值为0px其他取值单位em、%。
padding取1,2,3,4,个值分别对应不同的意义。 上右下左对应toprightbottomleft方向。
取1个值时4个方向相同 取2个值时上下相同对应第一个值右左相同对应第二个值 取3个值时第一个值对应上第三个值对应下第二个值对应相同的右左取4个值时分别对应上右下左。
border-radius
取1个值时4个角的弧度半径取2个值时第一个是左上和右下的弧度半径第二个是右上和左下的弧度半径。 设置某一个角的圆角 border-bottom-right-radius:30px(对应x轴半径) 20px对应y轴半径; border的默认颜色是当前标签的字体颜色。 取transparent值 表示透明色。 #盒子模型补充 子盒子 边框盒border-box 背景色默认渲染区域可通过设置background-clip 调节。 填充盒padding-box 严格意义上overflow溢出是指溢出填充盒。 内容盒content-box 默认情况下width和height属性是指内容盒的宽度和高度。 盒子尺寸的计算 box-sizing设置元素的尺寸范围。content-box默认值border-box表示元素的width和height设置区域是边框盒。可以解决页面横向滚动条的问题。 注width100%的基础上加margin设置box-sizing:border-box也无效。 outline外边框用法和border完全一致。不占尺寸显示可辅助布局。
视觉格式化模型visual formatting model css的一种机制规定了页面中多个盒子如何相互影响如何布局。
视口viewport 可视窗口通常指浏览器的可视区域。视口的尺寸仅受到浏览器可视窗口大小的影响和内容无关。当内容超出视口时浏览器会出现滚动条。
包含块contianing block 每个元素都有一个包含块他是指元素在页面中的摆放区域通常情况下元素的包含块是他父元素的内容盒。html根元素的包含块是初始化包含块initial containing block
定位体系
视觉格式化模型的基础一共有3种
常规流 normal flow 又叫文档流或常规文档流 浮动float默认值为none绝对定位 absolute positioned默认值为static 每一个元素都属于其中一个定位体系。 先判断绝对定位如果position属性值为absolute或fixed则为绝对定位否则进入浮动判断如果float值为left或right则为浮动定位否则为常规流。 盒模型和定位体系 盒模型 盒子尺寸 定位体系 盒子位置 定位体系会影响盒模型。width和height值为auto时margin px, em, %, auto可为负值border px, empadding px, em, %width px, em, %, autoheight px, em, %, auto
px和em是固定单位固定值或者绝对值 1em是指当前标签font-size的一倍。注当前标签没有font-size时注意继承关系。
%和auto是相对单位相对值。 常规流中width取值为%是指相对父级元素包含块width的百分比。marginpaddingwidth的百分比是包含块宽度的百分比。
三角形的绘制方法
将一个块级元素的border设置合适宽度width和height设置为0.只设置一边的颜色另外三边颜色设置为透明即可。通过调整每个边的border值调整三角形形状。 将width或者height设置合适的值可绘制梯形。
块级元素水平方向居中方法
该元素margin-left-50% 包含块padding-left50%
盒模型padding 类似于箱子和内部物品之间的填充物。padding-top上内边框不可继承默认值为0px其他取值单位em、%。
padding取1,2,3,4,个值分别对应不同的意义。 上右下左对应toprightbottomleft方向。
取1个值时4个方向相同 取2个值时上下相同对应第一个值右左相同对应第二个值 取3个值时第一个值对应上第三个值对应下第二个值对应相同的右左取4个值时分别对应上右下左。
border-radius
取1个值时4个角的弧度半径取2个值时第一个是左上和右下的弧度半径第二个是右上和左下的弧度半径。 设置某一个角的圆角 border-bottom-right-radius:30px(对应x轴半径) 20px对应y轴半径; border的默认颜色是当前标签的字体颜色。 取transparent值 表示透明色。 #盒子模型补充 子盒子 边框盒border-box 背景色默认渲染区域可通过设置background-clip 调节。 填充盒padding-box 严格意义上overflow溢出是指溢出填充盒。 内容盒content-box 默认情况下width和height属性是指内容盒的宽度和高度。 盒子尺寸的计算 box-sizing设置元素的尺寸范围。content-box默认值border-box表示元素的width和height设置区域是边框盒。可以解决页面横向滚动条的问题。 注width100%的基础上加margin设置box-sizing:border-box也无效。 outline外边框用法和border完全一致。不占尺寸显示可辅助布局。
视觉格式化模型visual formatting model css的一种机制规定了页面中多个盒子如何相互影响如何布局。
视口viewport 可视窗口通常指浏览器的可视区域。视口的尺寸仅受到浏览器可视窗口大小的影响和内容无关。当内容超出视口时浏览器会出现滚动条。
包含块contianing block 每个元素都有一个包含块他是指元素在页面中的摆放区域通常情况下元素的包含块是他父元素的内容盒。html根元素的包含块是初始化包含块initial containing block
定位体系
视觉格式化模型的基础一共有3种
常规流 normal flow 又叫文档流或常规文档流 浮动float默认值为none绝对定位 absolute positioned默认值为static 每一个元素都属于其中一个定位体系。 先判断绝对定位如果position属性值为absolute或fixed则为绝对定位否则进入浮动判断如果float值为left或right则为浮动定位否则为常规流。 盒模型和定位体系 盒模型 盒子尺寸 定位体系 盒子位置 定位体系会影响盒模型。width和height值为auto时margin px, em, %, auto可为负值border px, empadding px, em, %width px, em, %, autoheight px, em, %, auto
px和em是固定单位固定值或者绝对值 1em是指当前标签font-size的一倍。注当前标签没有font-size时注意继承关系。
%和auto是相对单位相对值。 常规流中width取值为%是指相对父级元素包含块width的百分比。marginpaddingwidth的百分比是包含块宽度的百分比。
三角形的绘制方法
将一个块级元素的border设置合适宽度width和height设置为0.只设置一边的颜色另外三边颜色设置为透明即可。通过调整每个边的border值调整三角形形状。 将width或者height设置合适的值可绘制梯形。
块级元素水平方向居中方法
该元素margin-left-50% 包含块padding-left50%
盒模型padding 类似于箱子和内部物品之间的填充物。padding-top上内边框不可继承默认值为0px其他取值单位em、%。
padding取1,2,3,4,个值分别对应不同的意义。 上右下左对应toprightbottomleft方向。
取1个值时4个方向相同 取2个值时上下相同对应第一个值右左相同对应第二个值 取3个值时第一个值对应上第三个值对应下第二个值对应相同的右左取4个值时分别对应上右下左。
border-radius
取1个值时4个角的弧度半径取2个值时第一个是左上和右下的弧度半径第二个是右上和左下的弧度半径。 设置某一个角的圆角 border-bottom-right-radius:30px(对应x轴半径) 20px对应y轴半径; border的默认颜色是当前标签的字体颜色。 取transparent值 表示透明色。 #盒子模型补充 子盒子 边框盒border-box 背景色默认渲染区域可通过设置background-clip 调节。 填充盒padding-box 严格意义上overflow溢出是指溢出填充盒。 内容盒content-box 默认情况下width和height属性是指内容盒的宽度和高度。 盒子尺寸的计算 box-sizing设置元素的尺寸范围。content-box默认值border-box表示元素的width和height设置区域是边框盒。可以解决页面横向滚动条的问题。 注width100%的基础上加margin设置box-sizing:border-box也无效。 outline外边框用法和border完全一致。不占尺寸显示可辅助布局。
视觉格式化模型visual formatting model css的一种机制规定了页面中多个盒子如何相互影响如何布局。
视口viewport 可视窗口通常指浏览器的可视区域。视口的尺寸仅受到浏览器可视窗口大小的影响和内容无关。当内容超出视口时浏览器会出现滚动条。
包含块contianing block 每个元素都有一个包含块他是指元素在页面中的摆放区域通常情况下元素的包含块是他父元素的内容盒。html根元素的包含块是初始化包含块initial containing block
定位体系
视觉格式化模型的基础一共有3种
常规流 normal flow 又叫文档流或常规文档流 浮动float默认值为none绝对定位 absolute positioned默认值为static 每一个元素都属于其中一个定位体系。 先判断绝对定位如果position属性值为absolute或fixed则为绝对定位否则进入浮动判断如果float值为left或right则为浮动定位否则为常规流。 盒模型和定位体系 盒模型 盒子尺寸 定位体系 盒子位置 定位体系会影响盒模型。width和height值为auto时margin px, em, %, auto可为负值border px, empadding px, em, %width px, em, %, autoheight px, em, %, auto
px和em是固定单位固定值或者绝对值 1em是指当前标签font-size的一倍。注当前标签没有font-size时注意继承关系。
%和auto是相对单位相对值。 常规流中width取值为%是指相对父级元素包含块width的百分比。marginpaddingwidth的百分比是包含块宽度的百分比。
三角形的绘制方法
将一个块级元素的border设置合适宽度width和height设置为0.只设置一边的颜色另外三边颜色设置为透明即可。通过调整每个边的border值调整三角形形状。 将width或者height设置合适的值可绘制梯形。
块级元素水平方向居中方法
该元素margin-left-50% 包含块padding-left50%
块盒在常规流下的位置 盒子在包含块的content垂直方向上依次摆放依次摆放按照HTML元素的书写顺序从上到下摆放盒子在包含块中的尺寸是整个盒子的尺寸。
垂直方向上
若两个盒子外边距相邻margin则进行合并折叠。水平方向上不会。 外边距相邻两个元素的外边距之间没有paddingbordercontent。
兄弟元素合并margin都为正值取最大都为负值取最小一正一负相加。
快盒常规流盒模型的auto值
水平方向
常规流盒子水平方向上的尺寸必须等于包含块的尺寸。如果该盒子的width margin小于包含块的width不足部分有该元素的margin补齐。 margin-leftauto margin-rightauto 居中margin-left定值 margin-rightauto 右边补齐margin-left定值 margin-right定值 仍不足同margin-rightauto 的情况。
想要一个块级元素居中的方法 给固定宽度左右margin值设置为auto。
垂直方向
margin-top || margin-bottomauto 0。 heightauto 适应内容的高度。
浮动
当元素的float属性取值为left和right时元素属于浮动定位。 float不可继承 取值none默认取值 不浮动 left 左浮动 right 右浮动 浮动时 marginauto 0 widthauto 适应内容宽度 heightauto 适应内容高度。
浮动规则
左浮动的盒子向左、向上排列 右浮动的盒子向右、向上排列浮动盒子的顶边不得高于上一个盒子的顶边若剩余的空间无法放下浮动的盒子则该盒子向下移动知道具备足够的空间容纳盒子然后再向左或向右移动。
当常规流遇上浮动 常规流盒子和浮动盒子混合摆放 浮动盒子在摆放时避开常规流盒子 常规流盒子在摆放时无视浮动盒子。
本文转载于:猿2048➤https://www.mk2048.com/blog/blog.php?idjajhbbbtitleHTML5和css3
