css3系列-1.css基础知识入门
2020-03-18 09:22:12来源：博客园 阅读 ()
css3系列-1.css基础知识入门
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属性是对文本的颜色进行设置。才疏学浅！
这一期的css教程就到这里，下一期将对css的各种常见属性以及属性的值进行讲解！希望点个关注哦！微信公众号：全栈学习笔记
div的标签以及h1标签，将他们的color属性设置为：red。一般来说，color属性是对文本的颜色进行设置。才疏学浅！
这一期的css教程就到这里，下一期将对css的各种常见属性以及属性的值进行讲解！希望点个关注哦！微信公众号：全栈学习笔记
原文链接:https://www.cnblogs.com/swzx-1213/p/12518490.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：前端 自定义确认提示框
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css：css3（圆角边框、盒子阴影、文字阴影） 2020-06-05
- 2.CSS3选择器 2020-05-17
- 1.CSS3简介 2020-05-17
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
