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

已于 2024-06-15 11:55:21 修改
阅读量452 收藏
点赞数 1
分类专栏： 笔记 文章标签： css 前端
于 2020-09-18 22:44:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46800546/article/details/108673844
版权

文章目录

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>

在这里插入图片描述

今天你头秃了吗33
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS 引入字体
exlinker的博客
07-18 1万+
文章目录涉及知识@font-face特点用法属性解析font-family用法简单应用更多应用网络/本地引入本地引入网络引入引入其他格式字体引入系列字体 涉及知识 @font-face @font-face 定义一个用于文本显示的自定义字体。详细内容可以参考 MDN文档 。 特点 可以自定义字体名称和与名称对应的字体文件 可以消除用户对电脑字体的依赖 可以用于字体图标的引入 用法 @font-face { font-family: "myFont"; src: url("/fonts/OpenS
css教程 school,CSS 教程
weixin_42437984的博客
08-04 564
CSS教程简介本教程主要描述如何通过CSS来大大提升网页开发的工作效率！在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。本 CSS 教程包含了数百个CSS在线实例，通过本站的在线编辑器，你可以在线编辑CSS,并且可以在线查看修改后的效果。温馨提示：如果您想通过边学边练的方式学习CSS，那么请您移步CSS微课！如果您觉得CSS的学习难度较高，不易理解，建议您采用视频...
css引入字体
最新发布
2301_78916954的博客
11-08 393
字体能从远程服务器或者用户本地安装的字体加载,字体会使用 url() 函数下载的资源。@font-face 规则允许您引入外部字体文件.
W3school和W3Cschool的区别
weixin_54626591的博客
07-10 2929
W3school和W3Cschool的区别
w3shool html上传文件,文件上传
weixin_30089411的博客
06-10 147
文件上传Spring MVC下的处理是类似的。下面展示一个简单的实现。项目结构与源码web.xmlcontextConfigLocation/WEB-INF/applicationContext.xmlorg.springframework.web.context.ContextLoaderListenerdispatcherorg.springframework.web.servlet.Disp...
w3shool CSS 教程
01-31
通过使用 CSS 来提升工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。
W3shool5.0+css3.0参考手册+W3CJavascript.
09-05
《W3School 5.0 + CSS3.0 参考手册 + W3C JavaScript》是一份详尽的网页开发指南，涵盖了HTML、CSS3.0以及JavaScript这三种核心技术，对于网页设计师和开发者来说，是不可或缺的学习和参考资料。这份手册的重要性...
j2ee javascript css w3shool jdk html帮助文档六合一.rar
03-17
这是一份集大成的开发资源合集，包含了“j2ee”、“javascript”、“css”、“w3school”、“jdk”以及“html”的帮助文档，对于任何致力于Java Web开发的学习者或专业开发者来说，都是不可或缺的知识库。...
W3School手册.rar
07-04
《W3School手册》是一个非常宝贵的资源，它涵盖了前端开发中的核心技术和概念，包括HTML、CSS、Ajax以及JavaScript。这个CHM（Compiled HTML Help）文件是开发者和学习者的重要参考资料，提供了详尽的教程和实例，...
W3C School教程（离线版）.zip
05-09
**W3C School教程（离线版）**是为那些希望深入学习网页开发技术的人们提供的一款宝贵资源。这个压缩包包含了一个`.CHM`（ Compiled Help Manual）文件，它是微软帮助系统的离线版本，提供了丰富的HTML、CSS、...
W3C School本地
10-02
W3C School本地 PHP
W3shool离线手册
12-27
W3shool最新离线手册，是学习web开发的较好电子教材，该教材包括web前端开发、服务器端开发、以及网站发布等内容，非常值得拥有。
w3shool HTML 教程
01-31
HTML 教程 在本教程中，你将学习如何使用 HTML 来创建站点。 HTML 很容易学习！你会喜欢它的！
w3shool全部教程
07-31
为初学者提供的全面学习资料，简洁、明了。
PHP 字符串
zhiming_817的专栏
03-13 96
字符串变量用于存储并处理文本片段。 PHP 中的字符串 字符串变量用于包含字符串的值。 在本教程中，我们打算介绍几个在 PHP 中用于操作字符串的最常用的函数和运算符。 在创建字符串之后，我们就可以对它进行操作了。您可以直接在函数中使用字符串，或者把它存储在变量中。 在下面，PHP 脚本把字符串 "Hello World" 赋值给名为 $txt 的字符串变量： &lt;?p...
CSS3基础——选择器（基于w3c school）
qq_43335204的博客
10-25 472
属性选择器 [abc^=“def”] 选择 abc 属性值以 “def” 开头的所有元素 [abc$=“def”] 选择 abc 属性值以 “def” 结尾的所有元素 [abc*=“def”] 选择 abc 属性值中包含子串 “def” 的所有元素 :root 选择器匹配文档根元素。 在 HTML 中，根元素始终是 html 元素。 结构性伪类选择器 not：选择除某个元素之外的所有元...
【安利】推荐几个学习SQL语句的网站
橙乐果果
12-26 4823
1.W3shool 个人感觉3shool相当于一个字典，语法基础、函数都可以一一找到，也很适合刚刚入门的同学 link：https://www.w3school.com.cn/sql/index.asp 2.XUESQL 由浅入深的介绍所有有关SQL的知识, 每一个章节是一组相关的SQL知识点; 并且会配备一组动手练习任务。 这个网站特别适合学完某种知识就想马上动手...
css引入外部字体
qq_45350116的博客
04-18 2948
css引入外部字体
一个 XSD 实例 解析
小方的专栏
11-15 1434
 http://www.w3school.com.cn/schema/schema_example.asp 本节会为您演示如何编写一个 XML Schema。您还将学习到编写 schema 的不同方法。XML 文档让我们看看这个名为 "shiporder.xml" 的 XML 文档：<shiporder orderid="889923"xmlns:xsi="ht
网页设计基础-11CSS的应用2.pdf
05-26
网页设计基础-11CSS的应用2.pdf

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值