前端开发——CSS学习

最新推荐文章于 2023-01-26 18:59:33 发布

妈妈咪咦

最新推荐文章于 2023-01-26 18:59:33 发布

阅读量225

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/weixin_44774630/article/details/106588725

版权

前端学习专栏收录该内容

9 篇文章 1 订阅

订阅专栏

前言

学习CSS需要对HTML有基本的了解，如果你还未有HTML基础，可以先进行HTML的学习前端开发——HTML学习。由于需要马上熟悉前端开发的基本技术，这份CSS学习笔记很粗糙，很多内容没整理出来。同时，如果有错误，欢迎大家在评论区指出。

CSS教程|菜鸟教程简单笔记

CSS(Cascading Style Sheets)为层叠样式表。样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。

1.简单实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body/*选择器*/
{
	background-color:#d0e4fe;/*大括号括起来的一条声明*/
}
h1
{
	color:orange;
	text-align:center;
}
p
{
	font-family:"Times New Roman";
	font-size:20px;
}
</style>
</head>

<body>
<h1>CSS 实例!</h1>//显示的字体颜色为orange，位置居中
<p>这是一个段落。</p>//显示的字体是定义的"Times New Roman"，字体大小是20像素
</body>
</html>

2.CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器是需要改变样式的 HTML 元素，例如以上简单实例中的body、h1和p。
每条声明由一个属性和一个值组成，属性与值用冒号分开，例如
h1{ color:orange; text-align:center; }

3.CSS Id 和 Class

id 选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

<head>
<style>//<style>标签
#your/*CSS中#定义id选择器*/
{	color:purple;	}
</style>
</head>
<body>
<p id="your">这个段落受到样式的限制</p>//显示的是字体颜色为purple
</body>

class 选择器用于描述一组元素的样式，它与id选择器的区别是，class可以在多个元素中使用，也可以指定某元素使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

<head>
<style>
.center/*如果写成p.center，则只有<p>内的元素才会居中*/
{
	text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>//居中
<p class="center">段落居中。</p>//居中
</body>

上述例子的类名为center，其第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

4.CSS 创建

插入样式表的方法有三种：外部样式表(External style sheet)、内部样式表(Internal style sheet)和内联样式(Inline style)。
外部样式表：样式需要应用于很多页面。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
/*浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档*/
</head>

文件mystyle.css的内容：

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

内部样式表：单个文档需要特殊的样式。
使用 < style> 标签在文档头部定义内部样式表。

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式：将表现和内容混杂在一起。
在相关的标签内使用样式（style）属性。

<p style="color:red;margin-left:20px">这是一个段落。</p>

多重样式优先级：
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

5.CSS 背景

背景图像 - 水平或垂直平铺 background-repeat

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;/*有些图像只在水平方向平铺 (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;/*指定是在右边显示*/
}

背景- 简写属性
页面的背景颜色通过了很多的属性来控制。为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中。

<style>
body
{
	/*背景颜色的简写属性为 "background"*/
	background:#ffffff url('img_tree.png') no-repeat right top;
	margin-right:200px;
}
</style>

当使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment（背景图像是否固定或者随着页面的其余部分滚动）
background-position
以上属性无需全部使用，你可以按照页面的实际需要使用。

6.CSS 文本格式

文本的对齐方式 text-align

<head>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
/*justify使每一行被展开为宽度相等，左右外边距是对齐（如杂志和报纸）*/
</style>
</head>

<body>
<h1>居中</h1>
<p class="date">2020.6.6</p>
<p class="main">主要内容</p>
</body>

文本修饰 text-decoration

<style>
p {text-decoration:none;}/*无修饰*/
h1 {text-decoration:overline;}/*上划线*/
h2 {text-decoration:line-through;}/*穿过文本中间*/
h3 {text-decoration:underline;}/*下划线*/
</style>

文本转换 text-transform

<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}/*单词首字母大写*/
</style>

文本缩进 text-indent

<style>
p {text-indent:20px;}
</style>

文本中行与行的空间 line-height

<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
p.middle {line-height:100%;}
</style>
<head>
<p class="small">
这是一个更小行高的段落。<br>
这是一个更小行高的段落。
</p>

