当前位置：首页 > 前端技术 > HTML >内容正文

HTML

前端css学习

发布时间：2025/4/5 HTML 42 豆豆

生活随笔收集整理的这篇文章主要介绍了前端css学习小编觉得挺不错的,现在分享给大家,帮大家做个参考.

写在前面：本文根据菜鸟教程学习整理而来

文章目录

CSS入门
- css简介
- - 什么是css
- css语法
- - css实例
- css Id和Class
- - id选择器
  - class选择器
- css创建
- - 外部样式表
  - 内部样式表
  - 内联样式
  - 多重样式
  - 多重样式优先级
- css background(背景)
- - 背景颜色
  - 背景图像
  - 背景-简写属性
- css文本属性
- - 文本颜色
  - 文本的对齐方式
  - 文本修饰
  - 文本转换
  - 文本缩进
- css字体
- - css字型
  - 字体系列
  - 字体样式和字体大小
  - css字体属性列表
- css链接
- css列表

CSS入门

css简介

什么是css

CSS(Cascading Style Sheets)是层叠样式表，定义如何显示html元素。

特点

样式通常存储在样式表中

把样式添加到html4.0中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在css文件内

多个样式定义可层叠为一个

css语法

css规则由两个主要部分构成：选择器和声明，声明可以有一条或者多条。

h1 {color:blue; font-size: 12px;}

选择器通常是需要改变样式的html元素，比如h1就是对最大的标题进行设置样式；每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（style attribute），每个属性有一个值，属性和值之间用冒号隔开。声明总是以分号结束。
对于上例，h1是选择器，大括号里面的是声明，这里有2个声明，分别是color: blue;和font-size:12px。每个声明由属性和值组成。

css实例

为了增强可读性，css可以每行只描述一个属性。css注释使用/**/

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试用例</title> <style> p {/*这是注释*/color:green;text-align:right; } </style> </head><body> <p>Hello World!</p> <p>一个跑者的心态：越是不想跑的时候，才要出去跑</p> <p>这个段落采用CSS样式化。</p> </body> </html>

测试结果

css Id和Class

如果要在html元素中设置css样式，需要在元素中设置id和class选择器。

id选择器

id选择器可以为标有特定id 的html元素指定特定的样式，html元素以id属性来设置id选择器，css中id选择器以“#”来定义。这其实是设定样式作用的范围。这里需要注意的是：

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

举例如下
下面id为para1的适用一种样式，id为para2的适用另一种样式。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #para1 {text-align:center;color:red; } #para2{text-align:right;color:green;} </style> </head><body> <p id="para1">Hello World!</p> <p>这个段落不受该样式的影响。</p><div id="para2">这里是什么</div> </body> </html>

测试结果

class选择器

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。class选择器在html中以class属性表示，在css中，类选择器以一个点“.”表示。

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

测试用例
所有的 p 元素使用 class=“center” 让该元素的文本居中，而h3元素使用class="center"没有效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <style> #para1 {text-align:right;font-size:20px;color:blue; } p.center {text-align:center; } </style> </head><body> <h3 class="center">由于p.center的限制，居中只能用于段落p，而不能用于标题h</h3><h4 id="para1">不可以用吗</h4> <p class="center">段落居中。谁知道这里写些什么</p><p id="para1">别人都是在拼命</p> </body> </html>

测试结果

css创建

当读到一个样式表时，浏览器会根据它来格式化html文档。
插入样式表有3种方法

插入样式表的方法

外部样式表（External style sheet）

内部样式表（Internal style sheet）

内联样式（Inline style）

外部样式表

当样式需要应用于很多页面时，外部样式表是理想的选择。使用外部样式表，可以通过改变一个文件来更改整个站点的外观。每个页面使用<link>标签链接到样式表。在head中使用

浏览器会从文件mystyle.css中读到样式声明，并根据它来格式化文档。
外部样式表可以在任何文本编辑器中进行编辑，但是文件中不能含有任何html标签，最后以.css扩展名进行保存。下面是一个样式表的例子

不要在属性值与单位之间留有空格

hr {color:sienna;} p {margin-left: 20px;} body { back-ground-image:url("/image.gif");}

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表，可以使用<style>标签在文档头部定义内部样式表，比如

<head> <meta charset="utf-8"> <title>测试用例</title> <style> p {/*这是注释*/color:green;text-align:right; } </style> </head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的很多优势，内联样式请慎用，应用场景有：当样式仅需要在一个元素上应用一次时。要使用内联样式，需要在相关的标签内使用样式(style)属性。style属性可以包含任何css属性
举例：改变段落的颜色和左外边距

<p style="color: sienna; margin-left: 20px;">这里写内容</p>

多重样式

如果某些属性在不同样式表中被同样的选择器定义，那么属性值就从更具体的样式表中继承过来。例如，外部样式表有针对h3选择器的三个属性：

h3 {color:green;text-align:left;font-size:8pt; }

而内部样式表有针对h3选择器的两个属性：

h3 {text-align:right;font-size:20pt; }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式：颜色属性被继承于外部样式表，而text-align和font-size属性会被内部样式表的规则取代。

