CSS教程第一篇 - 简介/语法/创建方式/基础选择器

标签: css  css3

博主个人主页

前言

大家好哦 在之前我已经写完了 HTML4和HTML5的教程哦 那么这一期的就是我们的CSS3啦 会先从CSS2讲 到后面会过渡到CSS3 一点一点慢慢来哦 记得总结做笔记~

我们首先来说一下CSS是个什么东东相信应该有很多人应该私下都去百度过了吧

下面是CSS3教程的整体大纲哦

其中 1 2 3 4 的标记代表需要掌握程度 1 最重要 4 了解即可
在这里插入图片描述

通过上图呢 我们可以了解到CSS需要学习的内容了 还是非常多的哈~ 好好努力哦~

开发

什么是CSS?

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

上面是百度百科的解释

其实呢 CSS就是给我们HTML化妆的 在我们讲解html的时候无论是HTML4还是HTML5都是一些标签内容 呈现出来的界面不是特别的好看 那么通过即将学习的CSS的话就可以让我们的HTML标签变得异常好看~ 这是最直白的解释了 也是我们web表现层的一个重要技术点 所以作为一个基础的前端入门课程 我们是很有必要掌握的哦~

语法

CSS的语法都是一样的基本上就是在 {} 内部编写对应的属性

示例

body{
	 background:red;
}

就都是类似上面的语法编写即可

使用方式

一般来说CSS又三种使用方式

第一种

行内的方式

通过在标签上加入style属性来设置样式

<p style="color:red">字体</p>

第二种

内部的方式

通过style标签来定义样式

<style>
	 body{
      	   background:red;
      }
</style>

第三种

外部方式

外联的形式 通过 link 标签来引入css样式表 css样式文件的后缀名是css

<link rel="stylesheet" href="index.css"/>

优先级

行内样式 > 内部样式 > 外部样式

基础选择器

ID选择器

通过在HTML标签中加入id属性 通过CSS就可以选取到这个标签进行样式的设置

通过 # 来引用

<style>
	  #id{
	           color:red;
		}
</style>

<p id="id">文本</p>

类选择器

通过在HTML标签中加入class属性 通过CSS就可以选取到这个标签进行样式的设置

通过 . 来引用

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

<p class="con">文本</p>

标签选择器

通过 标签名 来引用

<style>
	  p{
	           color:red;
		}
</style>

<p>文本</p>

优先级

ID选择器 > 类选择器 > 标签选择器

如果在某一个样式中加入了 !important 的话 那么他的优先级是最高的

结语

今天就到这里了~ 说了CSS的基本使用。

原文链接:加载失败,请重新获取