专业做动漫的网站,网站没有织梦后台,辽宁城乡建设集团网站,网站被做暗链报告1. 选择器拓展
在 CSS 中#xff0c;可以根据选择器的类型把选择器分为基础选择器和复合选择器#xff0c;复合选择器是建立在基础选择器之上#xff0c;对基本选择器进行组合形成的。 复合选择器是由两个或多个基础选择器#xff0c;通过不同的方式组合而成的#xf…1. 选择器拓展
在 CSS 中可以根据选择器的类型把选择器分为基础选择器和复合选择器复合选择器是建立在基础选择器之上对基本选择器进行组合形成的。 复合选择器是由两个或多个基础选择器通过不同的方式组合而成的可以更准确、更高效的选择目标元素标签 常用的复合选择器包括后代选择器、子选择器、并集选择器、伪类选择器等等
1.1 后代选择器
定义
后代选择器又称为包含选择器可以选择父元素里面子元素。其写法就是把外层标签写在前面内层标签写在后面中间用空格分隔。当标签发生嵌套时内层标签就成为外层标签的后代。
语法
# 以下语法表示选择元素 1 里面的所有元素 2 (后代元素)元素1 元素2 {样式声明
}# 举例: 选择 ul 里面所有的 li 标签元素
ul li {样式声明
}
语法说明 元素1 和 元素2 中间用空格隔开 元素1 是父级元素2 是子级最终选择的是元素2 元素2 可以是儿子也可以是孙子等只要是元素1 的后代即可 元素1 和 元素2 可以是任意基础选择器
1.2 子选择器
定义
子元素选择器子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
语法
# 下面语法表示选择元素1 里面的所有直接后代(子元素) 元素2
元素1 元素2 {样式声明
}# 举例: 选择div里面最近一级 p 标签元素
div p {样式声明
}
语法说明 元素1 和 元素2 中间用 大于号 隔开 元素1 是父级元素2 是子级最终选择的是元素2 元素2 必须是亲儿子其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器
1.3 并集选择器
定义
并集选择器可以选择多组标签, 同时为他们定义相同的样式通常用于集体声明。并集选择器是各选择器通过英文逗号,连接而成任何形式的选择器都可以作为并集选择器的一部分。
语法
# 下面语法表示选择 元素1 和 元素2
元素1, 元素2 {样式声明
}
# 举例选择 ul 和 div 标签元素
ul, div {样式声明
}
语法说明 元素1 和 元素2 中间用逗号隔开 逗号可以理解为和的意思 并集选择器通常用于集体声明
1.4 伪类选择器 anchor伪类专用于控制链接的显示效果
:linka:link选择所有未被访问的链接。:visiteda:visited选择所有已被访问的链接。:activea:active选择活动链接。:hovera:hover选择鼠标指针位于其上的链接。
stylea:link{color: red;}a:visited{color: coral;}a:hover{color: blue;}a:active{color: rebeccapurple;}/style:focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素
焦点就是光标一般情况 input 类表单元素才能获取styleinput: focus {background-color: yellow;}
/style before after伪类
before/after伪类相当于在元素内部插入两个额外的标签其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上可以简化HTML代码提高可读性和可维护性。并且在下节课的浮动清除部分也有非常重要的应用
:first-childp:first-child选择属于父元素的第一个子元素的每个 p 元素。:last-childp:last-child选择属于其父元素最后一个子元素每个 p 元素。:beforep:before在每个 p 元素的内容之前插入内容。:afterp:after在每个 p 元素的内容之后插入内容。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1 p:first-child{color: red;}/* 设置div中最后一个div元素字体颜色为蓝色如果最后一个元素不是div则设置失效*/.c1 div:last-child{color: blue;}p#i1:after{content:hello;color: pink;display: block;}/* css3规范建议写法双冒号 */.c1::before{content: 枫Sir;font-size: 18px;color: brown;}/style/head
bodydiv classc1pitem1/ppitem1/pdivitem1/div!-- pitem1/p --
/divp idi1p标签/p/body
/html 1.5 样式继承
CSS的样式表继承指的是特定的CSS属性向下传递到子孙元素。总的来说一个HTML文档就是一个家族然后html元素有两个子元素相当于它的儿子分别是head和body然后body和head各自还会有自己的儿子最终形成了一张以下的家族谱。 在上图中可以看到body的子元素有三个h1、p和ulul也有几个子元素p也有1个子元素那么li和a就都是body的后代元素。有时可能我们在body里面设置了一些属性结果body下面所有的后代元素都可能享受到这就是样式继承。就像一句俗语一样“龙生龙凤生凤老鼠的儿子会打洞”。样式继承可以给我们的网页布局带来很多的便利让我们的代码变得更加简洁但是如果不了解或者使用不当也有可能会给我们带来很多不必要的麻烦。
因此如果了解了哪些样式是会继承到后代元素的那么就可以避免这些问题的发生了。
文本相关属性font-familyfont-sizeletter-spacingline-heightfont-stylefont-varianttext-aligntext-indentfont-weightfonttext-transformword-spacingcolordirection列表相关属性list-style-imagelist-style-positionlist-style-typelist-style表格和其他相关属性border-collapseborder-spacingcaption-sideempty-cellscursor
1.6 选择器优先级 继承
继承是CSS的一个主要特征它是依赖于祖先-后代的关系的。继承是一种机制它允许样式不仅可以应用于某个特定的元素还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
body{color:red;} phelloyuan/p
这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的是比普通元素的权重还要低的0。
p{color:green}
发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见任何显示申明的规则都可以覆盖其继承样式。 此外继承是CSS重要的一部分我们甚至不用去考虑它为什么能够这样但CSS继承也是有限制的。有一些属性不能被继承如border, margin, padding, background等。 优先级 所谓CSS优先级即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。 /*
!important 行内样式ID选择器 类选择器 标签 通配符 继承 浏览器默认属性1 内联样式表的权值最高 style 10002 统计选择符中的ID属性个数。 #id 1003 统计选择符中的CLASS属性个数。 .class 104 统计选择符中的HTML标签名个数。 标签名 1按这些规则将数字符串逐位相加就得到最终的权重然后在比较取舍时按照从左到右的顺序逐位比较。
*/
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{color: red;}#i1{color: coral;}div{color: greenyellow;}/*.c2 .c3 .c4 span{*//* color: orange;*//*}*/.c2 .c4 span{color: blue;}.c2 .c3 .c5{color: rebeccapurple;}.c2 .c4 .c5{color: darkcyan;}/style/head
bodydiv classc1 idi1item1/divdiv classc2div classc3div classc4span classc5item2/span/div/div
/div/body
/html 1、有!important声明的规则高于一切。 2、如果!important声明冲突则比较优先权。 3、如果优先权一样则按照在源码中出现的顺序决定后来者居上。 4、由继承而得到的样式没有specificity的计算它低于一切其它规则(比如全局选择符*定义的规则)。 5、用数字表示只是说明思想一万个class也不如一个id权值高 2. css的显示模式
定义
元素显示模式就是元素标签以什么方式进行显示比如div自己占一行比如一行可以放多个span。
作用
网页的标签非常多在不同地方会用到不同类型的标签了解他们的特点可以更好的布局我们的网页。 2.1 块元素
常见的块元素h1~h6、p、div、ul、ol、li
div 标签是最典型的块元素。
块级元素的特点 比较霸道自己独占一行。 高度宽度、外边距以及内边距都可以控制。 宽度默认是容器父级宽度的100%。 是一个容器及盒子里面可以放行内或者块级元素。
注意
文字类的元素内不能放块级元素
p 标签主要用于存放文字因此 p 里面不能放块级元素特别是不能放div
同理 h1~h6等都是文字类块级标签里面也不能放其他块级元素2.2 行内元素
常见的行内元素 a、strong、b、em、i、del、s、ins、u、span span 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点 相邻行内元素在一行上一行可以显示多个。 高、宽直接设置是无效的。 默认宽度就是它本身内容的宽度。 行内元素只能容纳文本或其他行内元素。
注意 链接里面不能再放链接 特殊情况链接 a 里面可以放块级元素但是给 a 转换一下块级模式最安全 2.3 行内块元素
常见的行内块标签 img /、input /、td 它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点 和相邻行内元素行内块在一行上但是他们之间会有空白缝隙。 一行可以显示多个行内元素特点。 默认宽度就是它本身内容的宽度行内元素特点。 高度行高、外边距以及内边距都可以控制块级元素特点。
2.4 显示模式总结 学习元素显示模式的主要目的就是分清它们各自的特点当我们网页布局的时候在合适的地方用合适的标签元素。
2.5 显示模式转换
简单理解:
一个模式的元素需要另外一种模式的特性 比如想要增加链接 a 的触发范围。
转换方式 转换为块元素display:block; 转换为行内元素display:inline; 转换为行内块display: inline-block;
3. 盒子模型
3.1 网页布局
网页布局的核心本质 就是利用 CSS 摆盒子。
网页布局过程 先准备好相关的网页元素网页元素基本都是盒子 Box 。 利用 CSS 设置好盒子样式然后摆放到相应位置。 往盒子里面装内容
3.2 盒子模型组成
盒子模型把 HTML 页面中的布局元素看作是一个矩形的盒子也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子封装周围的 HTML 元素它包括边框、外边距、内边距、和 实际内容
3.3 盒子边框
border可以设置元素的边框。边框有三部分组成边框宽度(粗细) 边框样式 边框颜色
border : border-width || border-style || border-color; 边框样式 border-style 可以设置如下值 none没有边框即忽略所有边框的宽度默认值 solid边框为单实线(最为常用的) dashed边框为虚线 dotted边框为点线
边框简写 border: 1px solid red; 边框分开写法 border-top: 1px solid red; /* 只设定上边框 其余同理 */ border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。 border-collapse:collapse; collapse 单词是合并的意思
border-collapse: collapse; 表示相邻边框合并在一起 边框会额外增加盒子的实际大小。因此我们有两种方案解决 测量盒子大小的时候,不量边框。 如果测量的时候包含了边框,则需要 width/height 减去边框宽度 3.4 盒子内边距
padding 属性用于设置内边距即边框与内容之间的距离
合写属性 分写属性 1、当我们给盒子指定 padding 值之后发生了 2 件事情 内容和边框有了距离添加了内边距。 padding影响了盒子实际大小。 2、内边距对盒子大小的影响 如果盒子已经有了宽度和高度此时再指定内边框会撑大盒子。 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。 3、解决方案
如果保证盒子跟效果图大小保持一致则让 width/height 减去多出来的内边距大小即可
3.5 盒子外边距 margin 属性用于设置外边距即控制盒子和盒子之间的距离。 外边距典型应用
外边距可以让块级盒子水平居中的两个条件 盒子必须指定了宽度width。 盒子左右的外边距都设置为 auto 。
常见的写法以下三种都可以 margin-left: auto; margin-right: auto; margin: auto; margin: 0 auto; 注意以上方法是让块级元素水平居中行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
外边距合并
使用 margin 定义块元素的垂直外边距时可能会出现外边距的合并。
主要有两种情况:
1、相邻块元素垂直外边距的合并
当上下相邻的两个块元素兄弟关系相遇时如果上面的元素有下外边距 margin-bottom下面的元素有上外边距 margin-top 则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。 解决方案 尽量只给一个盒子添加 margin 值。
2、嵌套块元素垂直外边距的塌陷
对于两个嵌套关系父子关系的块元素父元素有上外边距同时子元素也有上外边距此时父元素会塌陷较大的外边距值。 清除内外边距
网页元素很多都带有默认的内外边距而且不同浏览器默认的也不一致。因此我们在布局前首先要清除下网页元素的内外边距。 * {padding:0; /* 清除内边距 */margin:0; /* 清除外边距 */} 注意行内元素为了照顾兼容性尽量只设置左右内外边距不要设置上下内外边距。但是转换为块级和行内块元素就可以了
4. 元素的显示与隐藏 目的本质 让一个元素在页面中消失或者显示出来 场景 类似网站广告当我们点击关闭就不见了但是我们重新刷新页面会重新出现
4.1 display显示 display 设置或检索对象是否及如何显示 重点 display: none 隐藏对象 displayblock 除了转换为块级元素之外同时还有显示元素的意思。 特点 display 隐藏元素后不再占有原来的位置。 后面应用及其广泛搭配 JS 可以做很多的网页特效。实际开发场景 配合后面js做特效比如下拉菜单原先没有鼠标经过显示下拉菜单 应用极为广泛 4.2 visibility可见性 visibility 属性用于指定一个元素应可见还是隐藏 了解即可 visibilityvisible ; 元素可视 visibilityhidden; 元素隐藏 特点visibility 隐藏元素后继续占有原来的位置。停职留薪 如果隐藏元素想要原来位置 就用 visibilityhidden 如果隐藏元素不想要原来位置 就用 displaynone (用处更多 重点 4.3 overflow溢出 overflow 属性指定了如果内容溢出一个元素的框超过其指定高度及宽度 时会发生什么 重点
属性值描述visible不剪切内容也不添加滚动条hidden不显示超过对象尺寸的内容超出的部分隐藏掉scroll不管超出内容否总是显示滚动条auto超出自动显示滚动条不超出不显示滚动条 一般情况下我们都不想让溢出的内容显示出来因为溢出的部分会影响布局。 但是如果有定位的盒子 请慎用overflow:hidden 因为它会隐藏多余的部分。 实际开发场景 清除浮动 隐藏超出内容隐藏掉, 不允许内容超过父盒子。
4.4 显示与隐藏总结
属性区别用途display 显示 重点隐藏对象不保留位置配合后面js做特效比如下拉菜单原先没有鼠标经过显示下拉菜单 应用极为广泛visibility 可见性 了解隐藏对象保留位置使用较少overflow 溢出重点只是隐藏超出大小的部分1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围
