看这篇之前,你应该具备一点点html的知识了。也可移步《html常用标签学习》链接: https://blog.csdn.net/qq_37617413/article/details/106459876.
一、什么是css?
1. 释义
CSS 指层叠样式表 (Cascading Style Sheets)
,定义如何显示 HTML 元素样式,样式通常存储在样式表中。
2. 作用
要使用CSS
对HTML
页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器
。例如,修改字体、大小、颜色、间距等
3. 语法格式
每个css属性是由一个个键值对构成的,比如修改字体颜色color: red;
,背景颜色:background-color:pink;
二、3种样式表导入方式
1. 行内样式,使用style方式导入
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
2. 内部样式表,在style标签中书写CSS代码。style标签写在head标签中。
<head>
<style type="text/css">
h1 {border:blue solid 1px;background-color: brown}
p {border:blue solid 1px;background-color: brown}
</style>
</head>
3. 外部样式表,CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表。相对于内部样式表,易于维护
// html文件
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
// 样式表文件,写法跟内部样式表一致
h1 {border:blue solid 1px;background-color: brown}
p {border:blue solid 1px;background-color: brown}
小结:在这三种方式里,直接在style写的样式的优先级是最高的,比如同样是设置宽度,style里的宽度是优先应用的。
优先级:行内样式>内部样式表>外部样式表
三、选择器的使用
1. 内联/内嵌,元素style属性里面直接写样式即可
<div style="color: #fff000;">
我是div标签,我的样式是通过行内方式给我的呀
</div>
运行结果如图:
2. 元素选择器,直接写标签名即可,这里给p标签的样式,字体28px
,颜色#333
<head>
<style>
p {
font-size: 28px;
color: #333333;
}
</style>
</head>
<p>
我是p标签,我的样式是通过标签给我的呀
</p>
运行结果如图:
3. class 常用,以“.”开头:样式字体加粗,字号24px
<style>
.text-styles {
font-weight: bolder;
font-size: 24px;
}
</style>
<span class="text-styles">
我是span标签,我的样式是class给我的呀
</span>
运行结果如图:
4. id,以“#”开头
<style>
p {
font-size: 28px;
color: #333333;
border: 1px solid #ddd;
padding: 8px;
}
#link-styles {
color: #2C68FF;
cursor: pointer;
}
</style>
<p>
<a id="link-styles" href="https://blog.csdn.net/qq_37617413/article/details/106459876">我是a标签,是个链接,点击我可以去学习基础标签</a>
</p>
运行结果:
到这儿你已经基本了解HTML+CSS是如何配合组合成页面的了,通过这些基本知识,下一篇我们可以来实现一个微信公众号网页。