一、理解CSS的样式组成CSS里的样式表是有规则组成的，每条规则有三个部分组成：

1、选择器(如下面例子中的：“body”)，告诉浏览器文档的哪个部分受规则影响；

2、属性(如实例中的font-family、color等)，规定了布局的什么方面被设置了；

3、值(如实例中的Arial,sans-serif，#333333等)，给出了式样属性的值。二、CSS式样中不同符号的区别

#是ID选择器 .是class选择器 *是通配符号

比如*{margin：0；padding：0；所有的元素都会沿用这个属性样式}(还有一种情况是IE hack)比如 .b{margin:0;*margin:10px;}这里IE看到的是margin：10px，其他的浏览器看到的会是前面那个margin：0；

先来看段代码吧~

body{

font-family: Arial,sans-serif;

color: #333333;

line-height: 1.166;

margin: 0px;

padding: 0px;

}

#masthead{

margin: 0;

padding: 10px 0px;

border-bottom: 1px solid #cccccc;

width: 100%;

}

.feature img{

float: left;

padding: 0px 10px 0px 0px;

margin: 0 5px 5px 0;

}

#号对应id

点号对应class

不加对应html 标签

归纳成一句话就是：Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。

在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用。

table.hovertable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #999999; border-collapse: collapse; } table.hovertable th { background-color: #eed8ae; border-width: 2px; padding: 8px; border-style: solid; border-color: #a9c6c9; } table.hovertable tr { background-color:#d4e3e5; } table.hovertable td { border-width: 2px; padding: 8px; border-style: solid; border-color: #a9c6c9; }

学术或足球分析交流微信:chinamaths(进讨论组)

css选择器中:first-child 与 :first-of-type的区别

## css选择器中:first-child 与 :first-of-type的区别 ---- :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比 ...

html5 css选择器。 井号，句号的区别

.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family ...

html5——css选择器

复习 div>p: 子代 div+p:div后面相邻的第一个p div~p: div后面所有的兄弟p 属性选择器 标志:[]:区别于id选择器:#,区别于类名选择器:. 特殊符号:^:开头    ...

css选择器中:first-child与:first-of-type的区别

:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素: ...

[转] css选择器中:first-child与:first-of-type的区别

:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素: ...

[转]ibatis中井号跟美元符号区别(#、$)

Mybatis中如何在SQL语句表名中使用参数 insert into prefix_${table_name} (a, b, c) values (#{a}, #{b}, #{c}) ${} 表示直 ...

ibatis中井号跟美元符号区别(#.$)

1.#可以进行预编译,进行类型匹配,#变量名# 会转化为 jdbc 的 类型 $不进行数据类型匹配,$变量名$就直接把 $name$替换为 name的内容 例如: select * from tabl ...

第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)

---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

随机推荐

SQL 执行进展优化

聚集索引扫描 SELECT * FROM C_SY_Ownedstorm 聚集索引扫描比表扫描快 聚集索引扫描:发生于聚集表,也相当于全表扫描操作,但在针对聚集列的条件等操作时,效率会较好. 表扫描 ...

(三)、Struts第三天

(三).Struts第三天 Struts核心业务: (Struts提供了哪些功能?) 1.  请求数据自动封装(params拦截器) 2.  struts数据处理方式 * ActionContext ...

【方法】Html5实现文件异步上传

1 简介 开发文件上传功能从来不是一件愉快的事,异步上传更是如此,使用过iframe和Flash的上传方案,也都感觉十分的别扭.本文简要简绍利用Html5的FormData实现文件的异步上传,还可以实 ...

实现QObject与JavaScript通讯(基于QWebEngine + QWebChannel)

实现QObject与JavaScript通讯(基于QWebEngine + QWebChannel) 通过使用QtWebEngine加载相关页面,然后用QtWebChannel作为Qt与Javascr ...

Leetcode刷题

Leetcode题库       本博客用于记录在LeetCode网站上一些题的解答方法.具体实现方法纯属个人的一些解答,这些解答可能不是好的解答方法,记录在此,督促自己多学习多练习.     The ...

COGS2421 [HZOI 2016]简单的Treap

题面见这里 大概是个模板题 Treap暴力插入的做法太暴力了并不优美 这里就需要用到笛卡尔树的构造方法,定义见这里 在 假的O(n) 的时间内构造一棵Treap 把元素从小到大排序 这样从小到大插入时 ...

css实现中文换行，英文换行，超出省略

英文换行时,是以单词换行,在对应的标签添加对应的属性即可 1 word-break:break-all;只对英文起作用,以字母作为换行依据 2 word-wrap:break-word; 只对英文起作 ...

Linux下安装jieba

Jieba代码对 Python 2/3 均兼容 * 全自动安装:`easy_install jieba` 或者 `pip install jieba` / `pip3 install jieba` * ...

公网用户接入NAT后面的freeswitch配置

大致网络示意和终端号码: 客户端侧: 终端号码(1019)终端IP(192.168.1.15)+ 网关(192.168.1.1) + 路由器公网IP(动态地址) 服务器侧: 防火墙(181.92.2. ...

jquery插件开发三种方法

1.好像之前看视频记录下来的,不记得了. //类级别插件开发,主要是在jQuery中定义全局方法: //第一种写法 jQuery.myFunc = function(str){ alert(&quot ...