目录
CSS是什么
CSS能够对网页中元素位置的排版进行像素级精确控制,能够做到页面的样式和结构分离。
基本语法规范
选择器 + {一条/N条声明} 选
择器决定针对谁修改 (找谁)
声明决定修改啥. (干啥)
声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.
引入方式
1、内部样式表
写在 style 标签中,嵌入到 html 的内部,但是一般都是放在 head 标签中。
优点:这样做能够让样式和页面结构分离
缺点:分离的不够彻底,尤其是CSS内容多的时候。
搜狗搜索中仍然保留着这种写法。
2、行内样式表
通过 style 属性, 来指定某个标签的样式。
只适用于简单样式,只针对某个标签生效。
缺点:不能写太复杂的样式。
优先级较高,会覆盖其他的样式。
3、外部样式
创建一个CSS文件,使用 link 标签引入CSS
在项目开发中最常用。
优点:样式和结构彻底分离了
缺点:受到浏览器的缓存影响,修改之后不一定立刻生效。
选择器
选择器的功能
选中页面指定的标签元素(先选中,才能设置元素的属性)
选择器的种类
1、基础选择器(单个选择器构成的)
标签选择器
类选择器
id选择器
通配符选择器
2、复合选择器(把多种基础选择器综合运用起来)
后代选择器
子选择器
并集选择器
伪类选择器
基础选择器
1、标签选择器
- 能快速把同一类型的标签都选择出来
- 但是不能差异化选择
2、类选择器
差异化表示不同的标签
可以让多个标签都使用同一个标签
class等于 blue 的都会被选中(以 class 的值为选择的基准)
一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让 代码更好复用)
如果是长的类名, 可以使用 - 分割.
3、id选择器
和 类选择器 相似
CSS中使用 # 开头表示id选择器
id 选择器的值 和 html 中某个元素的 id 值相同
html 的元素 id 不必带 #
id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)
4、通配符选择器
使用 * 定义,页面所有都会被操作,通常用于取消浏览器的默认样式。
复合选择器
1、后代选择器
又叫包含选择器。选择某个父元素中的某个子元素。
元素1 元素2 {样式声明}
元素 1 和 元素 2 要使用空格分割
元素 1 是父级, 元素 2 是子级(儿子/孙子都可以), 只选元素 2 , 不影响元素 1
可以替换成类 或 id选择器
也可以由两个以上个数的选择器
后边是儿子
后边是孙子
任意基础选择器的组合(包括类选择器,id选择器)
2、子选择器
和子选择器类似,但是只能选择 子标签
元素1>元素2 { 样式声明 }
- 使用大于号分割
- 只能选亲儿子, 不选孙子元素
- 也可以由两个以上个数的选择器
- 可以替换成类 或 id选择器
后代选择器会把两个食物都选上,而子选择器只会选择 食物a
3、并集选择器
用于选择多组标签(集体声明)
元素1, 元素2 { 样式声明 }
通过 逗号 分割等多个元素.
表示同时选中元素 1 和 元素 2
任何基础选择器都可以使用并集选择器.
并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)
4、 伪类选择器
1)、链接伪类选择器
为链接添加效果
- a:link 选择未被访问过的链接
- a:visited 选择已经被访问过的链接
- a:hover 选择鼠标指针悬停上的链接
- a:active 选择活动链接(鼠标按下了但是未弹起)
如何让一个链接恢复成为访问的状态?
清空浏览器缓存就可以
2)、force伪类选择器
选择获取交点的 input 表单元素(选中表单时候的样式会发生改变)
上边的使用到的源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示CSS</title>
<style>
p{
/* 标准写法:冒号后边跟一个空格 */
color: red;
front-size: 30px;
}
div{
color: green;
}
/* 类选择器,可以同时选择多个 */
.blue{
color: blue;
}
/* id选择器 不能被多个标签使用 */
#two{
color: brown;
}
/* 通配符选择器 页面所有都会被操作,
通常时使用于取消浏览器的默认样式 */
*{
color: red;
}
/* 后代选择器,空格分割,只要是后代都可以 把 ol 中的 li 修改颜色,不影响 ul */
ol li {
color: green;
}
ol a{
color: salmon;
}
.one li a{
color: deeppink;
}
.two a{
color: antiquewhite;
}
/* 子选择器,大于号分割,只选亲儿子 */
.two>a{
color: aqua;
}
/* 并集选择器(集体选择),用于多组标签 */
div,h3 {
color: beige;
}
div,
h3,
ul>li {
color: aquamarine;
}
/* 伪类选择器 */
/* 链接伪类选择器*/
/* 未被访问过的链接 */
a:link {
color: bisque;
/* 去掉 a 标签的下划线 */
text-decoration: none;
}
/* 已经被访问过的链接 */
a:visited {
color: deeppink;
}
/* 选择鼠标指针悬停上的链接 */
a:hover{
color: salmon;
}
/* 选择活动链接 (鼠标按下但是未弹起)*/
a:active {
color: aqua;
}
/* force 伪类选择器 */
/* 选中表单的时候的样式改变 */
.three>input:focus{
color: blueviolet;
}
</style>
</head>
<body>
<div>字体属性</div>
<a href="#">小猫</a>
<span class="blue">我是span标签</span>
<p class="blue">你好, 演示CSS样式</p>
<div class="blue font30" id="one">我是一个div1</div>
<div id="two">我是一个div2</div>
<div id="three">我是一个div3</div> -->
<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="two">
<a href="#">食物a</a>
<p><a href="#">食物b</a></p>
</div>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>
<ol class="one">
<li>ddd</li>
<li>eee</li>
<li><a href="#">fff</a></li>
<li><a href="#">fff</a></li>
<li><a href="#">fff</a></li>
</ol>
<div>苹果</div>
<h3>香蕉</h3>
<ul>
<li>鸭梨</li>
<li>橙子</li>
</ul>
</body>
</html>
谢谢你看到这里!
今天文章到这里,考虑到一篇博客太长了,后续CSS在下一篇文章。