css3系列-1.css基础知识入门
css3系列-1.css基础知识入门
全栈学习笔记
发布于 2022-03-31 11:50:30
发布于 2022-03-31 11:50:30
代码可运行
运行总次数：0
代码可运行
css3系列-1.css基础知识入门
1.css 如何引用
- 内部
- 外部
- 内联
代码示例
内部css代码示例
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
h1{
color: red;
}
</style>
</head>
外部css代码示例
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>微信公众号：全栈学习笔记</h1>
</body>
css文件里面的代码（test.css）
h1{
color: red;
}
内联css代码示例
<h1 style="color:red">
这里推荐使用第二种方式，尽量不使用其他两种方式，第二种方式可以是html文件与css文件分离，代码可阅读性以及维护性更强
2.css 优先级
- 内联style
- id选择器
- class选择器
- 标签
所谓内联style就是上述的第三种方式，这种方式的css样式级别是最高的。什么是优先级？比如说我在一个标签里面，style设置了一个color属性，然后给这个标签加上一个class，就是外联上一个css文件。这个css文件里面写上这个class的css样式，也是一个color属性，这时，又给这个标签加上了一个id，然后我在css里面给对应的id加上一个color样式，然后再为这个标签本身写上一个color属性，到最后你会发现最后显示的color是style里面的color，如果你删除了style，那么显示的就是对应id的color颜色，依次类推，这就是所谓的css优先级。
3.css 注释
和很多语言一样，css也能注释代码，格式如下
/* 注释 */
4.css 长度单位
- px 像素
- em 倍数
以上是最常用的单位，还有一些css3新增的长度单位如：vw、vh、vmin、vmax，rem与em
5.css 颜色单位
- red
- #ff0000
- #f00
- rgb(255,255,255)
用法 如：color：red
6.css 选择器
css里面的选择器比较多，这里暂时只介绍部分选择器，后面会出一期选择器详解。
选择器的大概分类
- 常用选择器
- 基本选择器
- 层级选择器
- 伪类选择器
- 属性选择器
这里简单介绍一下常用的选择器：
1.html选择器
*{
color:red;/*设置页面全部的字体样式属性*/
}
2.类选择器
.className{
/*设置某个class=className的全部标签的样式属性*/
color:red;
}
3.id选择器
#id{
/*设置某个id=id的标签的样式属性*/
color:red;
}
4.关联选择器 关联选择器是什么呢？定义：选择器中的选择器
<div class="div">
<h1>这是全栈学习笔记的关联选择器</h1>
</div>
css代码
.div h1{
color: red;
}
这样实现的效果就是：在class为div的下面的h1标签的color属性为red
5.组合选择器
div,h1{
color: red;
}
注意与上面代码的区分，这段代码实现的功能就是，全部的class为div的标签以及h1标签，将他们的color属性设置为：red。一般来说，color属性是对文本的颜色进行设置。才疏学浅！
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-03-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
