CSS学习笔记－－基础（一）-前端--易笔记-weiyer.com

　　核心提示：一、认识CSSCSS的全称为“层叠样式表（Cascading Style Sheets）”，主要用于定义HTML内容在浏览器的显示样式。比如：文字的大小、颜色、字体大小、字体粗细等。p{font-si...

一、认识CSS

CSS的全称为“层叠样式表（Cascading Style Sheets）”，主要用于定义HTML内容在浏览器的显示样式。比如：文字的大小、颜色、字体大小、字体粗细等。

p{
font-size:12px;
color:red;
}

使用CSS的一个好处就是通过定义某个样式，在网页的不同地方使用到该样式之后，就会在不同的地方显示相同的效果。另一个好处则是：定义一次，即可在其它地方拥有一样的效果，大大简化了代码。

<!DOCTYPE html>

<html>

<style type="text/css">
       span{
       color:red;
       }
</style>

<head>

<title>CSS使用的好处</title>

<style type="text/css">

span{color: red;}

</style>

</head>

<span style="font-family: Arial, Helvetica, sans-serif;"><body></span>

<p>

使用<span>CSS</span>的一个好处就是通过定义某个样式， 在网页的不同地方使用到该样式之后， 就会在不同的地方显示<span>相同的效果</span>。 另一个好处则是： 定义一次， 即可在其它地方拥有一样的效果，大大<span>简化了代码</span>

</p>

</body>

</html>

这段代码的效果如下：

CSS学习笔记－－基础（一）

我们可以看到， CSS极大的简化了代码，如果我们不使用CSS，就需要在每个<span>标签中把代码都写一遍，另外，只要需要显示红色的效果，我们就可以在想要使用此效果的地方，直接使用该标签就好了。是不是很方便呢？？

那么，我们看看CSS的语法： CSS样式由选择符和声明组成，而声明又由属性和值组成：

CSS学习笔记－－基础（一）

选择符：又称选择器，指明网页中要应用样式规则的元素；

声明：在英文大括号“{ }”中的部分就是声明，声明又由属性和值组成，属性和值之间使用冒号(:) 分割开来，当有多条声明时，每条声明之间使用分号(;)分割开来。

例如：

<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHByZSBjbGFzcz0="brush:sql;">p{ color:red; font-size:12px; }
需要注意的是：

1.最后一条声明，或者该样式中只有一条声明时，分号（;）可以不写，但为了美观和便于修改，书写代码时都会加上；

2.为了便于阅读，我们会将每一条声明单独写一行，如上代码；

CSS的三种写入样式：内联式、嵌入式、外部式

根据CSS样式的书写位置，我们将CSS的样式写入分为：内联式、嵌入式、外部式三种

1.内联式：把CSS代码直接写在HTML标签中，如下代码：

<p style="color:red">设置红色文字</p>

需要注意的是，内联式CSS样式需要写在style=" " 的双引号中，多个CSS样式可以写在一起，之间也使用分号（;）隔开；

<p style="color:red ;  font-size:12px">这是内联式多个样式设置</p>

2.嵌入式：把代码写在<style type="text/css"></style>标签之间，如下代码：

<style type="text/css">
span{
    color:red;
}
</style>

需要注意的是：嵌入式CSS样式必需写在标签<style type="text/css"></style>中，而<style></style>标签，一般放在<head></head>标签中。

3.外部式：写在一个单独的文件中，这个文件以".css"为扩张名存储，在<head></head>标签內使用<link>标签将CSS文件链接到HTML文件內，代码如下：

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

需要注意的是：css样式文件名称以有意义的英文字母命名；

rel="stylesheet" type="text/css" 是固定的写法，不可以修改

内联式、嵌入式、外部式三种CSS样式的优先级

对于使用同一个元素同时使用了三种方法设置CSS样式，最终会显示哪个效果呢？这里就需要优先级来解答。

优先级顺序：内联式 > 嵌入式 > 外部式

虽然我们做了优先级的排序，但是需要注意的是：嵌入式 > 外部式需要一个前提：嵌入式的位置一定要在外部式的后面。因此我们也不难看出，三种顺序的先后顺序总结起来只有一个：那就是－－在权值相同的情况下，使用就近原则（离被设置的元素越近优先级就越高）。

CSS中的选择器

每一条CSS样式声明由两部分组成，形式如下：

选择器{

样式;

}

在大括号({ })之前的部分就叫做选择器，选择器指明了大括号（{ }）的样式的作用对象，也就是CSS样式作用于网页中的哪些元素。标签选择器其实就是html大码中的标签。

1.类选择器

类选择器在CSS样式编码中是最常用到的。语法如下：

.类选择器名称{css样式代码;}

需要注意的是：1.是以英文形式的圆点( . ) 开头的

2.类选择器大的名称可以随意起，但要注意不要使用中文

类选择器的使用方法：

1.使用合适的标签把要修饰的内容标记出来；如：<span>hello</span>

2.使用class="类选择器名称"为标签设置一个类；如：<span class="选择器名称"> hello </span>

3.设置类选择器的样式，如： .spanstyle { color: red; }

2.ID选择器

ID选择器和类选择器类似，但以井号（#）开始。语法如下：

#ID选择器名称{CSS样式代码;}

ID选择器的使用：

1.ID选择器使用时，为标签设置 id＝" ID选择器名称"，而不是class＝ “类选择器名称”;如：<span id="ID选择器名称"> hello </span>

2.ID选择器的声明是以井号（#）号开始，而不是点(.)

3.类选择器与ID选择器的额异同点对比

1.相同点：可以应用于任何元素

2.不同点：

1> ID选择器只能在文档中使用一次。在一个html文档中，ID选择器只能使用一次，而且仅一次，而类选择器则可以使用多次。

例如下面的代码是正确的：

<p>ID选择器<span class="stress">只能在文档中使用一次</span>。在一个html文档中，ID选择器只能使用一次， 而且仅一次， 而类选择器则可以<span class="stress">使用多次</span>。</p>

而下面的代码则是错误的：

<p>ID选择器<span id="stress">只能在文档中使用一次</span>。在一个html文档中，ID选择器只能使用一次， 而且仅一次， 而类选择器则可以<span id="stress">使用多次</span>。</p>

2> 可以使用类选择器词列表方法为一个元素同时设置多个样式。ID选择器则不可以实现（不能使用ID词列表）。

如下代码是正确的：

.stress{
    color:red;
}

.fontsize{
   font-size:30px;
}

<p>ID选择器只能在文档中使用一次。在一个html文档中，ID选择器只能使用一次， 而且<span class="stress fontsize">仅一次</span>， 而类选择器则可以使用多次。</p>

下面的代码则是不正确的：

#stress{
    color:red;
}

