CSS基础教程-优快云博客

本文介绍了CSS的基本概念，包括层叠样式表的使用、选择器、属性和值的定义方式。此外，还详细阐述了如何通过不同的方式插入样式表，并探讨了背景属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该笔记基于W3Cschool的CSS教程

0x01 需要具备的基础知识

HTML
XHTML

0x02 css的概述

css是指层叠样式表，是用来定义HTML元素的，通常存储在样式表中。
在HTML4.0中解决了内容与样式分离的情况。
外部样式可以提高工作效率，通常在css文件中。
多个样式可层叠为一。

0x03 层叠的优先级

1.浏览器的缺省值

2.外部样式表

3.内部样式表

4.内联样式表

其中4为最高优先级

0x04 css的语法

css语法规则由：选择器+申明（属性：值）。

如下所示：

selector｛preproty：value｝

举个例子：下面是关于h1的一个css样式：

h1{color:#003;}                            //若有多个定义，则每个定义之间用；号隔开

若值为若干个单词组成，则需要打“”

h1{font-family:"sans-serif"}

0x05 css的高级语法

1.可以对选择器进行分组，从而快速的设置多个样式：

h1,h2,h3,h3{color:#003;font-size:10px;font-family:"Verdana, Geneva, sans-serif"}  //中间用逗号隔开

2.继承的问题

子元素理论上讲应该继承父元素的属性：

body{width:10}

比如如果body的属性是width：10.那么子元素诸如：h1，p之类的都会应用这个。但是有些情况是，企业并不会按照标准来执行。一些旧的浏览器也不会理解继承，这时候只有在每一层都写上width：10。

3.如何特殊设置某个子元素的值属性值：

body{width:10}
p{width:11}

我们只需要单独在设置一遍子元素的属性值。

0x06 css派生选择器

1.派生选择器：通过元素位置的上下文关系，来定义样式，使其更加简洁。

下面是一个例子：

li strong{font-style:italic;}                                      //设置列表里的加粗字体为斜体

<li><strong>什么字体</strong></li>
<strong>什么字体</strong>                                          //一个是列表里的strong，一个是普通的strong

//关于派生选择器的高级用法还会在后面深入讲解。


0x07 ID选择器
1.顾名思义，ID选择器可以为相同id的元素设置样式，用#来定义。
下面举个例子，在css样式中设置如下：
#red｛color：red｝                       //设置id为red（第一个只是id名，你设置其他的也可以）的样式为red
#green｛color：green｝                   //设置id为green的样式为green

在html中应用：

<h1 id="red">color</h1>
<h2 id="green">color</h2>

0x08 类选择器

1.类选择器以一个点号（.）显示。

2.代码如下：

.center{text-align:center}                      //center类都会被居中显示

0x09 属性选择器
1.形式如下：
[属性名字]{属性：值}

[title]｛text-align：red;｝

2.属性值选择器

[title=www]{text-align:red;}

[title~=www]{text-align:red}:适用于属性值由空格连接的

[title|=www]{text-align:red}:适用于属性值有连字符连接的

0x0A 创建

关于插入样式表的方式一共有三种：

1.外部样式表的插入（样式应用与多个页面，修改一个文件就可以修改整个站点）

<head>
<link rei="stylesheet" herf="mysheet.css"/>
</head>                                                        //外部样式表可以在任何编辑器里编辑，但不能出现html元素，且文件以.css结尾

PS：当然也可以通过一些高级的编辑器（如dw），里面可以手动的进行添加，而不需要输入上面的代码。

2.内部样式表的插入（对于单个页面的样式编辑）

<head>                                                                  //直接在某个页面下定义样式
<style type="text/css">
hr{color:#F00;}
p{margin:inherit;}
body{backface-visibility:visible;}               
</style>
</head>

内联样式表的插入：

<p style="color:#3FF">today is a sunning day!</p>

就是对某个元素的定义，不过不建议使用，这会损失很多样式的优势。

3.多重样式插入

在外部样式表中：

body{color:#9F9;
backface-visibility:hidden;
bottom:tijiao;

}

在内部样式表中：

<style type="text/css">
body{color:#090;}

</style>

在实际显示中：

body{

color:#090;

backface-visibility:hidden;bottom:tijiao;}

可以看到，内部样式没有而外部样式有的属性将以外部样式显示。如果内外样式都有的，则以内部样式显示。

0x0B 背景

1.css允许任何合法的颜色，这一点比html强大的多。

body{background-color:red}                            //background-color不能继承，默认值为transparent

2.背景图像

body{background-image:url；｝

当然该属性不只应用在body，段落等也可以应用。

PS：所有的背景属性都不能被继承。

3.背景的平铺

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;                                 //repeat属性是重复之意，可以实现对图像的平铺，-x，-y可以实现对纵向和横向的平铺
  }

4.背景的定位

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;                                      //position实现背景的定位，该例子中实现定位在顶部
  }

定位会使用到关键字：

单一关键字	等价的关键字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

除了表示位置的关键字，百分数也可以表示位置，比如50%，50%，表示图像居中显示。

也可以使用长度值表示，比如50px 60px。但是这个的表示的是图像左上角距离元素内边距的偏移。该例子中表示，图像向向右偏移50px和向下偏移60px。

5.解决滚动时，图像浏览完的情况

浏览网页的时候若网页背景是一张图像，你会发现，不论网页多长，都不会出现背景图像被浏览完的情况，这是因为使用了：

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed                                          //这条代码就是固定图像之意，使得不论怎么滚动图像，图像不会随滚动而动
  }

6.所有的背景属性都设置在一个声明中

body
{ 
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 
}

转载于:https://www.cnblogs.com/comefuture/p/8305999.html