CSS基础

最新推荐文章于 2024-07-21 12:12:15 发布

对面『胶己人』

最新推荐文章于 2024-07-21 12:12:15 发布

阅读量504

点赞数 1

本文链接：https://blog.csdn.net/zhougb3/article/details/52027453

版权

CSS基础语法

CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

如果值为若干单词，则要给值加引号：p {font-family: "sans serif";}
你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样(结尾加分号减少出错的可能性）：

p {
  text-align: center;
  color: black;
  font-family: arial;
}

CSS高级语法

选择器的分组：

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

派生选择器：

  strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }

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

id选择器(id 属性只能在每个 HTML 文档中出现一次)：

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

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

两者的结合：

#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;
    }

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

div#sidebar {
    border: 1px dotted #000;
    padding: 10px;
    }

类选择器(类名的第一个字符不能使用数字！):

.center {text-align: center}

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

类选择器也可用于派生选择器。

属性选择器：

[title]
{
color:red;
}

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

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<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 />

<h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
</body>
</html>

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[lang|=en]
{
color:red;
}
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />

<h1>无法应用样式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}
</style>
</head>
<body>

<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">

</form>
</body>
</html>

CSS创建

外部样式表

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

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

内部样式表：

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

内联样式（要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：）

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

CSS背景

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

<html>
<head>

<style type="text/css">

body {background-color: yellow}
h1 {color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}

p.no2 {background-color: gray; padding: 20px;}

</style>

</head>

<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>

</body>
</html>

background-image 也不能继承。事实上，所有背景属性都不能继承。

<html>
<head>