#fontsize{
    font-size:30px;
}

<p>ID选择器只能在文档中使用一次。在一个html文档中，ID选择器只能使用一次， 而且<span id="stress fontsize">仅一次</span>， 而类选择器则可以使用多次。</p>

4.子选择器

子选择器即大于符号(>)，用于选择置顶标签元素的第一代子元素。如下代码：

.food>li{
    border:1px solid red;
}

这行代码会使class名为food下的子元素li 加入红色边框样式。如下代码和效果图：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.food>li{
	border:1px solid red;
}
</style>
</head>
<body>
<ul class="food">
 	<li>水果
 	<ul>
 		<li>苹果</li>
 		<li>香蕉</li>
 		<li>西瓜</li>
 	</ul>
 	</li>
 	<li>蔬菜
 	<ul>
 		<li>白菜</li>
 		<li>萝卜</li>
 		<li>生菜</li>
 	</ul>
 	</li>
 </ul>
</body>
</html>

效果图：

CSS学习笔记－－基础（一）

5.包含（后代）选择器

包含选择器，即加入空格，用于指定标签元素下的后辈元素。如下代码：

.first span{
color:red;
}

包含选择器与子选择器的区别：子选择器是指它的直接后代，或者可以理解为作用于他的第一代后代。而包含选择器是作用于元素的所有后代元素。后代选择器通过空格来进行选择，而子选择器通过大于（>）进行选择。

下面看看包含选择器的代码和效果：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.food li{
		border:1px solid red;
	}
	</style>
</head>
<body>
<ul class="food">
 	<li>水果
 	<ul>
 		<li>苹果</li>
 		<li>香蕉</li>
 		<li>西瓜</li>
 	</ul>
 	</li>
 	<li>蔬菜
 	<ul>
 		<li>白菜</li>
 		<li>萝卜</li>
 		<li>生菜</li>
 	</ul>
 	</li>
 </ul>
</body>
</html>

效果如下：

CSS学习笔记－－基础（一）

6.通用选择器

通用选择器是功能最强大的选择器。它使用一个（*）号指定，它的作用是匹配html中所有标签元素；代码如下

* {
    Color:red;
}

7.伪类选择符

伪类选择符允许给html不存在的标签（标签的某种状态）设置样式，比如给html中的一个标签元素的鼠标滑过状态设置字体的颜色：

a:hover{
    color:red;
}

关于伪类选择符，可以兼容所有浏览器的就是a标签上使用:hover。其实:hover可以放在任意的标签上，但兼容性不是很好，因此比较常用的还是a:hover的组合。

代码及效果：

<!DOCTYPE html>
<html>
<head>
	<title>伪类选择符</title>
	<meta charset="utf-8">
	<style type="text/css">
		a:hover{
			color: red;
			font-size: 20px;
		}
	</style>
</head>
<body>
<h1>关于伪类选择符</h1>
<p>
关于伪类选择符，可以兼容所有浏览器的就是a标签上使用:hover。 其实:hover可以放在任意的标签上， 但<a href="www.baidu.com">兼容性</a>不是很好， 因此比较常用的还是a:hover的组合。
</p>
</body>
</html>

正常情况下显示如下图：

CSS学习笔记－－基础（一）

当鼠标指向这几个字的时候，显示如下图：

CSS学习笔记－－基础（一）

8.分组选择符

分组选择器可以为html中的多个标签元素设置同一个样式。代码如下：

h1,span{

    color:red;
}

以上代码等价于以下的代码：

h1{
   color:red;
}

span {
    color:red;
}

CSS学习笔记－－基础（一）

时间：2016/7/29 9:48:40 点击：

本类热门

本类推荐

本类固顶

CSS学习笔记－－基础（一）

时间：2016/7/29 9:48:40 点击：

您可能感兴趣的文章

相关评论

发表我的评论

本类热门

本类推荐

本类固顶