当前位置:首页 > css相关 > 正文内容

三剑客实战之Css入门基础知识一[语法基础之选择器]

CSS 语法

CSS 规则集(rule-set)由选择器和声明块组成:

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。

多条 CSS 声明用分号分隔,声明块用花括号括起来。


下例说明:

  • p 是 CSS 中的选择器(它指向要设置样式的 HTML 元素:<p>)。

  • color 是属性,red 是属性值

  • text-align 是属性,center 是属性值

如:

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
  text-align: center;
} 
</style>
</head>
<body>

<p>Hello World!</p>
<p>这些段落是通过 CSS 设置样式的。</p>

</body>
</html>



在此例中,所有 <p> 元素都将居中对齐,并带有红色文本颜色:

 

CSS 选择器

CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。

我们将 CSS 选择器分为五大类:

  • 1>简单选择器(根据名称、id、类来选取元素)

  • 2>组合器选择器(根据它们之间的特定关系来选取元素)

  • 3>伪类选择器(根据特定状态选取元素)

  • 4>伪元素选择器(选取元素的一部分并设置其样式)

  • 5>属性选择器(根据属性或属性值来选取元素)


CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

如:

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是!</p>
<p>还有我!</p>

</body>
</html>


此上代码页所有的 <p> 元素都将居中对齐,并带有红色文本颜色




CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。

元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!

如:

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

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>

</body>
</html>




此上代码中 CSS 规则将应用于 id="para1" 的 HTML 元素

 id 名称不能以数字开头



CSS 类选择器

如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。

类选择器选择有特定 class 属性的 HTML 元素。

如:

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

 

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>

</body>
</html>



上面代码中,所有带有 class="center" 的 HTML 元素将为红色且居中对齐

 

 

可以指定只有特定的 HTML 元素会受类的影响

下面例子中,只有具有 class="center" 的 <p> 元素会居中对齐“

如:

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

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落将是红色并居中对齐的。</p>

</body>
</html>



 

HTML 元素也可以引用多个类,下面例子中,<p> 元素将根据 class="center" 和 class="large" 进行样式设置:

如:<p class="center large">这个段落引用两个类。</p>

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}
p.large {
  font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">这个标题不受影响</h1>
<p class="center">本段将是红色并居中对齐。</p>
<p class="center large">本段将是红色、居中对齐,并使用大字体。</p>

</body>
</html>



注意:类名也不能够数字开头!

 

CSS 通用选择器

通用选择器(*)选择页面上的所有的 HTML 元素。

下面的 CSS 规则会影响页面上的每个 HTML 元素,如:

* {
text-align: center;
color: blue;
}

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>页面上的每个元素都会受到样式的影响。</p>
<p id="para1">我也是!</p>
<p>还有我!</p>

</body>
</html>


CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

最好对选择器进行分组,以最大程度地缩减代码。

如需对选择器进行分组,请用逗号来分隔每个选择器

请看下面的 CSS 代码(h1、h2 和 p 元素具有相同的样式定义):

如:

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

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

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

 

下面例子中,我们对上述代码中的选择器进行分组:

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>更小的标题</h2>
<p>这是一个段落。</p>

</body>
</html>



所有简单的 CSS 选择器

选择器例子例子描述
.class.intro选取所有 class="intro" 的元素。
#id#firstname选取 id="firstname" 的那个元素。
**选取所有元素。
elementp选取所有 <p> 元素。
element,element,..div, p选取所有 <div> 元素和所有 <p> 元素。

 

演示说明:


<!DOCTYPE html>
<html>
<head>
<style>
body {
	  background-color: lightblue;  /*背景为浅蓝色*/
}
h1 {
  color: white;           /*标题字为白色*/
  text-align: center;   /*标题居中显示*/
  font-size: 30px;       /*标题字体大小*/
}
p {
  color: red;           /*段落字体为红色*/
  text-align: life;    /*对齐方式为左*/
  font-size: 20px;   /*段落字体大小*/
} 
</style>
</head>
<body>


<h1>Hello World!<br/>我的一个 CSS 实例,这是一个标题</h1>
<p>这些段落是通过 CSS 设置样式的。</p>

</body>
</html>


扫描二维码推送至手机访问。

版权声明:本文由uuucd.cn发布,如需转载请注明出处。

本文链接:https://www.uuucd.cn/css/41.html

标签: css相关

相关文章

利用css隐藏元素的5种方法之[Display属性简介]

利用css隐藏元素的5种方法之[Display属性简介]

用 CSS 隐藏页面元素有许多种方法。但是每个方法之前是存在着细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法。你可以将 将 visibility 设为 hidden、将 display 设为 none、opacity 设为 0、...

Css 及 Html5之初学者基础教程[前端语言基础]

Css 及 Html5之初学者基础教程[前端语言基础]

前端语言基础:HTML5 & CSS(一) HTML5:超文本标记语言1) :基本概念Ω是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )Ö这些标签以<标签名称>的形式出现,用于标记...

三剑客实战之Css入门基础知识[css控制颜色]

三剑客实战之Css入门基础知识[css控制颜色]

css中,控制指定颜色是通过使用预定义的颜色名称,或 RGB、HEX、HSL、RGBA、HSLA 值,在 CSS 中,可以使用颜色名称来指定颜色,CSS/HTML 支持 140 种标准颜色名。CSS 文本颜色下面是简单设置文本的颜...

三剑客实战之Css入门基础知识[CSS 背景属性定义]

三剑客实战之Css入门基础知识[CSS 背景属性定义]

CSS 背景属性:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position background-color...

 三剑客实战之Css入门基础知识[css边框属性教程一]

三剑客实战之Css入门基础知识[css边框属性教程一]

CSS 边框属性关键词:borderborder 属性允许您指定元素边框的颜色和宽度以及样式。CSS 边框样式关键词:border-style border-style 属性作用于指定显示的边框外观类型。可以设置一到四个值(用于上...

三剑客实战之Css入门基础知识[css边框属性教程二]

三剑客实战之Css入门基础知识[css边框属性教程二]

CSS 圆角边框关键词:border-radius 用于向元素添加圆角边框关键代码及举例:p { border: 3px; solid red;/*普通边框*/ } p ...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。