CSS学习笔记

CSS学习笔记

一.CSS简介

1.什么是CSS

CSS:Cascading Style Sheet层叠样式表

是一组样式设置规则,用于控制页面的外观样式

2.为什么使用CSS

  • 实现内容与样式的分离
  • 样式复用,便于维护
  • 页面的精确控制,是页面更精美

3.CSS的作用

  • 页面外观美化
  • 布局和定位

二.CSS的基本用法

1.CSS基本语法

<head>
	<style type="text/css">
		<!--这里是css代码 -->
	</style>
</head>
  • 选择器:要修饰的对象(元素)
  • 属性名:要修饰对象的哪一个属性
  • 属性值:要修饰对象属性的效果

2.CSS应用方式

也称CSS的引用方式:

  • 内部样式

    <head>
	<style type="text/css">
		<!--这里是css代码 -->
	</style>
</head>

  • 行内样式

    <body>
	<h1 style="<!--这里是css代码 -->">Hello</h1>
</body>

  • 外部样式

    • link标签

      他表示链接,不会合并代码

    <head>
	<link rel="stylesheet" type="text/css" href="<!--这里是css文件路径 -->" />
</head>

    • @import指令 (很少使用)

      他表示导入,代码合并在本文件中

    <head>
	<style type="text/css">
		@import "<!--这里是css文件路径 -->";
		@import url(<!--这里是css文件路径 -->);
	</style>
</head>

三.CSS选择器

1.基础选择器

1.1标签选择器

也成为元素选择器,使用HTML标签作为选择器名称,它是以标签名作为应用依据的.

1.2类选择器

使用自定义名称,以.号作为前缀,然后通过HTML标签的class属性调用类选择器,它是以class属性作为应用依据的.

注意事项:

  • 调用时只写类名,不加.
  • 同时调用多个类选择器以空格隔开
  • 类选择器不能以数字开头

1.3ID选择器

使用自定义名称,以#号作为前缀,然后通过HTML标签的id属性进行应用匹配

它是以id作为应用依据,是一一对应关系.

2.复杂选择器

2.1复合选择器

同时使用两个或两个以上的选择器,即为复合选择器.

2.2组合选择器

也称为集体声明,将多个具有相同样式的选择器发在一起声明,用逗号隔开

2.3嵌套选择器

在某个选择器内再设置选择器即为嵌套选择器,嵌套时用空格隔开

只有满足层次关系的最内部选择器才能应用样式

注:使用空格时不区分父子还是后代,使用CSS3中新增的>时必须是父子关系才可以应用样式

未完待续...

posted @ 2020-03-06 11:10  Cikaros  阅读(160)  评论(0)    收藏  举报