了解Web前端3-CSS层叠样式表

CSS样式层叠表

    • 1.CSS 概述
    • 2.属性选择器
      • 2.1属性选择器
      • 2.2属性和值选择器
      • 2.3属性和值的选择器 - 多值
    • 3.类和ID选择器
      • 3.1ID选择器
      • 3.2类选择器
      • 3.3为特定元素使用class

1.CSS 概述

CSS是一种标记语言,Cascading Style Sheets,用于为HTML文档定义布局。

CSS改变样式需要明确:改变谁,改什么,怎么改

告诉CSS改变谁就需要用到选择器,如ID选择器是通过ID来选择标签,然后告诉CSS改变这个标签的什么属性,最后指定这个属性的属性值。

2.属性选择器

通过属性来选择标签,这些属性既可以是标准属性(如input标签中的type属性),也可以是自定义属性。

2.1属性选择器

下面的例子是把包含标题(title)的所有元素变为蓝色:

[title] {  
  color:blue;
 }

2.2属性和值选择器

下面的实例改变了标题title='runoob’元素的边框样式:

[title=runoob] {    
	border:5px solid green;
}

2.3属性和值的选择器 - 多值

下面是包含指定值的title属性的元素样式的例子,使用(~)分隔属性和值:

只要属性的值里面包含hello这个值就生效。

[title~=hello] { 
	color:blue; 
}

exp:


<html>
<head>
<meta charset="utf-8"> 
<title>测试title>  
<style>
[title~=hello]
{
	color:blue;
} 
style>
head>

<body>
<h2>将适用:h2>
<h1 title="hello world">Hello worldh1>
<p title="student hello">Hello CSS students!p>
<hr>
<h2>将不适用:h2>
<p title="student">Hi CSS students!p>
body>
html>

输出:


测试

将适用:

Hello world

Hello CSS students!


将不适用:

Hi CSS students!


3.类和ID选择器

3.1ID选择器

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

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

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

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

注:HTML页面中的ID都必须唯一,所以一个ID选择器只能生效一次。

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

3.2类选择器

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

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

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

.center {
	text-align:center;
}

exp:


<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)title> 
<style>
.center
{
	text-align:center;
}
style>
head>

<body>
<h1 class="center">标题居中h1>
<p class="center">段落居中。p> 
body>
html>

输出:


菜鸟教程(runoob.com)

标题居中

段落居中。


3.3为特定元素使用class

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

p.center {
	text-align:center;
}

exp:


<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)title> 
<style>
p.center
{
	text-align:center;
}
style>
head>

<body>
<h1 class="center">这个标题不受影响h1>
<p class="center">这个段落居中对齐。p> 
body>
html>

输出:


菜鸟教程(runoob.com)

这个标题不受影响

这个段落居中对齐。


markdown对HTML支持不太友好哈。

你可能感兴趣的:(python,css)