CSS 是一种描述 HTML 文档样式的语言。

一、CSS选择器(在这里只列举几种最常用的)

1、CSS元素选择器

元素选择器根据元素名称来选择 HTML 元素。

例如：页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色：

p {text-align: center;color: red;
}

2、CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

例如：这条 CSS 规则将应用于 id="para1" 的 HTML 元素：

#para1 {text-align: center;color: red;
}

注意：id 名称不能以数字开头。

3、CSS类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

例如：在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：

.center {text-align: center;color: red;
}

4、通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

例如：下面的 CSS 规则会影响页面上的每个 HTML 元素

* {text-align: center;color: blue;
}

选择器优先级：id>class>tag(标签)

二、CSS标签

1、块标签

div、h1~h6、p、ul、ol、li、article、section、aside、nav、header、footer

特点：独占一行，默认宽度占满父级，高度为0，子级内容撑开高度。

2、行标签

span、a、i、b、sub、sup、em、strong

特点：同排序跟显示，遇到父级边界换行；不支持宽高，内容撑开宽高；不支持上下外边距；不正常显示上下内边距；换行被解析。

3、行块标签

img

特点：同排序跟显示，遇到父级边界换行；没有宽高的时候内容撑开宽高；换行被解析。

三、三种使用CSS的方式

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

外部 CSS
内部 CSS
行内 CSS

1、外部 CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

实例

外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body><h1>This is an apple.</h1>
<p>This is a pen.</p></body>
</html>

2、内部 CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

实例

内部样式在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: linen;
}h1 {color: maroon;margin-left: 40px;
}
</style>
</head>
<body><h1>This is an apple.</h1>
<p>This is a pen.</p></body>
</html>

3、行内 CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

实例

行内样式在相关元素的 "style" 属性中定义：

<!DOCTYPE html>
<html>
<body><h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p></body>
</html>

最后，奉上思维导图

CSS基础及常用的一些标签相关推荐

初识HTML（四）进阶：CSS基础、常用属性
文章目录什么是css? css语法定义 css实例背景属性 opacity属性文本属性链接样式行标签与块标签 border边框 margin外边距 padding填充前言: 本章节将学习到 ...
HTML基础：常用文本格式化标签（换行，加横线，加粗，斜体字等）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.常用文本格式化标签二.演示 1.代码演示 2.效果演示总结前言 HTML 使用标签 <b>(&q ...
基础html交代选择器,html/css基础(html常用标签与css选择器)-2019年1月14号22时45分
实例序号名称价格数量用途 1暖手宝301被窝太冷2笔记本电脑50001学习php3别墅2000万1结婚用运行实例 » 点击 "运行实例" 按钮查看在线实例五:表单 (1)表单 ...
HTML与CSS基础之常用选择器(一)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>常用选 ...
Html与CSS基础知识篇（HTML标签语法篇）
HTML和CSS的关系学习Web前端开发基础技术需要掌握:Html.CSS.JavaScript语言.下面我们大致了解一下这三门技术都用来实现什么: (1)HTML是网页内容的载体.内容就是网页制作 ...
HTML+CSS基础（2）-HTML标签的简单介绍和网页注释
标签的语法和基本规则 1.语法"<xxx></xxx>",英文的"<>"将标签括起来,如例1.  ...
CSS学习笔记(一) CSS基础+CSS3新特性
思维导图文章目录思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
css基础，盒子模型，选择器与权重
1.css基础 1.1css简介 css(叠层样式表)是一种标记语言 1.1.1css语法规则选择器加声明 <style>/* 选择器{样式} *//* 给谁改样式{改什么样式} */p ...
前端基础：html基础(css基础和JavaScript基础)/01/B/S网络结构，html文件结构，html标签格式，lt;bodygt;中的一些常用标记
前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,<body>中的一些常用标记 html:超文本标记语言(非编程语言 ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...

CSS基础及常用的一些标签