h3 {color:green;/*外部样式表*/text-align:right;/*内部样式表*/font-size:20pt; }

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个html元素中，在html页的头元素中，或者在一个外部的css文件中。当然同一个html文档可以引用多个外部样式表。
一般情况下，优先级如下
$内联样式＞内部样式＞外部样式＞浏览器默认样式$
但是，如果外部样式放在内部样式后面，外部样式将覆盖掉内部样式。

css background(背景)

css背景属性用于定义html元素的背景

背景属性描述

background	描写属性，作用是将背景属性设置在一个声明中
background-attachment	背景图像是否固定或者随着页面的其余部分滚动
background-color	设置元素的背景颜色
background-image	把图像设置为背景
background-position	设置背景图像的起始位置
background-repeat	设置背景图像是否及如何重复

背景颜色

background-color属性定义了元素的背景颜色，页面的背景颜色使用在body的选择器中
css中，颜色值通常有以下几种方式定义

十六进制：比如“#ff0000”
RGB：比如“rgb(255,0,0)”
颜色名称：比如"red"

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿正的梦工坊</title> <style> body {background-color:#b0c4de; } </style> </head><body><h1>总有一些人要赢！</h1> <table border="1"><tr><td>科比</td><td>纳什</td></tr><tr><td>分卫</td><td>控卫</td></tr> </table></body> </html>

测试结果

下面的例子中h1, p, 和 div 元素拥有不同的背景颜色

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <style> h1 {background-color:#6495ed; } p {background-color:#e0ffff; } div {background-color:#b0c4de; }</style> </head><body><h1>CSS background-color 实例!</h1> <div>该文本插入在 div 元素中。 <p>该段落有自己的背景颜色。</p> 我们仍然在同一个 div 中。</div></body> </html>

测试结果

背景图像

background-image属性描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖掉真个元素实体。

页面背景图实例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿正的梦工坊</title> <style> body {background-image:url('paper.gif');background-color:#cccccc; } </style> </head><body> <h1>Hello World!</h1><p>随便写点什么吧，今天是2020年7月12日，复盘一下这一学期的收获，似乎不多，不过坚定了自己未来要走的道路，这意味着要在这条道路上付出很多，跌跌撞撞的同时收获宝贵的经验，让时间为自己赋能。</p> </body></html>

测试结果

背景图像可设置水平或者垂直平铺,或者不平铺，通过background-repeat属性来设置

background-repeat:repeat-x; background-repeat:repeat-y; background-repeat:no-repeat;

背景图像可通过background-position属性改变图像在背景中的位置

body {background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top;margin-right:200px; } </style>

背景-简写属性

在上面的学习中，控制页面的背景颜色使用了很多属性，为了简化属性代码，可以把属性合并到同一个属性中，背景颜色的简写属性为background
实例

body {background:#ffffff url("where.png") no-repeat right top;}

使用简写属性的顺序如下

简写属性的顺序

background-color

background-image

background-repeat

background-attachment

background-position

这些属性无需全部使用。

css文本属性

css文本属性如下表

属性描述

color	设置文本颜色
direction	设置文本方向
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

文本颜色

颜色属性被用来定义文字的颜色
测试代码
body范围内字体的默认颜色设置为黑色，h1标题的颜色设置为#00ff00,段落p的一个类“ex”颜色设置为蓝色，字体设置为20px

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <style> body {color:black;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255); font-size:20px;} </style> </head><body> <h1>这是标题 1</h1> <p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p> <p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p> </body> </html>

测试结果

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式，文本可居中，左端对齐，右端对齐，两端对齐。当text-align设置为“justify”时，每一行被展开为宽度相等，左右外边距为对齐

测试结果

测试结果二

文本修饰

文本装饰使用text-decoration属性。主要用来删除链接的下划线

a {text-decoration: none;}

删除链接下划线测试

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.lishizheng.com</title> <style> a.delete {text-decoration:none;} </style> </head><body><p>链接到: <a href="//www.lishizheng.com/">www.lishizheng.com</a></p><p>链接到: <a class="delete" href="//www.lishizheng.com/">www.lishizheng.com</a></p></body></html>

测试结果

还有下面装饰文字的用法：分别是上划线，删除线，下划线。

h1 {text-decoration: overline;} h2 {text-decoraton: line-through;} h3 {text-decoration: underline;}

测试用例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <style> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} </style> </head><body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body></html>

测试结果

文本转换

文本转换属性用来指定在一个文本中的大写和小写字母，可以将所有字句变成大写或小写字母，或者每个单词的首字母大写。

/*大写*/ p.uppercase{text-transform: uppercase;} /*小写*/ p.lowercase {text-transform:lowercase;} /*首字母大写*/ p.capitalize {text-transform:capitalize;}

文本缩进

文本缩进属性用来指定文本的第一行的缩进

p {text-indent: 50px;}

测试用例
测试文本转换

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <style> p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} </style> </head><body> <p class="uppercase">Monday. just follow the plan</p> <p class="lowercase">Monday. just follow the plan</p> <p class="capitalize">Monday. just follow the plan</p> </body> </html>

测试结果

测试用例
测试首行缩进

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <style> p.hello {text-indent:50px;text-transform:uppercase;} </style> </head> <body><p class="hello">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p></body> </html>

测试结果

css字体

css字体属性定义字体、加粗、大小、文字样式。

css字型

在css中，有两种类型的字体系列名称

通用字体系列：拥有相似外观的字体系统组合（比如 serif和monospace）

特定字体系列：一个特定的字体系列（比如times或courier）

字体系列

font-family属性设置文本的字体系列，应该设置几个字体名称作为后备，如果浏览器不支持第一种字体，浏览器将尝试下一种字体。如果字体系列的名称超过一个字，必须用引号，比如“宋体”，多个字体系列用一个逗号分隔。

测试字体系列

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <style>p.sansserif{font-family:Arial,Helvetica,sans-serif;} p.serif {font-family:"times new roman",times,serif;}; </style> </head><body> <h1>CSS font-family</h1> <p class="serif">这一段的字体是 Times New Roman </p> <p class="sansserif">这一段的字体是 Arial.</p></body> </html>

测试结果

字体样式和字体大小

字体样式主要用于指定斜体文字，字体样式属性有三个值

/*正常显示*/ p.normal {font-style:normal;} /*斜体*/ p.italic {font-style:italic;} /*倾斜的文字*/ p.italic {font-style:oblique;}

字体大小的值可以是绝对或者相对的大小
绝对大小

设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用

相对大小

相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小

如果不指定字体大小，默认大小和普通文本段落一样，是16像素（16px=1em）

使用像素设置字体大小

h1 {font-size:40px;} h2 {font-size:30px;}

使用em来设置字体大小
测试

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <style> h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */ p. </style> </head> <body><h1>标题1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>使用 em 单位，允许在所有浏览器中调整文本大小。不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。 </p> </body> </html>

测试结果

使用百分比和em组合
在所有浏览器的解决方案中，设置<body>元素的默认字体大小是百分比

body {font-size:100%;} h1{ font-size:2.5em;} p {font-size:0.875em;}

css字体属性列表

所有css字体属性

属性描述

font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本
font-weight	指定字体的粗细

css链接

不同的链接有不同的样式。
链接的样式，可以用任何css属性，链接的状态有

链接状态含义

a:link	正常，未访问过的链接
a:visited	用户已经访问过的链接
a:hover	当用户鼠标放在链接上时
a:active	链接被点击的那一刻

有一些顺序规则：a:hover必须跟在a:link和a:visited之后；a:active必须跟在a:hover之后。

各种链接的样式使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <style>/*鼠标放到链接上时：改变颜色*/ a.one:link {color:#ff0000;} a.one:visited {color:#0000ff;} a.one:hover {color:#ffcc00;}/*鼠标放到链接上时：改变字体*/ a.two:link {color:#ff0000;} a.two:visited {color:#0000ff;} a.two:hover {font-size:150%;}/*鼠标放到链接上时：改变背景颜色*/ a.three:link {color:#ff0000;} a.three:visited {color:#0000ff;} a.three:hover {background:#66ff66;}/*鼠标放到链接上时：改变字体类型*/ a.four:link {color:#ff0000;} a.four:visited {color:#0000ff;} a.four:hover {font-family:Georgia, serif;}/*鼠标放到链接上时：改变文字修饰，这里是下划线*/ a.five:link {color:#ff0000;text-decoration:none;} a.five:visited {color:#0000ff;text-decoration:none;} a.five:hover {text-decoration:underline;} </style> </head><body> <p>将鼠标移至链接上改变样式.</p><p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p> <p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p> <p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p> <p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p> <p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p> </body></html>

测试结果

创建链接框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <style> a:link,a:visited {display:block;font-weight:bold;color:#FFFFFF;background-color:#98bf21;width:120px;text-align:center;padding:4px;text-decoration:none; } a:hover,a:active {background-color:#7A991A; } </style> </head><body> <a href="/css/" target="_blank">这是一个链接</a> </body> </html>

测试结果

css列表

css列表属性作用如下

css列表属性

设置不同的列表项标记未有序列表

设置不同的列表项标记为无序列表

设置列表项标记为图像

不同的列表项标记：使用list-style-type属性指定列表项标记的类型
无序列表ul，有序列表ol
使用如下

测试用例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head><body> <p>无序列表实例:</p><ul class="a"><li>Coffee</li><li>Tea</li><li>Coca Cola</li> </ul><ul class="b"><li>Coffee</li><li>Tea</li><li>Coca Cola</li> </ul><p>有序列表实例:</p><ol class="c"><li>Coffee</li><li>Tea</li><li>Coca Cola</li> </ol><ol class="d"><li>Coffee</li><li>Tea</li><li>Coca Cola</li> </ol></body> </html>

测试结果

指定列表项标记为图像，使用列表样式图像属性

ul {list-style-image:url('squarepurple.gif'); }

总结

以上是生活随笔为你收集整理的前端css学习的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

上一篇： JPA对象的持久化
下一篇： select 在各浏览器中显示optio