html+css小记

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

注意:id 属性只能在每个 HTML 文档中出现一次。

在现代布局中,id 选择器常常用于建立派生选择器。

1 #sidebar p {
2 font-style: italic;
3 text-align: right;
4 margin-top: 0.5em;
5 }

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。

这个元素很可能是 div 或者是表格单元,尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素,比如 <em></em>
或者 <span>,不过这样的用法是非法的,因为不可以在内联元素 <span> 中嵌入

一个选择器,多种用法
即使被标注为 sidebar 的元素只能在文档中出现一次,这个 id 选择器作为

派生选择器也可以被使用很多次:

 1 #sidebar p {
 2 font-style: italic;
 3 text-align: right;
 4 margin-top: 0.5em;
 5 }
 6
 7 #sidebar h2 {
 8 font-size: 1em;
 9 font-weight: normal;
10 font-style: italic;
11 margin: 0;
12 line-height: 1.5;
13 text-align: right;
14 }

id 选择器即使不被用来创建派生选择器,它也可以独立发挥作用:

1 #sidebar {
2 border: 1px dotted #000;
3 padding: 10px;
4 }

在 CSS 中,类选择器以一个点号显示:

1 .center {text-align: center}

注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

和 id 一样,class 也可被用作派生选择器:

1 .fancy td {
2 color: #f60;
3 background: #666;
4 }

在上面这个例子中,类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示
橙色文字。(名为 fancy 的更大的元素可能是一个表格或者一个 div)

元素也可以基于它们的类而被选择:

1 td.fancy {
2 color: #f60;
3 background: #666;
4 }

可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

属性选择器
下面的例子为带有 title 属性的所有元素设置样式:

1 [title]
2 {
3 color:red;
4 }

属性和值选择器
下面的例子为 title="W3School" 的所有元素设置样式:

1 [title=W3School]
2 {
3 border:5px solid blue;
4 }

属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:

1 [title~=hello]
2 {
3 color:red;
4 }

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用

时间: 2024-10-06 06:05:02

html+css小记的相关文章

校园网仿站——初学HTML&amp;CSS小记

  记录的时候已经完成了2/3,还剩一个循环动画.一个登录位置以及最下方的一些链接就完成了.在一开始做的时候,因为丝毫没有头绪,便开了Chrome开发者模式看了一会源代码(HTML),直到完成了1/3,才发现还有CSS的源代码,索性直接重做.重做的效率明显高了很多,在第一次仿的时候已经学到了很多HTML&CSS的知识,但是还是有很多不知道,只能一边做一边百度. 个人觉得,在学习的时候,并没有一个完整的系统,做一点学一点导致知识点零散,只有一小部门有关联,可以串起来. 这次的作业有几个问题: 一.

CSS小记(持续更新......)

1 内联元素和块级元素的区别以及display的三种属性区别 在说起display属性之前,就必须先说说什么是文档流,以及文档流中的内敛元素和块级元素又是指什么? 一直觉得理解了文档流的概念,一堆CSS布局也就理解起来相对容易点,因为很多布局也都是基于这个理论的,那么什么是文档流呢? 文档流: 将html代码自上而下,从左到右的顺序排列,即为文档流..在文档流中 块级元素(block)特性表现在,如果不加其他属性,它是一个矩形空间,默认是占一行,可以通过调整高度,宽度,边距来调整矩形的布局 --

CSS小记

1.元素居中:指定宽度,然后margin auto 即可 .middle{ max-width:400px; //width:400px;//当浏览器被缩小,宽度小于元素宽度时,元素会被遮挡,所以应用max-width,会自动缩小元素以适应浏览器大小.这点对手机浏览器很有用 margin:0 auto; } 2.把列表元素的display 设为行内元素样式 inline ,可以达到导航栏栏目的效果 3.box-sizing:border-box 对于盒子模型,IE早期版本将border和padd

html与css小记

1.padding-top.padding-bottom.margin-top.margin-bottom对于span是无效的,因为span是行内元素,作用在一行上. 参考:http://www.cnblogs.com/mingjiezhang/p/5373667.html 2.line-height对于span是无效的,因为line-height作用于块元素,而span是行内元素.

小记css的margin collapsing

最近在做web页面设计的时候,莫名的发现最上面会出现一个横条,颜色为html的背景颜色.本意是那一片空横条应该为header的背景色.查了一些资料,发现是margin collapsing的问题,记录下来,希望初学者少走弯路. 从问题说起 先给出demo的源码和截屏,给出一个直观的印象.代码如下: <!DOCTYPE html> <html> <head> <style type="text/css"> html { width: 100

随笔小记——css中的属性覆盖问题

今天写代码时遇到一个问题,贴图记录下: 问题关于li,最开始的时候,我css中写的是:.distination-Box .dist-list li{ width:55px; }这样来控制一级li的属性,但是最后一个li的属性却不能受之前li属性的影响,这里就产生了一个优先级的问题.最后发现当我把一级li的css这样写:.dist-list li{ width:55px;},最后一个li的css这样写:.distination-Box .distination-sec-Box{ width:100

css浮动与绝对定位小记

浮动 float属性可以设置的值为none,left,right.对于设置了浮动的元素,会向其父元素的左侧或右侧紧靠,默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容来确定.浮动可以让一个元素移到它所在行的某一边,使得其他内容沿着该元素的边缘向下流. 浮动的盒子会脱离文档流,形成环绕的效果. 脱离文档流 当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘.因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失.如果把所有三个框都

小记:css diaplay:inline-block 内容不对齐

在display:inline-block;下加入:vertical-align: top; 就可以解决不对齐的问题了 参考的是:css 前端求解, display: inline-block 左右两个元素不对齐 第四楼的回答

纯css制作三角形小记

个人理解,使用css画出三角形,其实控制的就是border. 下面效果分别是4个方向的三角形: /*向上*/ .triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333;/*透明 透明 灰*/ } /*向下*/ .triangle_border_down{ width:0; height:0; bord