CSS基础语法

最新推荐文章于 2024-06-13 06:20:33 发布

强强爱学习

最新推荐文章于 2024-06-13 06:20:33 发布

阅读量281

点赞数 1

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS简介

CSS是指层叠样式表，它定义了如何显示HTML元素。样式通常存储在样式表中，这是为了将内容与表现分离。

外部样式表

外部样式表可以大大提高工作效率，存储在CSS文件中。仅仅修改一个CSS文件就能同时修改你所有站点的布局和外观。

样式表的优先权

内联样式（在HTML元素内部）
内部样式表（在<head>元素中）
外部样式表
浏览器缺省设置
优先级从上到下递减。

CSS基础语法

CSS规则由两个主要部分构成，即选择器与声明。

selector {property: value}

选择器是需要改变样式的HTML元素
声明被花括号包围，由属性和值组成，被冒号分隔开。不同的声明语句之间用分号分隔。如：

h1 {color:red; font-size:14px;}

上面的例子将h1元素的文字颜色定义为红色，字体大小设置为14px。其中h1是选择器，color是属性，red是值。
如果值由若干单词组成，则需要添加引号，如：

p {font-family: "sans serif";}

增加可读性：每行只写一个属性，如：

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

选择器分组

对选择器分组，让他们分享相同的声明。选择器之间用逗号分隔，如：

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

上面的例子中将所有标题的颜色设置为绿色

继承

子元素将从父元素那里继承属性，如：

body {
color:red;
     }

上面的语句将body的文本设置为红色，则其子元素，如<p>,<ul>,<ol>等的文本也将继承这一属性。
如果不希望某个元素继承怎么办呢？只需针对该元素设置一个特殊规则，即可摆脱继承，如：

body{
color:red;
}
p{
color:green
}

下面通过一个实际的html文本来验证一下：

<html>
    <head>
    <style>
        body{
                 color:red;
                }
        p{
	color:green
          }
    </style>
    </head>
    <body>
        <h1>这行文本是红色的</h1>
        <p>这行文本是绿色的</p>
    </body>
</html>

显示效果：
在这里插入图片描述
问题：使用Edge无法正确显示，但是Chrome可以。

派生选择器

依据元素在其位置的上下文关系来定义样式，使得标记更加简洁。比如希望h2中的strong是蓝色，而别处是红色，可以如下定义：

<html>
 <head>
  <style>
   strong{
    color:red;
   }
   h2{
    color: red;
   }
   h2 strong{
    color:blue;
   }
  </style>
 </head>
 <body>
  <h2>这行文本是红色的</h2>
  <strong>这行文本也是红色的</strong>
  <h2><strong>这行文本是蓝色的</strong></h2>
 </body>
</html>

显示效果如下：
在这里插入图片描述

id选择器

为标有特定id的HTML元素指定特定的样式，用#定义。如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>id选择器</title>
  <style>
   #red {color:red;}
   #green {color:green;}
  </style>
 </head>
 <body>
  <p id="red"> 这个段落是红色的</p>
  <p id="green">这个段落是绿色的</p>
 </body>
</html>

id选择器用于生成派生选择器，如：

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

上面的样式会应用于id为sidebar的元素中的段落。这个元素可以是<div>等。

类选择器

类选择器用句点定义，如：

.center{text-align:center}

类似的，类选择器可以用于生成派生选择器。

属性选择器

用于对带有指定属性的HTML元素设置样式，如：

[title]
{
color:red;
}

上面的例子为所有带有title属性的元素设置样式。
属性和值选择器，如：

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

上面的例子为title="ZQ"的HTML元素设置样式。

插入样式表

外部样式表

适用于样式表应用于很多网页时，每个页面使用<link>标签链接到样式表。<link>元素位于<head>中。如：

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

内部样式表

当某个文档有特殊的样式要求时，应该使用内部样式表。用<style>定义在<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: red; float:left">
这是一个段落
</p>

多重样式表

当在不同的样式表中都规定了某个元素的样式时，按照如下优先级递减：内联样式，内部样式，外部样式。

强强爱学习

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础语法

CSS简介CSS是指层叠样式表，它定义了如何显示HTML元素。样式通常存储在样式表中，这是为了将内容与表现分离。外部样式表外部样式表可以大大提高工作效率，存储在CSS文件中。仅仅修改一个CSS文件就能同时修改你所有站点的布局和外观。样式表的优先权内联样式（在HTML元素内部）内部样式表（在<head>元素中）外部样式表浏览器缺省设置优先级从上到下递减。CSS基...
复制链接

扫一扫