<style type="text/css">
body {background-image:url(/i/eg_bg_04.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;}
a.radio {background-image: url(/i/eg_bg_07.gif);  padding: 20px;}
</style>

</head>

<body>
<p class="flower">我是一个有花纹背景的段落。<a href="#" class="radio">我是一个有放射性背景的链接。</a></p>
<p><b>注释：</b>为了清晰地显示出段落和链接的背景图像，我们为它们设置了少许内边距。</p>
</body>

</html>

背景重复
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始.

<html>
<head>

<style type="text/css">
body
{ 
background-image: 
url(/i/eg_bg_03.gif);
background-repeat: repeat-y
}
</style>

</head>

<body>
</body>
</html>

背景定位

关键字（top、bottom、left、right 和 center）：位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。
百分数值：百分数值同时应用于元素和图像，如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;

长度值：如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

背景关联(默认为scroll)

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

简写属性：

<html>
<head>
<style type="text/css">
body
{ 
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 
}
</style>
</head>

<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>

</html>

CSS文本

可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素p {text-indent: 5em;}
在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：p {text-indent: -5em; padding-left: 5em;}
p {text-indent: 1cm}
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。在下例中，缩进值是父元素的 20%，即 100 个像素：

div {width: 500px;}
p {text-indent: 20%;}

<div>
<p>this is a paragragh</p>
</div>

text-indent 属性可以继承
字间隔：word-spacing 属性可以改变字（单词）之间的标准间隔，以空格为标准。
字母间隔：letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
字符转换：(none uppercase lowercase capitalize）h1 {text-transform: uppercase}
文本装饰：（text-decoration：none underline overline line-through blink）

a {text-decoration: none;}(去掉下划线）
a:link a:visited {text-decoration: underline overline;}
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来。

处理空白符：
p {white-space: normal;}
p {white-space: pre;}
p{white-space: nowrap}//防止文本换行，保持在一行，拖拽边框查看。
如果元素的 white-space 设置为 pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反，会像正常文本中一样合并空白符序列，但保留换行符。
下面的表格总结了 white-space 属性的行为：

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

div
  {
  direction: rtl
  }
p.big {line-height: 200%}
p.big//默认行高是20px
  {
  line-height: 30px
  }
p.big//默认行高是1
{
line-height: 2
}

CSS字体

h1 {font-family: Georgia, serif;}
p {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}
只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号.

字体风格：p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}
font-variant 属性可以设定小型大写字母:p {font-variant:small-caps;}
字体加粗：

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

字体大小：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
h1 {font-size:60px;}
使用 em 来设置字体大小,则可以在所有浏览器中调整文本大小。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

CSS缩写

p.ex2
{
font:italic bold 12px/30px arial,sans-serif;
}
12px 是指 font-size:12px  即字体大小为12像素
30px 是指line-height:30px  即每行字的行高为30px

CSS链接

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

创建链接匡

<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}

a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

<body>
<a href="/index.html" target="_blank">W3School</a>
</body>
</html>

CSS列表

ul {list-style-type : square}
ul li {list-style-image : url(xxx.gif)}
ul {list-style-position:inside; }(outside为默认值)
简写：li {list-style : url(example.gif) square inside}

CSS表格

table
  {
  border-collapse:collapse;//折叠边框
  }

table,th, td
  {
  border: 1px solid black;
  }

table
  {
  width:100%;
  }

th
  {
  height:50px;
  }

td
  {
  text-align:right;
  }

td
  {
  height:50px;
  vertical-align:bottom;
  }

一个漂亮的表格：

<html>
<head>
<style type="text/css">
#customers
  {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  width:100%;
  border-collapse:collapse;
  }

#customers td, #customers th 
  {
  font-size:1em;
  border:1px solid #98bf21;
  padding:3px 7px 2px 7px;//上右下左
  }

#customers th 
  {
  font-size:1.1em;
  text-align:left;
  padding-top:5px;
  padding-bottom:4px;
  background-color:#A7C942;
  color:#ffffff;
  }

#customers tr.alt td 
  {
  color:#000000;
  background-color:#EAF2D3;
  }
</style>
</head>

<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>

<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>

<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>

<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>


</table>
</body>
</html>

空单元格：

table//一起才能使空单元格不显示。
{
border-collapse: separate;
empty-cells: show;
}
<td></td>

边框之间距离：

table.one 
{
border-collapse: separate;
border-spacing: 10px//水平
}
table.two
{
border-collapse: separate;
border-spacing: 10px 50px//水平 竖直
}
除非 border-collapse 被设置为 separate，否则将忽略这个属性。

表格标题的位置：caption {caption-side:bottom}

CSS轮廓

p 
{
border:red solid thin;
outline:#00ff00 dotted thick;
}

outline-style:dotted;
outline-color:#00ff00

p.dotted {outline-style: dotted}
p.dashed {outline-style: dashed}
p.solid {outline-style: solid}
p.double {outline-style: double}
p.groove {outline-style: groove}
p.ridge {outline-style: ridge}
p.inset {outline-style: inset}
p.outset {outline-style: outset}

outline-width:3px;

CSS框模型

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

h1 {padding: 10px 0.25em 2ex 20%;}
百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

CSS定位

position属性：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
值描述

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

img 
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
(剪切图片，上右下左。距离上端0，200px。距离左端50，0px)

z-index:该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

p.inline {display:inline;}(block,none)

div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible(溢出的内容显示)。

overflow: hidden隐藏溢出的内容不显示
overflow: auto自动处理
img.top {vertical-align:text-top} img.bottom {vertical-align:text-bottom}图片位于文档中的哪一个位置。

相对定位：如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{

position:relative;
left:20px;
display:inline;
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>dddd
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

绝对定位：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}
规则与相对定位类似

float属性：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
clear属性：clear 属性规定元素的哪一侧不允许其他浮动元素。

CSS选择器

CSS多类选择器：

<p class="important warning">
This paragraph is a very important warning.
</p>

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

.important.urgent {background:silver;}

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

id选择器：
不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
类选择器和 ID 选择器可能是区分大小写的

属性选择器：
a[href][title] {color:red;}
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
子串匹配属性选择器:

类型	描述
[abc^=”def”]	选择 abc 属性值以 “def” 开头的所有元素
[abc$=”def”]	选择 abc 属性值以 “def” 结尾的所有元素
[abc*=”def”]	选择 abc 属性值中包含子串 “def” 的所有元素

特定属性选择类型:

*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

一般来说，[att|=”val”] 可以用于任何属性及其值。

CSS后代选择器
两个元素之间的层次间隔可以是无限的，如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

CSS 子元素选择器
h1 > strong {color:red;}

CSS 相邻兄弟选择器
h1 + p {margin-top:50px;}

伪类（伪类名称对大小写不敏感）

input:focus
{
background-color:yellow;
}

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

上面第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。

在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：
<html>
<head>
<style type="text/css">
p > i:first-child {
  font-weight:bold;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
<html>
<head>
<style type="text/css">
p:first-child i {
  color:blue;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

q:lang(no)
{
quotes: "~" "~"
}

<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>

CSS伪元素

“first-line” 伪元素只能用于块级元素。
“first-letter” 伪元素只能用于块级元素。”first-letter” 伪元素用于向文本的首字母设置特殊样式。
“:before” 伪元素可以在元素的内容前面插入新内容。
“:after” 伪元素可以在元素的内容之后插入新内容。

h1:before
  {
  content:url(logo.gif);
  }
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。