Css基础(1)

Day03 Css基础1

一、Css基础知识

什么是css?
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML
或XML(标准通用标记语言的一个子集)。等文件样式的计算机语言。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素
进行格式化。

层叠样式表 --- 核心关键词

  • 样式表:负责美化
  • 层叠:样式不会被干掉而只会被覆盖

二、Css的使用方式

Css有三种使用方式。分别是在标签中使用Style属性、使用Style标签和建立一个.Css文件。

<!-- 使用css第一种方式  在标签中使用"style属性" -->
<!-- color:red ;改变字体颜色 -->
<h1 style="color:red;">Hello,World</h1>
<!-- css第二种使用方式 使用"style标签" -->
<style>
	/*css注释*/
	/*css选择器 */
	p {
		color: blue;
	}
</style>
<!--第三种方式直接建立css文件后直接在文件中写css语句 -->

三、Css选择器

Css有三种选择器,分别是html标签选择器,class选择器和id选择器。这三种选择器均有各自的优缺点,在编写代码时需综合情况合理选择适合的选择器。

三种选择器的语法如下所示:

<style>
/*html标签选择器 ,直接选择html标签,他可以作用于文件中所有相同的标签,也因为这个他不够精确。*/
	p {
		color: red;
	}

	h6 {
		color: blue;
	}

	/*id选择器,此时id名为d1,作用于唯一的id*/
	#d1 {
		color: green;
	}

	/*class选择器*/
	/*class可以重复使用,多个class之间用空格隔开,此时class名为e1。作用于相同class的标签*/
	.e1 {
		color: blue;
	}
</style>

当三种选择器发生冲突时,我们遵循的原则是:
谁更精确就听谁的

如:

<style>
/*谁更精确就听谁的*/
	div {
		color: blue;
	}

	#test {
		color: green;
	}

	.d1 {
		color: red;
	}
</style>

在html body内有一个p标签:

<body>
<p class="d1" id="test">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</p>
</body>

大家可以先预测一下之后运行代码核实一下。

四、通配符

通配符使用星号*表示,意思是“所有的”。他会选择页面中所有标签。

<style>
	* {
		/*通配符 选择网页中的所有标签*/
		color: red;
	}
</style>

五、div&Span标签

div和span都是无意义标签。

<div>标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素,以便通过 CSS来对这些元素进行格式化。主要是用来切割。

<span> 用于对文档中的行内元素进行组合。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。主要是针对于跨度。

通常用这两个标签来对网页进行模块划分。

<div>我是div标签</div>
<span>我是span标签</span>
posted @ 2017-06-26 08:25  Itssyuu  阅读(142)  评论(0编辑  收藏  举报