<p class="big">
这是一个更大行高的段落。<br>
这是一个更大行高的段落。
</p>

<p class="middle">
这是一个正常行高的段落。<br>
这是一个正常行高的段落。
</p>
</head>

在这里插入图片描述

7.CSS 字体

字体系列 font-family
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。

<style>
p.serif{font-family:"Times New Roman",Times,serif;}
/*如果浏览器不支持第一种字体，他将尝试下一种字体。多个字体系列是用一个逗号分隔指明*/
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
p.good({font-family:"宋体";}
</style>
</head>

<body>
<p class="serif">这一段的字体是 Times New Roman </p>
<p class="sansserif">这一段的字体是 Arial.</p>
<p class="good">是宋体吗?</p>
</body>

字体样式 font-style
该属性有三个值：正常 - 正常显示文本、斜体 - 以斜体字显示的文字和
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）。

<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>

字体大小 font-size，默认大小是16px即1em

<style>
h1 {font-size:40px;}/* 40px/16=2.5em */
h2 {font-size:30px;}/* 30px/16=1.875em */
p {font-size:14px;} /* 14px/16=0.875em */
</style>

用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。px与em的转换实际上已给出：px/16=em。

字体加粗 font-weight
不用HTML中的< b>标签，使用属性font-weight指定字体的粗细。

<style>
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}/*bold和900都是加粗的效果*/
</style>
<body>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>

8.CSS 链接

特别的链接，可以有不同的样式，这取决于他们是什么状态。
四个链接状态：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
查看效果click

<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>

当设置为若干链路状态的样式，也有一定的顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

添加不同样式的超链接
感受超链接的不同样式效果

创建链接框

<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;/*在hover和active状态下框的背景颜色改变*/
}
</style>

状态：link；visited
在这里插入图片描述
状态：hover；active

9.CSS 列表

HTML中有无序列表和有序列表，使用CSS可以列出进一步的样式，并可用图像作列表项标记(使用属性list-style-image)。

<head>
<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>
</ul>
<ul class="b">/*该无序表以方形作为标号*/
  <li>Coffee</li>
  <li>Tea</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">/*该有序表以大写罗马数字作为编号*/
  <li>Coffee</li>
  <li>Tea</li>
</ol>
<ol class="d">/*该有序表以小写字母作为编号*/
  <li>Coffee</li>
  <li>Tea</li>
</ol>
</body>

在这里插入图片描述

10.CSS 表格

表格边框：指定CSS表格边框，使用border属性。

<style>
table,th,td
{
	border:1px solid black;/*黑色边框，该表格会呈现双边框，原因见下面的解释*/
}
</style>

由于th/td本身也有边界，所以上述会呈现双边框的效果。如果想呈现单边框，使用border-collapse。

<style>
table{border-collapse:collapse;}
table,th,td
{border:1px solid black;/*黑色边框，该表格会呈现双边框，原因见下面的解释*/}
</style>

表格文字对齐
水平对齐 text-align；垂直对齐 vertical-align

