CSS

最新推荐文章于 2024-04-21 14:30:45 发布

ShawnRacine

最新推荐文章于 2024-04-21 14:30:45 发布

阅读量424

点赞数

文章标签： CSS

本文链接：https://blog.csdn.net/gongsunjinqian/article/details/51087367

版权

创建CSS

1、外部声明

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部:

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

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 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 中却无法正常工作。

2、内部声明

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

3、内联声明

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

注意：三种同时使用会覆盖。

选择器

1、派生选择器

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

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

注：strong由于font-weight:normal失去原有的加粗效果。

结果：

我是斜体字。这是因为 strong 元素位于 li 元素内。
我是正常的字体。

2、id 选择器

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

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

结果：

这个段落是红色。

这个段落是绿色。

注意：#sidebar、div#sidebar与#sidebar p。的区别。

#sidebar：应用于任何id为sidebar的元素。

div#sidebar：应用于id为sidebar的div元素。

#sidebar p：应用于父元素id为sidebar的p元素。

3、类选择器

.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>

结果：

This heading will be center-aligned

This paragraph will also be center-aligned.

同样注意：.center、div.center和.center p的区别。

4、属性选择器

[title]
{
color:red;
}

<h2 title="anytext">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>

结果：

Hello world

W3School

另外，还可以通过 [ title=user] 方式限定title的值。

[title=hello] { color:red; } title的值需要完全匹配hello文本。

[title~=hello] { color:red; } title的值可以是hello world，即，允许空格分隔后的完全匹配。

[title|=hello] { color:red; } title的值可以是hello_world，即，存在hello文本即可。

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

样式：

CSS 背景属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

CSS 文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

CSS 字体属性

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

CSS链接

a:link {color:#FF0000;}		/* 未被访问的链接 */
a:visited {color:#00FF00;}	/* 已被访问的链接 */
a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}	/* 正在被点击的链接 */

CSS 列表属性(list)

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

CSS Table 属性

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

CSS 边框属性

"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。

属性	描述	CSS
outline	在一个声明中设置所有的轮廓属性。	2
outline-color	设置轮廓的颜色。	2
outline-style	设置轮廓的样式。	2
outline-width	设置轮廓的宽度。	2

ShawnRacine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

创建CSS1、外部声明link rel="stylesheet" type="text/css" href="mystyle.css" />2、内部声明 hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}
复制链接

扫一扫