01-css2.0初始

最新推荐文章于 2025-02-26 21:05:15 发布

yjy_191

最新推荐文章于 2025-02-26 21:05:15 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/yjy_191/article/details/83068580

css 专栏收录该内容

5 篇文章

订阅专栏

01-css2.0初始

css2.0的用途
css基本定义
- style
三大基本选择器
- ID
- CLASS
- 标签选择
引入css的三大方式
- 外部
- 内部
- 行内
复合选择器
- 后代
- 交集
- 并集

css2.0的用途
1. css是什么
  CSS语言是"Cascading Style Sheets “的缩写,中文翻译为"层叠式样式表单”,它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。
2. css干什么用
  主要的用途是对网页中字体、颜色、背景、图像及其他各种元素的控制,使网页能够完全按照设计者的要求来显示。CSS语言是一个用于网页排版的标记性语言。
css的基本定义
1. style

<style type="text/css">
		<!-- 代码块  a: 标签选择器   color:属性  red: color属性的值--->
		a{
			color:red;
		}
</style>

css三大基本选择器 id class 标签

<style type='text/css'>
	#button{
		color:red;
	}
	.name{
		color:blue;
	}
	a{
		color:white;
	}
	<!-- 设置id为button的字体颜色为red
		 设置class为name的字体颜色为blue
		 设置a标签的字体颜色为白色
三大选择器的优先级
id > class >标签
 -->
</style>

引入css样式的三种方式

<!-- 外部 -->
链接式  ： 在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，使用html规则引入外部css  (用得比较多) :
<link href="./mystyle.css" rel="stylesheet" type="text/css"/>

导入式 ： 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
<style type="text/css">
        @import"mystyle.css"; 此处要注意.css文件的路径
</style>

<!-- 内部 -->
<style type="text/css">
	div{margin: 0;padding: 0;border:1px red solid;}
</style>

<!-- 行内 -->
<div style="border:1px red solid;">么么哒</div>

<!-- 优先级
		行内  》  内部  》  外部
 -->

后代，交集，并集

<!-- 后代 -->
div #name{
	color:red;
}
<!-- 设置所有div下的id为name的字体颜色为红色 -->

<!-- 交集 -->
div.age{
	color:red
}
<!-- 设置div中class为age的字体颜色为红色 -->

<!-- 并集 -->
div,p{
	color:red
}
<!-- 匹配div和p标签在同级的元素  -->