JavaWeb基础总结之CSS

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器的分组：

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

样式继承及其问题：

在父元素中定义了样式，其子元素是默认继承的，此时如果子元素想要使用自己的样式，只需要重写子元素的样式即可。

Css的选择器：

（1）派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

（2）id 选择器

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

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

id选择器除了单独的使用，还能创建派生选择器使用。

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。

（3）CSS 类选择器

.center {text-align: center}

和 id 一样，class 也可被用作派生选择器：

.fancy td {
	color: #f60;
	background: #666;
	}

（4）属性选择器

对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

下面的例子为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

下面的例子为 title="W3School" 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

属性和值选择器 - 多个值：

<head>
<style type="text/css">
[title~=hello]
{
color:red;
} 
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />

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

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：

外部样式表：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内部样式表：

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

内联样式：

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

Css常见的一些属性：

padding（内边距）：属性定义元素边框与元素内容之间的空白区域。

h1 元素的各边都有 10 像素的内边距：

h1 {padding: 10px;}

也可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

margin（外边距）：围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

h1 {margin : 0.25in;}

margin的格式和padding设置一样：

margin: top right bottom left

CSS position 属性

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

position：absolute；将div从文档流中拖出。漂浮在上空。许多的网站上的漂浮着的广告都是使用absolute定位。

position：relative：不会从文档六中拖出去，就是在二维空间里面进行位置的改变，就是不会漂浮在上空。

图片签名：就是在图片上显示文字，用position：absolute就可以。

最后再总结一点常见的问答题：

（1）html中有一种调用css的方式@import url(div.css)这种方式一般不使用,共四种其他三种用过，css优先级自上而下从外到内的优先级是从低到高，类似于是函数重写的感觉。

（2）css的四种选择器：标签选择器，类选择器，ID选择器，伪类选择器

（3）优先级：盒子模型：div+css。

（4）关于更为细节的知识点，详见css参考手册

注：以上文章仅是个人学习过程总结，若有不当之处，望不吝赐教。

JavaWeb基础总结之CSS

CSS 概述

猜你喜欢