CSS基础引入选择器字体样式文本样式伪类盒子模型定位

最新推荐文章于 2024-09-11 20:31:47 发布

莫过于Y

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量463

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_45279447/article/details/111385978

版权

本文详细介绍了CSS的基础概念、引入方式和语法，包括选择器的使用，如标签选择器、类选择器和ID选择器，以及高级选择器如层次和属性选择器。此外，还讲解了字体样式、文本样式、超链接伪类、背景样式、盒子模型和网页元素定位等核心知识点，帮助读者掌握CSS的实用技巧。

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

文章目录

CSS

概念

定义：Cascading Style Sheet   级联样式表
表现HTML文件样式的计算机语言
		样式定义如何显示HTML元素
		包括对字体、颜色、边距、高度、背景图片、网页定位等设定

优势

1、内容与表现分离
2、网页的表现统一，容易修改
3、丰富的样式，使得页面布局更加灵活
4、减少网页的代码量，增加网页的浏览速度，节省网络带宽
5、运用独立于页面的CSS，有利于网页被搜索引擎收录

CSS的基础语法

语法：
	选择器{
	声明1;
	声明2;
	......		
	}
	实例：
	span{
	font-size:12px;<!--设置span中字体大小为12px-->
	color：#F00<!--设置span中字体颜色为红色-->
	}
	经验CSS的最后声明后的“；”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“；”都要写上

HTNL中引入CSS样式

1、内部样式表
		CSS代码写在<head>中的<style>标签中
		<style>
		span{color:green;}
		</style>
2、行内样式表
		使用style属性引入CSS样式
		<h1 style="color:red;font-size:12px">style属性的应用</h1>
3、外部样式表
		CSS代码保存在扩展名为.css的样式表中
				·链接式<link href="style.css" rel="stylesheet" type="text/css">
				·导入式 @import url("style.css");

CSS样式的优先级

作用范围：行内元素<内部样式表<外部样式表
优先级：就近原则
行内元素 > 内部样式表 > 外部样式表

CSS的简单实用（块级元素<—>行内元素）

1、控制元素的显示和隐藏
		display:none;//将元素隐藏
2、块级元素与行内元素的转变
		display：block;   //行内元素变成块级元素
		display:inline;      //块级元素变成行内元素
		display:inline-block;   //行内块级元素，这样的行内元素就可以设置宽高了

借助display的应用

block和none：二级菜单展示、TAB切换、焦点轮播图
inline和inline-block：使用列表制作横向导航、菜单等

CSS基本选择器

标签选择器

HTML标签作为标签选择器的名称

类选择器

语法：.class{ color:red; }

ID选择器(唯一的)

语法：#id{ color:red; }

基本选择器的优先级

ID选择器 > 类选择器 > 标签选择器

CSS高级选择器

层次选择器

语法：
在这里插入图片描述

属性选择器

语法：

最低0.47元/天解锁文章