文章目录

CSS简介
- CSS 概念
- CSS 作用
- CSS 语法
CSS引入方式
- 1.内联样式表
- 2.内部样式表
- 3.外部样式表
CSS常用样式
- CSS背景
- - 1.背景色：background-color
  - 2.背景图像：background-image: url();
  - 3.背景重复：background-repeat
  - 4.背景定位：background-position
  - 5.背景关联：background-attachment
- CSS文本
- - 1.缩进文本 text-indent
  - 2.水平对齐 text-align
  - 3.字间隔word-spacing
  - 4.字母间隔 letter-spacing
  - 5.字符转换 text-transform
  - 6.文本颜色 color
  - 7.行高 line-height
  - 8.对齐元素中的文本 text-align
- CSS字体
- - 1.指定字体系列 font-family
  - 2.字体风格 font-style
  - 3.字体加粗 font-weight
  - 4.字体大小 font-size
- CSS链接
- - 1.链接的状态
  - 2.去掉链接中的下划线：text-decoration
  - 3.背景色：background-color
- CSS轮廓
- - 1.轮廓 outline
  - 2.轮廓的颜色 outline-color
  - 3. 轮廓的样式 outline-style
  - 4.轮廓的宽度 outline-width
- CSS表格
- - 1.表格边框 border
  - 2.单线条边框 border-collapse
  - 3.**表格宽度和高度** width 和 height
  - 4.水平对齐方式 text-align
  - 5.表格内边距 padding
  - 6.表格颜色 background-color; color
CSS常用选择器
- 1.标签选择器（元素选择器）
- 2.类选择器 .
- 3.ID 选择器
- 4.子选择器

CSS简介

CSS 概念

CSS称之为层叠样式表或级联样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。

CSS 作用

CSS以HTML为基础，提供了丰富的功能，而且还可以针对不同的浏览器设置不同的样式。CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS 语法

CSS语法由两个主要的部分构成：选择器，以及一条或多条声明。每条声明由一个属性和一个属性值组成。简单来说一个样式的语法是由三部分构成：选择器、属性和属性值。
例如：

h1:{color:red;font-size:30px;}

CSS引入方式

1.内联样式表

内联样式表也称之为行内样式表、行间样式表。内联样式表是把CSS代码和HTML代码放在同一个文件中。如果要使用内联样式，需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。
语法：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ">内容</标签名>
示例：

<!DOCTYPE html>
<html><head><title>内联样式表</title></head><body><h1 style="color:red;">我是内联样式表，也可以称我为行内样式表、行间样式表</h1></body>
</html>

2.内部样式表

内部样式表也称之为内嵌样式表，是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。
语法：

<!DOCTYPE html>
<html>
<head><title>内部样式表</title><style>选择器{属性1:属性值1;属性2:属性值2;}</style>
</head>
<body>
</body>
</html>

示例：

<!DOCTYPE html>
<html>
<head><title>内部样式表</title><style>p{color:pink;}</style>
</head>
<body><p>我是内部样式表，也叫内嵌式样式表</p></body>
</html>

3.外部样式表

外部样式表又称之为链入式或者外链式。所谓外部样式表就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。外部样式表的文件扩展名是.css，且文件中不能包含任何html标签。
语法：<head><link rel="stylesheet" type="text/css" href="1.css"></head>
示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><!--在HTML页面中引用文件名为index的css文件--><link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body><div></div>
</body>
</html>

CSS常用样式

CSS背景

1.背景色：background-color

示例：

<html>
<head><style type="text/css">body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}</style></head><body><h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p></body>
</html>

2.背景图像：background-image: url();

示例：

<html>
<head><style type="text/css">
body {background-image:url(/i/eg_bg_04.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif);}
a.radio {background-image: url(/i/eg_bg_07.gif);}
</style></head><body>
<p class="flower">我是一个有花纹背景的段落。<a href="#" class="radio">我是一个有放射性背景的链接。</a></p></body></html>

3.背景重复：background-repeat

注意：属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
示例：

<html>
<head><style type="text/css">
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat-y
}
</style></head><body>
</body>
</html>

4.背景定位：background-position

5.背景关联：background-attachment

示例：

