南京凯盛建设集团有限公司网站,pc 网站建设,个人买域名有什么用,做商城网站要多少钱1 前情回顾
关于选择器进阶、背景色、元素显示模式和css特性的前半部分集中在下面的笔记中#xff1a; css进阶知识点速览
2 CSS特性
2.1 优先级
特性#xff1a;不同选择器具有不同的优先级#xff0c;优先级高的选择器样式会覆盖优先级低选择器样式 优先级公式#x…1 前情回顾
关于选择器进阶、背景色、元素显示模式和css特性的前半部分集中在下面的笔记中 css进阶知识点速览
2 CSS特性
2.1 优先级
特性不同选择器具有不同的优先级优先级高的选择器样式会覆盖优先级低选择器样式 优先级公式 继承通配符选择器标签选择器类选择器id选择器行内样式!important 注意点 1 !important写在属性值后面分号前面 2 !important不能提升继承的优先级继承的优先级最低 3 实际开放中不建议使用!important
2.2 权重叠加计算
场景如果是符合选择器此时需要通过权重叠加计算方法判断最终哪个选择器 权重叠加计算公式 复合选择器中 从左到右分别是第一级第二级第三级第四级 (行内样式个数id选择器个数类选择器个数标签选择器个数) 分别比较数量先比较第一级数量再比之后的第一集数量能比出结果后面不需要再比。 这些选择器的关系是相对于要装饰内容而言的。
/*(0,1,0,1)*/
/*#one id选择器*/
div #one{
color: orange;
}
/*(0,1,2,0)*/
.father .son{
color: skyblue;
}
/*(0,0,1,1)*/
.father p{
color: purple
}
/*(0,0,0,2)*/
div p{
color: pink
}div div{
color: skyblue;
}
div{
color: red;
}divdivdiv文本/div/div
/div上面两个css选中文本但并不是继承。最终因为div div{color: skyblue;}标签选择器数目多因此文本为skyblue色。
2.3 谷歌浏览器调试
对出错部分右键-检查-查看
.father .son .sun {
color: skyblue;
}
/*多个类选择器中间以空格隔开也表示交集选择器*/3 PxCook
3.1下载与安装
官网下载链接 下载后一直下一步就可完成安装。
3.2 基本使用
1将图片拖入后双击 2对于png图使用设计模式对于psd的分层图用开发模式 3设计模式主要工具 最上面的是尺子用来量长度最下面的是吸管用来获取颜色。 抓手工具如果图片放的过大需要移动到某一区域就用抓手。
4开发模式 点击选中可知一切信息
4盒子模型
4.1 盒子模型的介绍
1盒子的概念 1页面中的每一个标签都可以看做是一个“盒子”通过盒子的视角更方便地进行布局 2浏览器在渲染显示网页时会将网页中的元素看做是一个个的矩形区域我们也形象的称之为盒子 2盒子模型 css中规定每个盒子分别由内容区域、内边距区域、边框区域、外边距区域构成这就是盒子模型。 最简单的示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{width: 300px;height: 300px;background-color: pink;/*边框线*/border: 1px solid black;/*内边距出现在内容和盒子之间*/padding: 20px;/*外边距两个盒子之间*/margin: 50px;}/style
/head
bodydivcontent/divdivcontent2/div
/body
/html在浏览器里点击检查/F12可以查看到下图方便调试。
4.2 内容区域
作用利用width和height属性默认设置是盒子内容区域的大小 属性width/height 常见取值数字px
4.3 边框
属性名border 复合属性取值之间用空格隔开 boder: 10px solid red; 10px是指粗细red是指线条的颜色solid是指线条的种类直线虚线等这些参数没有顺序之分。 solid:实线线段 dashed:虚线线段 dotted:点线。 单方向设置 场景只给盒子的某个方向单独设置边框 属性名border-方位名词比如border-left 属性值连写的取值 单个属性 作用给设置边框粗细、边框样式、边框颜色效果 单个属性
作用属性值边框粗细border-width数字px边框样式border-style实线solid、虚线dashed、点线dotted边框颜色border-color颜色取值
4.4 盒子实际大小初级计算公式
只考虑内容和边框线 需求盒子尺寸400400背景绿色边框10px实线黑色 盒子尺寸width/height 边框线粗细2
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{height: 40px;border-top: 3px #ff8500 solid;border-bottom: 1px #edeef0 solid;}.box a{width: 80px;height: 40px;display: inline-block;text-align: center;line-height: 40px;font-size: 12px;color: #4c4c4c;text-decoration: none;}.box a:hover{background-color: #edeef0;color: #ff8500;}/style
/head
bodydiv classboxa href新浪导航/aa href新浪导航/aa href新浪导航/aa href新浪导航/a/div
/body
/html4.5内边距padding
padding 50px; 上面代码添加了4个方向的内边距。 padding 10px 80px; 两值的话第一个表上下第二个表左右。
4.6 盒子实际大小的终极计算公式
盒子尺寸width/height 边框线粗细2内边距2 给盒子设置border或padding盒子会被撑大如果不想盒子被撑大该怎么处理 操作给盒子设置属性box-sizing:border-box; 优点浏览器会自动计算多余大小自动在内容中减去
4.7 外边距
margin: 50px;
4.7.1 清除默认内外边距
比如p、h系列、ul标签都要默认内外边距
*{
margin:0;
padding: 0;
}4.7.2 版心居中
想让盒子居于网页中间
margin: 0 auto;4.7.3 外边距折叠现象
合并现象 场景垂直布局的块级元素上下的margin会合并 结果最终两者距离为margin的最大值 解决方法只给其中一个盒子设置margin即可
塌陷现象 场景相互嵌套的块级元素子元素的margin-top会作用在父元素上 结果导致父元素一起向下移动 解决办法 1不在子元素用margin只给父元素设置border-top或者padding-top 2子元素设置margin再给父元素设置overflow: hidden 3转成行内块元素子元素里display: inline-block; 4设置浮动
5 浮动
5.1 结构伪类选择器
目标能够使用结构伪类选择器在HTML中定位元素 1作用与优势 (1)作用根据元素在html中的结构关系查找元素 (2)优势减少对html中类的依赖有利于保持代码整洁 (3)场景常用于查找某父级选择器中的子集 2选择器
选择器说明E:first-child{}匹配父元素中第一个子元素并且是E元素E:last-child{}匹配父元素中最后一个子元素并且是E元素E:nth-child(n){}匹配父元素中第n个子元素并且是E元素E:nth-last-child(n){}匹配父元素中最后n个子元素并且是E元素
案例1
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleli:first-child{background-color: aquamarine;}/style
/head
bodyullihello/lilihello/lilihello/lilihello/lilihello/lilihello/lilihello/li/ul
/body结构伪类选择器中n的注意点 1n为0,1,2,3,4,5,6,… 2通过n可以组成常见公式
功能公式偶数2n, even奇数2n1,2n-1,odd找到前5个-n5找到从第5个往后n5
5.2伪元素
伪元素一般页面中的非主体内容可以使用伪元素 区别 (1)元素html设置的标签 (2)伪元素由css模拟出的标签效果 种类
伪元素作用::before在父元素内容的最前添加一个伪元素::after在父元素内容的最后添加一个伪元素
注意点 (1)必须设置content属性才能生效 (2)伪元素默认是行内元素 style.father{width: 200px;height: 200px;background-color: aquamarine;}.father::before{content: note;}.father::after{content: world;}/style
/head
bodydiv classfatherhello/div
/body5.3标准流
标准流又称文档流是浏览器在渲染显示网页内容时默认采用的一套排版规则规定了应该以合资方式排列元素。 常见的标准流排版规则 1块级元素从上到下垂直布局独占一行 2行内元素或行内块元素从左到右水平布局空间不够自动拆行
5.4 浮动
注意浏览器解析行内块或者是行内标签的时候如果标签换行书写会产生一个空格的距离
5.4.1浮动的作用
早期的作用图文环绕 img{float:left;} 现在的作用网页布局 让块在一行无间隙排列
.one{
background-color: pink;
float: left;
}
.two{
background-color: green;
float: left;
}两个块靠左紧贴一起。
5.4.2特点
1浮点元素会脱离标准流在标准流中不占位置 相当于从地面飘到了空中 2浮动元素比标准流高半个级别可以覆盖标准流中的元素 3浮动找浮动下一个浮动元素会在上一个浮动元素后面左右浮动 4浮动元素有特殊的显示效果“ 一行可以显示多个 可以设置宽高
类似下图的设计需要注意橙色和蓝色居中且位于一行我们知道浮动元素的不能利用margin居中的因此橙色和蓝色盒子外必然还有第三个盒子该盒子的标签相对于橙色和蓝色的标签是父关系它被设置了居中。
5.4.3css书写顺序
1浮动/display 2盒子模型margin border padding 3文字样式 案例2 目标样式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0;padding: 0;}.father{width: 1226px;height: 614px;margin: 0 auto;}.father .son1{float: left;width: 234px;height: 614px;background-color: #800080;}.father .son2{float: left;width: 978px;height: 614px;background-color: green;margin-left: 14px;}.father .son2 .grandson{float: left;margin-bottom: 14px;margin-right: 14px;width: 234px;height: 300px;background-color: #87ceeb}.father .son2 .grandson.grandson:nth-child(4n){margin-right: 0;}.father .son2 .grandson.grandson:nth-child(n5){margin-bottom: 0;}/style
/head
bodydiv classfatherdiv classson1/divdiv classson2div classgrandson/divdiv classgrandson/divdiv classgrandson/divdiv classgrandson/divdiv classgrandson/divdiv classgrandson/divdiv classgrandson/divdiv classgrandson/div/div/div
/body
/html案例3 目标样式 技巧:网页导航的设计时请用li标签嵌套a标签。 然而用li标签的话容易出现下面的效果 对此我们可以通过list-style: none;消除。 全部代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0;padding: 0;}.nav{margin: 0 auto;width: 640px;height: 50px;background-color: #ffc0cb;}.nav ul{list-style: none;}.nav .navson{float: left;}.nav .navson a{display: inline-block;width: 80px;height: 50px;color: white;font-size: 16px;line-height: 50px;text-align: center;text-decoration: none;}.nav .navson:hover{background-color: #008000;}/style
/head
bodydiv classnavulli classnavsona href#新闻/a/lili classnavsona href#新闻/a/lili classnavsona href#新闻/a/lili classnavsona href#新闻/a/lili classnavsona href#新闻/a/lili classnavsona href#新闻/a/lili classnavsona href#新闻/a/lili classnavsona href#新闻/a/li/ul/div
/body
/html5.5清除浮动
含义清除浮动带来的影响 影响如果子元素浮动了此时子元素不能撑开标准流的块级元素 原因 子元素浮动后脱标——不占位置 目的 需要父元素有高度从而不影响其他网页元素的布局 比如 父子级标签子级浮动父级没有高度后面的标准呢盒子会受影响 常见于父级是纯文字高度不定不好设置
