您的位置: 首页  >  文章  >  CSS学习，常用常记（选择器，样式表，设置背景）

CSS学习，常用常记（选择器，样式表，设置背景）

分类: 文章 • 2024-06-25 10:14:04

id 选择器

  • id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  • HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
  • ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>菜鸟教程(runoob.com)</title> 
	<style>
	#para1{
		text-align:center;
		color:red;
	} 
	</style>
</head>

<body>
	<p id="para1">Hello World!</p>
	<p>这个段落不受该样式的影响。</p>
</body>
</html>

class 选择器

  • class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
  • class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示；
  • 也可以指定特定的HTML元素使用class。p.center
<!DOCTYPE html>
<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>

如何插入样式表

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

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)
<link rel="stylesheet" type="text/css" href="mystyle.css">

不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" ；

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
<p style="color:sienna;margin-left:20px">内联样式段落</p>

多重样式优先级（详细）

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

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

  • 1. 内联样式表的权值最高 1000；
  •  2. ID 选择器的权值为 100
  •  3. Class 类选择器的权值为 10
  •  4. HTML 标签选择器的权值为 1

CSS 优先级法则：

  •  A 选择器都有一个权值，权值越大越优先；
  •  B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
  •  C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
  •  D 继承的CSS 样式不如后来指定的CSS 样式；
  •  E 在同一组属性设置中标有“!important”规则的优先级最大；

CSS学习，常用常记（选择器，样式表，设置背景）

CSS 背景

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

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

  • 十六进制 - 如："#ff0000"
  • RGB - 如："rgb(255,0,0)"
  • 颜色名称 - 如："red"

body，h1，div，p，a；

body{
	background-image:url('paper.gif');
	background-repeat:repeat-x;<!--仅在水平方向平铺-->
	background-color:#cccccc;
}
  • 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
  • 一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调；
  • 如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些

 

  • repeat-x：仅在水平方向平铺；
  • repeat-y：仅在竖直方向平铺；
  • no-repeat：背景图片只显示一次；

 

  • 背景图像与文本在同一个位置，为了排版合理，不影响阅读，我们可以改变图像的位置。
  • 可以利用 background-position 属性改变图像在背景中的位置
body{
	background-image:url('img_tree.png');
	background-repeat:no-repeat;
	background-position:right top;
	margin-right:200px;
}

背景- 简写属性

  • 在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
  • 为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
  • 背景颜色的简写属性为 "background"
body{
	background:#ffffff url('img_tree.png') no-repeat right top;
	margin-right:200px;
}
body{
	background-image:url('smiley.gif');	
	background-repeat:no-repeat;
	background-attachment:fixed;<!--图片固定，默认为滚动-->
}

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

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

相关推荐