CSS自学手册-第1章

第1章第2章第3章第4章

你需要具备的知识

在继续学习之前,你需要对下面的知识有基本的了解:

  • HTML / XHTML

你可以在HTML自学手册学习这些项目!


CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css

通过使用 CSS 我们可以大大提升网页开发的工作效率!

在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局。

CSS3 现在已被大部分现代浏览器支持,而下一版的 CSS4 仍在开发中

CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css

通过使用 CSS 我们可以大大提升网页开发的工作效率!

在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局。

CSS3 现在已被大部分现代浏览器支持,而下一版的 CSS4 仍在开发中


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

本 CSS 教程包含了数百个 CSS 在线实例

通过本站的在线编辑器,你可以在线编辑 CSS,并且可以在线查看修改后的效果

body {
    background-color:#d0e4fe;
}
h1 {
    color:orange;
    text-align:center;
}
p {
    font-family:"Times New Roman";
    font-size:20px;
}
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

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

CSS自学手册-第1章 插图1

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元宇宙之家-liboven.cn</title>
<style>
body {background-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>

<body>

<h1>这个标题设置的大小为 36 pt</h1>
<h2>这个标题设置的颜色为蓝色:blue</h2>

<p>这个段落的左外边距为 50 像素:50px</p> 

</body>
</html>

复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元宇宙之家-liboven.cn</title>
<style>
body {background-color:tan;}
h1   {color:maroon;font-size:20pt;}
hr   {color:navy;}
p    {font-size:11pt;margin-left:15px;}
a:link    {color:green;}
a:visited {color:yellow;}
a:hover   {color:black;}
a:active  {color:blue;}
</style>
</head>

<body>

<h1>这是标题</h1>
<hr>

<p>你可以看到这个段落是
被设定的 CSS 渲染的。</p>

<p><a href="https://liboven.cn" 
target="_blank">这是一个链接</a></p>

</body>
</html>

CSS声明总是以分号 ; 结束,声明总以大括号 {} 括起来:

p {color:red;text-align:center;}

为了让CSS可读性更强,你可以每行只描述一个属性:

p
{
    color:red;
    text-align:center;
}

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

id 和 class 选择器

如果你要在HTML元素中设置CSS样式,你需要在元素中设置”id” 和 “class”选择器

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

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id=”para1″:

#para1
{
    text-align:center;
    color:red;
}#para1
{
    text-align:center;
    color:red;
}

ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用


class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点 . 号显示:

在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}.center {text-align:center;}

你也可以指定特定的 HTML 元素使用 class。

在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中:

p.center {text-align:center;}p.center {text-align:center;}

多个 class 选择器可以使用空格分开:

.center { text-align:center; }
.color { color:#ff0000; }

 类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用


如果你要在 html 标签中设置 CSS 样式,那么你有四种方法,即 css 选择器有四种。

除了提到的 id 和 class 选择器外,第三种选择器为标签选择器,即以 html 标签作为 css 修饰所用的选择器。

实例

<style>
h3{
    color:red;
}
</style>
<h3>菜鸟教程</h3><style>
h3{
    color:red;
}
</style>
<h3>菜鸟教程</h3>

第四种选择器即直接在标签内部写css代码。

实例

<h3 style="color:red;">CSS自学教程</h3><h3 style="color:red;">CSS自学教程</h3>

这四种 css 选择器有修饰上的优先级,即:

第四种 > id > class > 第三种

除了教程中的id选择器和class选择器,另还有元素选择器、属性选择器、包含选择器、子选择器和CSS3中新增的兄弟选择器,以下带上ID选择器和类选择器一起举例。

1.ID 选择器(ID selector,IS):使用 # 标识selector,语法格式:#S{…}(S为选择器名)。例:id为name的标签会匹配下面的样式

<style>
#name{
  color:red;
}
</style>
<!--下面文字是红色的-->
<p id="name">red text</p>

2.类选择器(class selector,CS):使用 . 标识selector,语法格式:.S{…}(S为选择器名)。例:class属性值为value的标签会匹配下面的样式

