【前端学习笔记】CSS基础

🌟博主主页:我是一只海绵派大星

📚专栏分类:前端

📚参考教程:菜鸟教程
❤️感谢大家点赞👍收藏⭐评论✍️

目录

 一、CSS教程

1、什么是CSS

2、CSS 语法

 3、CSS id 和 class

id选择器

 class 选择器

 4、CSS 链接

5、CSS列表

6、CSS 盒子模型 

7、 CSS margin(外边距)

 8、CSS 分组 和 嵌套 选择器

分组选择器

 嵌套选择器

 9、CSS 组合选择符

后代选择器 

子元素选择器 

 相邻兄弟选择器

后续兄弟选择器 


一、CSS教程

1、什么是CSS

CSS(Cascading Style Sheets)是一种计算机语言,用于表现HTML或XML等文件的样式。它不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

2、CSS 语法

CSS声明总是以分号 ; 结束,声明总以大括号 {} 括起来:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>我是一只海绵派大星</title> 
<style>
p
{
	color:red;
	text-align:center;
} 
</style>
</head>

<body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>

 3、CSS id 和 class

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>我是一只海绵派大星</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

 class 选择器

class可以在多个元素中使用

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点 . 号显示:

//.......
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
//.......

 4、CSS 链接

 链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。

特别的链接,可以有不同的样式,这取决于他们是什么状态。

这四个链接状态是:

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

 当设置为若干链路状态的样式,也有一些顺序规则:

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

5、CSS列表

在 HTML中,有两种类型的列表:

  • 无序列表 ul - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 ol - 列表项的标记有数字或字母

6、CSS 盒子模型 

 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

 

7、 CSS margin(外边距)

margin属性可以有一到四个值。

  • margin:25px 50px 75px 100px;
    • 上边距为25px
    • 右边距为50px
    • 下边距为75px
    • 左边距为100px
  • margin:25px 50px 75px;
    • 上边距为25px
    • 左右边距为50px
    • 下边距为75px
  • margin:25px 50px;
    • 上下边距为25px
    • 左右边距为50px
  • margin:25px;
    • 所有的4个边距都是25px

 8、CSS 分组 和 嵌套 选择器

分组选择器

在样式表中有很多具有相同样式的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>我是一只海绵派大星</title> 
<style>
h1,h2,p
{
	color:green;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

 嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了四个样式:

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

 9、CSS 组合选择符

在 CSS3 中包含了四种组合方式:

  • 后代选择器(以空格     分隔)
  • 子元素选择器(以大于 > 号分隔)
  • 相邻兄弟选择器(以加号 + 分隔)
  • 普通兄弟选择器(以波浪号 ~ 分隔)

后代选择器 

后代选择器用于选取某元素的后代元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>你好</title> 
<style>
div p
{
	background-color:yellow;
}
</style>
</head>
<body>

<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

子元素选择器 

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素直接/一级子元素的元素。 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>你好</title> 
<style>
div>p
{
	background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>

<div>
<span><p>I will not be styled.</p></span>
</div>

<p>My best friend is Mickey.</p>
</body>
</html>

 相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>你好</title> 
<style>
div+p
{
	background-color:yellow;
}
</style>
</head>
<body>

<h1>文章标题</h1>

<div>
<h2>DIV 内部标题</h2>
<p>DIV 内部段落。</p>
</div>

<p>DIV 之后的第一个 P 元素。</p>

<p>DIV 之后的第二个 P 元素。</p>

</body>
</html>

后续兄弟选择器 

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>你好</title> 
<style>
div~p
{
	background-color:yellow;
}
</style>
</head>
<body>
	
<p>之前段落,不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

 🎁结语: 

本次精彩内容已圆满结束!希望各位读者在阅读过程中能够收获满满。在此,特别感谢各位读者的支持与三连赞。如果文章中存在任何问题或不足之处,欢迎在评论区留言,大星必定会认真对待并加以改进,以便为大家呈现更优质的文章。你们的支持与鼓励,将是博主不断前进的最大动力。再次感谢大家的陪伴与支持!

  • 27
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值