```html
<html>
<head>
<style type="text/css">
body
{background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head><body>
<p>图像不会随页面的其余部分滚动。</p>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>
<p>G</p>
<p>H</p>
<p>I</p>
<p>J</p>
<p>K</p>
<p>L</p>
<p>M</p>
<p>N</p>
<p>O</p>
<p>P</p>
<p>Q</p>
<p>R</p>
<p>S</p>
<p>T</p>
<p>W</p>
<p>X</p>
<p>Y</p>
<p>Z</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</body></html>

CSS文本

1.缩进文本 text-indent

2.水平对齐 text-align

3.字间隔word-spacing

示例：

<html>
<head>
<style type="text/css">
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
</style>
</head><body>
<p class="spread">This is some text. This is some text.</p>
<p class="tight">This is some text. This is some text.</p>
</body>
</html>

4.字母间隔 letter-spacing

示例：

<html><head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head><body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body></html>

5.字符转换 text-transform

示例：

<html><head>
<style type="text/css">h1 {text-transform: uppercase}p.uppercase {text-transform: uppercase}p.lowercase {text-transform: lowercase}p.capitalize {text-transform: capitalize}
</style>
</head><body>
<h1>This Is An H1 Element</h1>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>
</body></html>

6.文本颜色 color

7.行高 line-height

8.对齐元素中的文本 text-align

CSS字体

1.指定字体系列 font-family

2.字体风格 font-style

normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示

示例：

<html>
<head>
<style type="text/css">
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
</style>
</head><body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body></html>

3.字体加粗 font-weight

4.字体大小 font-size

CSS链接

1.链接的状态

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

（注意次序规则：a:hover 必须位于 a:link 和 a:visited 之后；a:active 必须位于 a:hover 之后）

2.去掉链接中的下划线：text-decoration

3.背景色：background-color

CSS轮廓

1.轮廓 outline

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p
{border:red solid thin;
outline:#00ff00 dotted thick;
}
</style>
</head><body>
<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性。</p>
</body>
</html>

2.轮廓的颜色 outline-color

3. 轮廓的样式 outline-style

4.轮廓的宽度 outline-width

CSS表格

1.表格边框 border

示例：

<html>
<head>
<style type="text/css">
table,th,td
{border:1px solid blue;
}
</style>
</head><body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>

2.单线条边框 border-collapse

3.表格宽度和高度 width 和 height

4.水平对齐方式 text-align

5.表格内边距 padding

6.表格颜色 background-color; color

示例：

<html>
<head>
<style type="text/css">
table, td, th{border:1px solid green;}th{background-color:green;color:white;}
</style>
</head><body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>

CSS常用选择器

1.标签选择器（元素选择器）

示例：

<html>
<head>
<style type="text/css">
**html {color:black;}
p {color:blue;}
h2 {color:silver;}**
</style>
</head><body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落。</p>
</body>
</html>

2.类选择器 .

为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。
示例：

<html>
<head>
<style type="text/css">
**.important {color:red;}**
</style>
</head><body>
<h1 **class="important"**>This heading is very important.</h1><p **class="important"**>This paragraph is very important.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>...</p>
</body>
</html>

3.ID 选择器

示例：

<html>
<head>
<style type="text/css">
**#intro {font-weight:bold;}**
</style>
</head><body>
<p **id="intro"**>This is a paragraph of introduction.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>...</p>
</body>
</html>

4.子选择器

子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
示例：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
**h1 > strong {color:red;}**
</style>
</head><body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

CSS知识点整理(代码示例参考w3shool）（包括CSS概念语法作用、CSS引入方式、CSS背景、文本、字体、链接、轮廓、表格、常用选择器等）相关推荐

CSS样式笔记_背景文本字体链接
CSS背景属性: background:简写属性在一个声明中设置所有的背景属性.可以用于设置最底层的背景图片. background-attachment:属性设置背景图像是否固定或者随着页面的其余部 ...
css 动态rem_【面试题】CSS知识点整理(附答案)
目录伪类和伪元素实现固定宽高比(width: height = 4: 3)的div,怎么设置 CSS选择器 CSS解析规则 flex: 1 完整写法 display: none和 visibili ...
CSS精灵图代码示例
什么是css Sprite 当用户访问一个网站时,浏览器会向服务器发送一系列请求,比如说网页上的每张图像都需要经过一次请求才能最终展示给用户.然而,一个网页中往往包含大量的图像资源(例如在页面中展示的 ...
python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
简述在html中加入css方法,CSS引入方式 - CSS | 绿叶学习网
想要在一个页面引入CSS,共有以下3种方式. (1)外部样式表 (2)内部样式表 (3)行内样式表一.外部样式表外部样式表是最理想的CSS引入方式.在实际开发中,为了提升网站的性能速度和可维护性, ...
启明智显分享| ESP32学习笔记参考--PWM(脉冲宽度调制) 篇，配PWM控制 LED呼吸灯代码示例参考
提示:启明智显专为智能产品提供一站式彩屏显示+连接+云端服务+APP软件开发.维护等解决方案,帮厂商快速实现硬件的智能化.作为启明云端旗下方案公司,我们用心整理了开发小伙伴在开发过程中可能会遇到的问题 ...
CSS知识点整理(2):框模型，定位
1. 框模型:Box Model 规定了元素处理元素框处理元素内容.外边距.边框.内边距的方式. 2. 当边距给定的值可以小于4个.CSS定义了一些规则.处理这中情况: 如果缺少左外边距的值,则使用 ...
JDK1.8 邮戳锁(StampedLock)知识点整理以及示例
邮戳锁时JDK1.8版本后引入的一种锁机制,与ReentrantRead-WriteLock类似,该锁可以用于控制读写访问. public class StampeLock extends O ...
CSS简介、行内样式、内部样式、外部样式、注释、引入其他CSS文件
CSS的发展历程: 起初是没有css的,只有少量样式是可以写在html标签中,这样代码格外显得臃肿,此时CSS就出现了. 初识CSS: CSS(Cascading Style Sheets),被称为C ...

CSS知识点整理(代码示例参考w3shool）（包括CSS概念语法作用、CSS引入方式、CSS背景、文本、字体、链接、轮廓、表格、常用选择器等）