3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素

CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中静态定位的元素不会受到top,bottom,left,right影响 Fixed定位: 元素的位置相对于浏览器窗口固定即便串口滚动元素也不滚动注: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持 Fixed定位使元素的位置与文档流无关,因此不占据空间 Fixed定位的元素和其他元素重叠. p.pos_fixed { positi…

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单

水平&垂直对齐元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本居中对齐 .center { text-align: center; border: 3px solid green; } 图片居中对齐左右对齐——position定位左右对齐——float 垂直居中对齐组合选择符后代选择器(以空格分隔) div p { background-color:yello…

java：CSS（定位，组合选择符，边距，Float，Table的样式，显示和隐藏，换行，盒子模型，iframe和frameset框架）

1.绝对定位,相对定位,fixed定位(指浏览器窗口定位): <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定位:绝对定位和相对定位</title> <style> #div1 { border: 1px solid black; width: 30px; height: 30px; /* 定位1:fixed 指定位到浏览器窗口某…

CSS 组合选择符

CSS 组合选择符组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器后代选取器匹配所有值得元素的后代元素. 以下实例选取所有 <p> 元素插入到 <div> 元素中: 实例 div p{background-color:yellow;} 尝试一下 » 子元素选择器与后代选择器…

CSS：CSS 组合选择符

ylbtech-CSS:CSS 组合选择符 1.返回顶部 1. CSS 组合选择符 CSS 组合选择符组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器后代选取器匹配所有值得元素的后代元素. 以下实例选取所有 <p> 元素插入到 <div> 元素中: 实例 div p { ba…

CSS组合选择符

组合选择符说明了两个选择器直接的关系. 目录: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器后代选取器匹配所有值得元素的后代元素. 以下实例选取所有<p>元素插入到 <div> 元素中实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>后代选取…

CSS和html如何结合起来——选择符及优先级

1.选择符兼容性统配选择符 * 元素选择符 body 类选择符 .class id选择符 #id 包含原则符 p strong (所有后代) 子代选择符 p>strong (紧跟子代) lte IE7 相邻选择符 h1+p (h1后面第一个p元素) lte IE7 属性选择符 button[class] (带有class属性的button) lte IE7 button[cl…

【代码笔记】Web-CSS-CSS组合选择符

一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS 组合选择符</title> <style> /*后代选择器*/ div p { background-color: yellow; } /*子元素选择器*/ div>p { background-color: green; } /*相邻兄弟选择器…

CSS第二天总结更多的选择符

CSS的选择符非常多,今天继续总结后面的选择符 1.id和class选择符某些情况下我们用关系选择符或者伪类选择符无法选中一些元素时,我们可以给这些元素起个名字或者分类,这就是id和class属性.下面给出一个id为xxx,class为yyy的a链接: <a href="" id="xxx" class="yyy">链接</a> CSS代码: #xxx{color: red} /*用#选择id(井号)*/ .yyy{te…

说说ID选择符、类选择符和HTML标记选择符的优先级顺序

ID选择符.类选择符和HTML标记选择符三者之间的优先级顺序是:ID选择符>类选择符>HTML标记选择符,但是可以用!important提升优先权. 如: p{color:#f00 !important} /*(注#f00是红色)*/ .blue{color:#00f} #yellow{color:#ff0} 此时p标签的内容显红色(firefox中的显示效果,ie6important支持不好),优先级最高. 具体代码如下: <!DOCTYPE html PUBL…

css伪类伪元素

在CSS中,模式(pattern)匹配规则决定哪种样式规则应用于文档树(document tree)的哪个元素.这些模式叫着选择符(selector). 一条CSS规则(rule)是选择符{属性:值;属性:值;}(selector {property:value;property1:value2;}),即选择符决定了{}中的声明(declaration)匹配哪个元素. 类:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[…

css中伪类/伪元素详解

一.伪类和伪元素伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). 而伪元素则用于创建一些不在文档树中的元素,并为其添加样式(如:before/:after). 二.常用伪类伪类用法兼容 :link 未访问的链接主流浏览器都支持 :visited 已访问的链接主流浏览器都支持 :hover 鼠标划过链接主流浏览器都支持 :active 已选中的链接主…

CSS定位——浮动定位

CSS定位机制Ⅱ——浮动定位 float属性:进行浮动定位 left,right clear属性:清除浮动 left,right,both ㈠ float属性 1.概述 ⑴div实现横向多列布局 ⑵float属性 left——左浮动 right——右浮动 none——不浮动下图为代码的实现: ㈡ float属性用途 ⑴在图文混排的时候如果你希望图片位于文字的左侧或者右侧,那我们就把这个图片设置成float的属性是left或right. 如下图所示: ⑵在…

css定位浮动伪类 margin

一,margin .标准文档流,margin在竖直方向的不叠加,以较大的为准 .使用margin: auto;的盒子必须有明确的width,并且只有标准文档流的盒子才能使用margin: auto; .善于使用父亲的padding而不是儿子的margin; 二,css精灵 .css精灵优点,减少http请求 .通过background-position来控制显示位置 .background-attachment:fixed; 背景图片固定,不随滚动条滚动精灵的使用 background ur…

深入理解CSS定位—浮动模型

前面我们讲到了绝对定位,在这篇文章中,我们将讲到3种定位模型中的浮动模型.主要参考张鑫旭在慕课网的深入理解float 那些年我们一起清过的浮动---by 一丝丝凉精通CSS 注意:第二小节基本参考一丝丝凉的内容,看过这篇就可以略过我的那部分内容. 1. 浮动浮动:浮动的框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘.和绝对定位元素一样,使用浮动后,该元素也会脱离文档流,即浮动框不属于文档中的普通流.当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排…

css之属性及剩余的选择符

今天的课程加速了,比平时快了些,但觉得很不错.nice~ 属性选择符 E[att] 选择具有att属性的E元素. input[type]{color: #red;} <input type="radio"> E[att="val"] 选择具有att属性且属性值等于val的E元素. input[type="radio"]{color: #red;} <input type="radio"&…

CSS 中常用的选择器（选择符）

一.标签选择器:直接将HTML标签(Tag)作为选择器,可以是p.h1.dl.strong等HTML标签.如: p { font:12px;}em { color:blue;}dl { float:left; margin-top:10px;} 二.id选择器:我们通常给页面元素定义id.例如定义一个层 <div id="menubar"></div> 然后在样式表里这样定义: #menubar{margin:0 auto;background:#ccc;col…

选择符优先级-----:link伪类

问题:请指出以下结构中,A标签内的字体颜色. <style> a{ color:#ccc}/* 灰色 */ .alink a{color:#F60}/* 橙色 */ h1 a{color:#F00}/* 红色 */ a:link{color:#009}/* 蓝色 */ div h1 a{ color:#000}/* 黑色*/ </style> <div id="contact"> <h1 class="alink">…

css伪类伪元素

之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正了我的错误,所以今天打算好好研究下两者的区别.首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 css 无法描述的东西. 伪类种…

HTML学习笔记 css定位浮动及瀑布流案例第十三节（原创）参考使用表

#fd { width: 100px; height: 150px; background-color: forestgreen; float: left; } #sd { width: 150px; height: 100px; background-color: coral; float: left; } #td { width: 100px; height: 100px; background-color: chartreuse; float: left; } #container { w…

css定位浮动总结

定位:定位在中间,放大缩小时也不会跑偏. position:absolute; top: 50%; left: 50%; margin: -270px 0 0 -455px; 解释:定位后,设百分比的位置,再设置外边距. 浮动:span等行内元素不能设置宽高,但在浮动后可以设置宽高. <style> span { width: 200px; height: 200px; background: red; float: left; } </style> <span>qqq…

css样式（二）（伪类 | 伪元素 | 导航 | 图像拼合 | 属性选择器）

一.rgb值: RGBA 颜色 RGBA 颜色值得到以下浏览器的支持:IE9+.Firefox +.Chrome.Safari 以及 Opera +. RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度. RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha).alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字. 实例 p { background-color:rgba(,,,0.5); } 二…