别具光芒CSS+div 学习三（1）

最新推荐文章于 2013-09-23 23:17:00 发布

maigan323

最新推荐文章于 2013-09-23 23:17:00 发布

阅读量637

点赞数

分类专栏： CSS 文章标签： css div html 文档 reference class

本文链接：https://blog.csdn.net/maigan323/article/details/7549149

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第四章 css的基本规则。

以前都会用，只是稀里糊涂。照着书里，来理论一下吧。

基本的写法如图：

多属性写到一块用；号隔开。
```
p{color:red;font-size:14px;}
```
选择符
- 类型选择符（Type Selector），html文档中的元素
- 类选择符（Class Selector），以“.”开头后面的名字可以自己定义如：.warn{color:red}
- id选择符（Id Selector），以“#”开头
- 包含选择符（Descendant Selector），E1 E2{color:red},E1中的E2，颜色为红色。E1，E2可以使类选择符，id选择符，或者包含选择符
- id选择符和类选择符的区别：
  
  类选择符可以重复使用，而id选择符一个页面只能使用一次，因为id在html页面中id是唯一的。
  id选择符的优先级别高于类选择符。
- 分组：将相同的定义应用于多个选择符，可以用“，”隔开。
```
p,div,.warning{font-size:12px}
```
- 通配选择符*：选定文档目录树（DOM）中的所有类型的单一对象，为所有的元素定义同意的属性，如：
```
*{margin:0;}/*若不定义则选用默认值。*/
```

伪类和伪元素
伪类（Pseudo-Class Reference）：让页面呈现丰富表现力的好东西，之所以是伪，是因为在页面中并不存在，它们指定的是元素的某种状态

a:link	未访问链接状态
a:visited	已经访问链接状态
a:hover	鼠标停在链接上的状态
a:active	鼠标点击与释放之间的状态

伪元素：与伪类类似，也是对文档中不实际存在的元素进行定义。

:first-letter	设置元素内的第一个字符的样式表属性
:first_line	设置元素内的第一行的样式表属性
:before	设置在元素前发生的内容（相对于DOM结构）
:after	设置在元素后发生的内容（相对于DOM结构）

注释

/*这就是注释*/
html{font-size:12px}/*设置html内的文字大小*/

HTML结构
如下是一个典型的html文件：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html";charset="gb2312"/>
		<title>文档结构</title>
	</head>
	<body>
		<h1>CSS规则</h1>
		<p>样式表由一些<strong>样式规则</strong>组成</p>
		<ul>
			<li>选择符
				<ul>
					<li>类选择符</li>
					<li>ID择符</li>
					<li><em>包含</em>择符</li>
				</ul>
			</li>
			<li>属性</li>
			<li>值</li>
		</ul>
	</body>
</html>

HTML为根元素，下图为具体的树形结构。

继承
CSS的一个主要特征是继承，继承历来与上面的结构关系，它允许样式不仅应用于某个特定元素，同时也应用于其后代。但是又的属性是不能够继承的，如：
边框（border），边界（margin），填充（padding）和背景（background）等table中的td也不会继承body的属性

特殊性，规定了不同规则的权重，例如有以下定义：

.warning{color:red}/*特殊性为：1*/
p{color:blue}/*特殊性为：10*/
#ccc{color:black}/*特殊性为：100*/
 <p class="warning">特殊性</p>

所以应该为id选择器的颜色，因为id选择器的特殊性最高

层叠（Cascading）
由于可以有多样式表存在，当有相同特殊性的规则应用在同意元素的时候，根据这些规则的前后顺序来确定权重。后定义的规则会被应用
```
p{color:red}
p{color:blue}
<p>颜色应该为blue，后面出现的权重更高</p>
```
元素分类
- 块级元素（display：block）
  每个块级元素都从一个新行开始，而其后的元素也需要另起一行开始。标题，段落，表格，层，body都是块级元素，块级元素只能作为其他块级元素的子元素。
- 内联元素（display:inline）
  内联元素不需要在新行内显示，而且也不强迫其后的元素换行。a，em，span均为内联元素，内联元素可以为其他任何元素的子元素。
- 列表元素（display：list-item）
  HTML中只有li元素默认是此类型。
- 隐藏元素（display：none）
  浏览器会忽略掉这个元素，页面上不被显示也不占地方。

颜色

名称	写法	种类
命名颜色	`p{color:red}`	只有16种颜色
RGB颜色	如： `p{color:rgb(132,20,180);} p{color:rgb(12%,15%,50%);`	值可以是0-255中的整数，也可以使0-100%的百分数
16进制颜色	`p{color:#101010}`	值00-ff，用#开头，必须为两位，1前必须补0

长度
- 绝对单位
  英寸（in），厘米（cm），磅（pt），pica（pc）
- 相对单位
  元素的字体高度（em），字母x的高度（ex）和像素（px）
  em是本身元素给定的值。如果font-size：12pt，那么1em=12pt，如果当前元素没有给定值，则选择父类的给定值。
  ex是元素中x字母的大小（略过）
  px是根据显示器实际分辨率下，一个小点的大小。
- 百分比
  用%表示。

maigan323

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
别具光芒CSS+div 学习三（1）

第四章 css的基本规则。以前都会用，只是稀里糊涂。照着书里，来理论一下吧。基本的写法如图：多属性写到一块用；号隔开。p{color:red;font-size:14px;}选择符类型选择符（Type Selector），html文档中的元素类选择符（Class Selector），以“.”开头后面的名字可以自己定义如：.warn{color:red}
复制链接

扫一扫