<style>
table, td, th
{
	border:1px solid black;/*可以修改边框颜色，直接将black换成其他颜色值*/
}
td.a
{
    text-align:right;/*<td>标签中属性class为a的元素处于右端*/
}
td.b
{
	height:50px;
	vertical-align:bottom;/*<td>标签中属性class为b的元素处于bottom*/
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Savings</th>
</tr>
<tr>
<td class="a">Peter</td>
<td class="a">$100</td>
</tr>
<tr>
<td class="b">Lois</td>
<td class="b">$150</td>
</tr>
</table>
</body>

在这里插入图片描述

11.CSS 盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。熟悉盒子模型：
在这里插入图片描述
须知：当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。

<style>
div {
    background-color: lightgrey;
    width: 300px;/*元素的宽度300px*/
    border: 25px solid green;/*边界框的左or右宽度25px*/
    padding: 25px;/*内边距的左or右宽度25px*/
    margin: 25px;/*外边距的左or右宽度25px*/
}
</style>

上述例子的最终元素总宽度为300+25×2+25×2+25×2=450px

12.CSS 边框

边框样式 border-style

边框宽度 border-width
注意： “border-width” 属性如果单独使用则不起作用。要先使用 “border-style” 属性来设置边框。

<style>
p.one 
{
	border-style:solid;
	border-width:5px;/*指定具体长度值*/
}
p.two 
{
	border-style:solid;
	border-width:medium;/*使用关键字medium or thick or thin*/
}
</style>

边框颜色 border-color
注意：“border-color” 属性如果单独使用则不起作用. 要先使用 “border-style” 属性来设置边框。

<style>
p.one
{
    border-style:solid;
    border-color:red;/*使用颜色名置边框颜色*/
}
p.two
{
    border-style:solid;
    border-color:#98bf21;/*使用十六进制置边框颜色*/
}
</style>

边框-单独设置各边 border-x-style

p
{
    border-top-style:dotted;/*上边框*/
    border-right-style:solid;/*右边框*/
    border-bottom-style:dotted;/*下边框*/
    border-left-style:solid;/*左边框*/
}

border-style属性可以有1-4个值：
border-style:dotted solid double dashed;(上右下左)
border-style:dotted solid double;(上、左右solid、下)
border-style:dotted solid;(上下dotted、左右solid)
border-style:dotted;(四个边都为dotted)

13.CSS 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
在这里插入图片描述
CSS outline 属性规定元素轮廓的样式、颜色和宽度。

<style>
p.a 
{
	border:1px solid red;
	outline:green dotted thick;/*简写属性outline，在一个声明中设置所有的轮廓属性*/
}
p.b
{
	border:1px solid black;
	outline-style:dotted;/*轮廓样式*/
	outline-color:blue;/*轮廓颜色*/
	outline-width:middle;/*轮廓宽度*/
}
</style>

14.CSS margin(外边距)

从下图理解margin、padding的关系：
在这里插入图片描述
Margin - 简写属性、单边外边距属性

<style>
p.a
{
	margin:100px 50px;/*简写属性margin，在一个声明中设置所有外边距属性*/
}
p.b
{
	margin-top:100px;/*上边距*/
	margin-bottom:100px;/*下边距*/
	margin-right:50px;/*右边距*/
	margin-left:50px;/*左边距*/
}
</style>

margin属性可以有1-4个值（可以与上面提到的border-style对比）：
margin:25px 50px 75px 100px;(上右下左)
margin:25px 50px 75px;(上、左右50px 、下)
margin:25px 50px;(上下25px、左右50px)
margin:25px;(四个边距)
margin除了使用固定的margin值，还可以使用百分比值，CSS margin百分比。

15.CSS padding（填充）

填充- 简写属性、单边内边距属性

<style>
p.a
{
	padding:25px 50px;/*简写属性padding，在一个声明中设置所有内边距属性*/
}
p.b
{
	padding-top:25px;
	padding-bottom:25px;
	padding-right:50px;
	padding-left:50px;
}
</style>

padding属性可以有1-4个值，请参考上述的margin和border-style。

16.CSS 分组和嵌套选择器

分组选择器
在样式表中有很多具有相同样式的元素，使用分组选择器简化代码。

h1{color:green;}
h2{color:green;}
p{color:green;}
/*等价于*/
h1,h2,p
{	color:green;	}

嵌套选择器
适用于选择器内部的选择器的样式。

<style>
p/*为所有p元素指定样式*/
{
	color:blue;
	text-align:center;
}
.marked/*为所有class="marked"的元素指定样式*/
{
	background-color:red;
}
.marked p/*为所有class="marked"元素内的p元素指定样式*/
{
	color:white;
}
p.marked/*为所有class="marked"的p元素指定样式*/
{
    text-decoration:underline;
}
</style>

CSS 尺寸 (Dimension)涉及的一些百分比值还没有完全理解，click here

17.CSS Display(显示) 与 Visibility（可见性）

隐藏元素 - display:none或visibility:hidden
以上两种方法都可以隐藏元素，但是效果不一样。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

<head>
<style>
h1.hidden {visibility:hidden;}
h1.display{display:none;}
</style>
</head>

<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题仍然占用空间。</p>
<h1>今天你隐藏了吗</h1>
<h1 class="display">今天你隐藏了吗</h1>
<p>注意, 实例中的"今天你隐藏了吗"不占占用空间。</p>
</body>