CSS编程基础（学习笔记）

最新推荐文章于 2023-07-28 10:53:07 发布

Jackieeee_

最新推荐文章于 2023-07-28 10:53:07 发布

阅读量352

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/jackie_fu/article/details/106401639

版权

这篇博客介绍了CSS的基础知识，包括CSS的定义、基础语法、选择器、样式和布局。重点讲解了CSS声明、ID和类选择器、伪类和伪元素，以及背景、表格、文本、字体和列表样式的应用，并探讨了两行三列和三行两列的布局实现。

摘要由CSDN通过智能技术生成

CSS编程基础入门

CSS是什么？

CSS指层叠样式表（Cascading Style Sheets）
样式通常存储在样式表中
CSS主要目的：可以让相同的一个页面在不同浏览器当中呈现相同的样式。（样式定义如何现实HTML元素，是为了解决内容与表现分离的问题。）

CSS基础语法

CSS声明

样式属性：background-color
操作符：：
样式值#FFFFFF
分隔符：；

CSS声明块

CSS选择器div {CSS声明}


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS声明</title>
		<style>
			body {
				background-color: lightblue;
			}	
		</style>
	</head>
	<body>
	</body>
</html>

CSS选择器

ID选择器

#id名称{ }

id元素的特点就是唯一不可重复的
元素选择器常用

元素选择器是通过元素名称来定位页面元素
类（class）选择器常用

.class名称{ }
属性选择器

[属性名称]{ }//最基本用法

e.g：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器</title>
		<style>
			#p {   
				color: lawngreen;
			}
			.myclass{
				color: lightcoral;
			}
			span{
				color: aqua;
			}
			[title]{
				color: aquamarine;
			}
		</style>
	</head>
	<body>
		<p id="p">这是一个段落内容。</p>
		<p class="myclass">这是一个段落内容。</p>
		<span>这是一个段落内容。</span>
		<p title="this is p.">这是一个段落内容。</p>
	</body>
</html>

伪类

伪类	描述
:link	向未被访问的链接添加方式
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:active	向被激活的元素添加样式
:visited	向已被访问的链接添加样式

e.g:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类</title>
		<style>	
			a:link{
				color: lightblue;
			}
			a:hover{
				color: lightcoral;
			}
			a:active{
				color:lightgreen;
			}
			a:visited{
				color: lightseagreen;
			}
		</style>
	</head

最低0.47元/天解锁文章

Jackieeee_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS编程基础（学习笔记）

CSS编程基础入门CSS是什么？CSS基础语法CSS声明CSS声明块CSS选择器div {CSS声明}CSS选择器伪类伪元素CSS样式背景样式表格样式文本样式字体样式列表样式CSS布局两行三列布局三行两列布局CSS是什么？CSS指层叠样式表（Cascading Style Sheets）样式通常存储在样式表中CSS主要目的：可以让相同的一个页面在不同浏览器当中呈现相同的样式。（样式定义如何现实HTML元素，是为了解决内容与表现分离的问题。）CSS基础语法CSS声明样式属性：bac
复制链接

扫一扫