<style>
.value{
  text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">center text</p>

3.元素选择器(element selector,ES):又叫标签选择器,使用标签名作为selector名,语法格式:S{…}(S为选择器名)。例:所有的p标签都会匹配以下的样式

<style>
p{
  font-style:italic;
}
</style>
<!--下面的文字是斜体的-->
<p style="font-style:italic">italic text</p>

4.属性选择器(attribute selector,AS):ES其实是AS的一个特例,在AS基础上还能对selector描述得更具体,语法格式为 E[attr[~=][|=][^=][$=][*=]VALUE]{…},是并没有得到所有浏览器支持的选择器,因此不举例

5.包含选择器(package selector,PS):指定目标选择器必须处在某个选择器对应的元素内部,语法格式:A B{…}(A、B为HTML元素/标签,表示对处于A中的B标签有效)。例:以下div内的p标签和div外的p标签分别匹配不同的样式

<style>
p{
  color:red;
}
div p{
  color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
  <p>yellow text</p><!--文字是黄色的-->
</div>

6.子选择器(sub-selector,SS):类似于PS,指定目标选择器必须处在某个选择器对应的元素内部,两者区别在于PS允许”子标签”甚至”孙子标签”及嵌套更深的标签匹配相应的样式,而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签,语法格式:A>B{…}(A、B为HTML元素/标签)。例:以下div内的p标签匹配样式,div内的table内的p不匹配

<style>
div>p{
  color:red;
}
</style>
<div>
  <p>red text</p><!--文字是红色的-->
  <table>
    <tr>
      <td>
        <p>no red text;</p><!--文字是非红色的-->
      </td>
    </tr>
  </table>
</div>

7.兄弟选择器(brother selector,BS):BS是CSS3.0新增的一个选择器,语法格式:A~B{…}(A、B为HTML元素/标签,表示A标签匹配selector的A,B标签匹配selector的B时,B标签匹配样式)

<style>
div~p{
  color:red;
}
</style>
<div>
  <p>no red text</p><!--文字是非红色的-->
  <div>no red text</div>
  <p>red text</p><!--文字是红色的-->
</div>

1. 补充包含选择器:

包含选择器除了有 A B{…} 的形式外(A和B都是标签),还可以有这种形式:.A B{…} 的形式(A是类名,B是标签)。

作用与上面介绍的相同,会使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示。

<style>
.first span{
  color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容也是红色</span></li>
  <li><span>内容也是红色</span></li>
</ol></p>

</body>

2. 补充子选择器

子选择器除了有 A >B{…} 的形式外(A和B都是标签),还可以有这种形式:.A >B{…} 的形式(A是类名,B是标签)。

作用与上面介绍的相同,会使 class 为 A 的标签里面所有名为 B 的直接子代标签的内容按照设定的内容显示。而非直接子代的 B 标签的内容是不会改变的。

<style>
.first>span{
  color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容不是红色</span></li>
  <li><span>内容不是红色</span></li>
</ol></p>

</body>

3.通用选择器

语法形式为:*{属性:属性值}。它的作用是匹配 html 中的所有元素标签。

<!--使用html中任意标签元素字体颜色全部设置为红色:-->
<style>
*{color:red;}
</style>

<body>
<h1>标题为红色</h1>
<p>段落也为红色</p>
</body>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

语法形式为:

A+B{
    声明1; 
    声明;
    ...
}

实例:

<!--相邻选择器选择每个div紧邻后的一个元素p-->
<style>
   div+p{
     color: red;
   }
</style>
<div>
   <p>not red text</p>
   <p>not red text</p>
</div>
<p>red text</p>
<p>not red text</p>

主要是经常出现的逗号我看大家都没有写

css 中逗号,空格,冒号,点号的含义

一:#a,b{…………}

二:#a b{…………}

三:#a:b{…………}

四:#a.b{…………}

这是四个分别代表着什么含义呢?

一、一个id叫a和一个标签是b的样式

二、一个id叫a下面的一个标签是b的样式

三、一个id叫a的伪类b,例如:a:hover

四、一个id叫a的下面的class叫b的样式

  1. 标签选择器       说明:选中指定标签,也叫元素选择器
  2. id选择器 #           说明:选中id属性
  3. class选择器 .       说明:选中class属性
  4. 属性选择器   []       说明:这样写”a[id]”,选中指定规则的属性,所在标签。
  5. 包含选择器 (空格)   说明:选中所有儿子,孙子等….
  6. 子选择器  >       说明:选中所有儿子,不选孙子等…
  7. 兄弟选择器  ~      说明:选中后面一个或多个兄弟
  8. 相邻选择器  +       说明:选中后面一个兄弟
  9. 伪类选择器   :      说明:主要根据用户动作,标签位置,标签状态来选中
  10. 伪元素选择器 ::     说明:主要选中一段文本的一行,首字,或前后添加样式

各种选择器都涉及优先级和兼容性,这里就不总结了


如何插入样式表

插入样式表的方法有三种:

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

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

<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” 。


当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

<head>
<style>
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">这是一个段落。</p>

复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。 

例如,外部样式表拥有针对 h3 选择器的三个属性:

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性:

h3
{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。


样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下,优先级如下:

(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

style.css 文件样式代码如下:

h3 {
    color:blue;
}

实例

<head>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置:h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
</head>
<body>
    <h3>显示绿色,是内部样式</h3>
</body>

注意:如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式,实例如下:

<head>
    <!-- 设置:h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <h3>显示蓝色,是外部样式</h3>
</body>

优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。

优先级就是分配给指定的CSS声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。

优先级顺序

下列是一份优先级逐级增加的选择器列表:

  • 通用选择器(*)
  • 元素(类型)选择器
  • 类选择器
  • 属性选择器
  • 伪类
  • ID 选择器
  • 内联样式

!important 规则例外

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯,因为它改变了你样式表本来的级联规则,从而使其难以调试。

一些经验法则:

  • Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
  • Only 只在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important
  • Never 永远不要在全站范围的 css 上使用 !important
  • Never 永远不要在你的插件中使用 !important

权重计算:

CSS自学手册-第1章 插图2

解释:

  •  1. 内联样式表的权值最高 1000;
  •  2. ID 选择器的权值为 100
  •  3. Class 类选择器的权值为 10
  •  4. HTML 标签选择器的权值为 1
<html>
  <head>
    <style type="text/css">
        #redP p {
             /* 权值 = 100+1=101 */
             color:#F00;  /* 红色 */
        }
 
        #redP .red em {
             /* 权值 = 100+10+1=111 */
             color:#00F; /* 蓝色 */
 
        }
 
        #redP p span em {
             /* 权值 = 100+1+1+1=103 */
             color:#FF0;/*黄色*/
        }
    </style>
  </head>
  <body>
     <div id="redP">
        <p class="red">red
           <span><em>em red</em></span>
        </p>
        <p>red</p>
     </div>
  </body>
</html>

CSS 优先级法则:

  •  A 选择器都有一个权值,权值越大越优先;
  •  B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
  •  C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
  •  D 继承的CSS 样式不如后来指定的CSS 样式;
  •  E 在同一组属性设置中标有“!important”规则的优先级最大;结果:在Firefox 下显示为蓝色;在IE 6 下显示为红色;
<html>
  <head>
    <style type="text/css">
     #redP p{
        /*两个color属性在同一组*/
        color:#00f !important; /* 优先级最大 */
        color:#f00;
     }
    </style>
  </head>
  <body>
     <div id="redP">
       <p>color</p>
       <p>color</p>
     </div>
  </body>
</html>

这里引入一张流行的CSS权重关系图:

CSS自学手册-第1章 插图3
内联样式 > 内部样式表 > 外部样式表 > 浏览器样式表

css 7 种选择器:

  •  id 选择器
  •  类选择器
  •  伪类选择器
  •  属性选择器
  •  伪元素选择器
  •  通配选择器
  •  标签选择器

CSS 优先规则:

内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

HTML:

<div class="content-class" id="content-id"></div>

CSS:

#content-id {
    color: red;
}
.content-class {
    color: blue;
}
div {
    color: grey;
}

div 最终的颜色显示为红色;


用于定义HTML元素的背景

CSS 属性定义背景效果:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

body {background-color:#b0c4de;}

CSS中,颜色值通常以以下方式定义:

  • 十六进制 – 如:”#ff0000″
  • RGB – 如:”rgb(255,0,0)”
  • 颜色名称 – 如:”red”

以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

background-image 属性描述了元素的背景图像.

默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.

页面背景图片设置实例:

body {background-image:url('paper.gif');}

下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差:

body {background-image:url('bgdesert.jpg');}

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,如下所示: 

body
{
background-image:url('gradient2.png');
}

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

让背景图像不影响文本的排版

如果你不想让图像平铺,你可以使用 background-repeat 属性:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

以上实例中,背景图像与文本显示在同一个位置,为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 “background”:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时,属性值的顺序为::

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

以上属性无需全部使用,你可以按照页面的实际需要使用.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title> 
<style>
body
{
	margin-left:200px;
	background:#5d9ab2 url('https://static.runoob.com/images/mix/img_tree.png') no-repeat top left;
}

.container
{
	text-align:center;
}

.center_div
{
	border:1px solid gray;
	margin-left:auto;
	margin-right:auto;
	width:90%;
	background-color:#d0f0f6;
	text-align:left;
	padding:8px;
}
</style>
</head>

<body>
<div class="container">
<div class="center_div">
<h1>Hello World!</h1>
<p>这个实例包含了一些高级的 CSS 方法,后面章节会介绍到。</p>
</div>
</div>
</body>
</html>

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

温馨提示:本文最后更新于2023-01-17 02:07:16,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
文章版权声明 1、本网站名称:元宇宙之家
2、本站永久网址:https://liboven.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞20赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称常用语表情代码图片

    暂无评论内容