CSS
1. CSS介绍
1.1 什么是CSS?
CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式;
CSS 能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果;能够做到页面的样式和
结构分离;
1.2 基本语法规范
选择器 +{一条/N条声明}
- 选择器决定针对谁修改(找谁)
- 声明决定修改啥(干啥)
- 声明的属性是键值对
- 使用:区分键值对,使用:区分键和值.
<style>
p{
/*设置字体颜色 */
color: red;
/*设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p>
注意:
- CSS 要写到 style标签中 (后面还会介绍其他写法)
- style 标签可以放到页面任意位置,
一般放到 head 标签内
.- CSS 使用 /**/作为注释 (使用 ctrl +/快速切换).
保存代码,查看页面:在这里插入图片描述
1.3 引入方式
行内样式 |
内部样式 |
外部样式 |
我们再创建一个新文件,用于写入选择器,然后在原文件的 head 内通过上述语法引入新文件的信息:
写好后,保存两个文件,重新打开页面:
值得一提,选择器的生效优先级遵从就近原则
;
1.4 规范
样式大小写
- 虽然 CSS 不区分大小写,我们开发时统一使用小写字母
空格规范
冒号
后面带空格选择器
和{
之间也有一个空格.
2. CSS选择器
标签选择器
/*选择所有的a标签,设置颜色为红色/
a{
color: red;
}
/*选择所有的div标签,设置颜色为绿色*/
div {
color: green;
}
保存代码,打开页面:
要修改 div3 的颜色,我们可以设置 a { } 选择器,来选择所有 a 标签,并设置颜色:
类选择器
class 选择器的概念和规范使用如下:
- 可以为每一个标签都添加 class 属性
- class 的值
不要求唯一
- 在使用class 选择器时,需要在 class 选择器前加一个
.
,如.class 名{ }
保存代码,打开页面:
ID 选择器
ID 的概念和规范使用如下:
一个页面中的 ID 值原则性上要求是
唯一
的可以为
每个标签
都设置 ID可以为 ID
赋任何值
,哪怕是标签名( div , span , title…)在使用 ID 选择器时,需要在 ID 选择器前加一个
#
,如# id 名{ }
,避免 ID 是标签名的时候,编译器误以为使用的是标签选择器
保存代码后,打开页面:
通配符选择器
通配符的概念和通配符选择器的使用如下:
通配符:
*
,表示选择所有,如SQL 中的select*
;通配符选择器的使用:
*{ }
,表示选择当前页面的所有元素;通配符选择器的优先级较前面几种选择器,优先级是比较低的;
保存代码,打开页面:
复合选择器
复合选择器,是由多个单选择器组成的多选择器
,又分为并集
和交集
的形式:
并集形式,选择器用
,
隔开;交集形式,选择器用
空格
隔开;如果要精细选择某个部分,就可以为这个部分的标签
添加特征属性
,如 ID , class 等等,再使用交集;
并集 |
保存代码,打开页面:
并集 |
补充一个常用的标签:
<body>
<!-- 无序列表标签 -->
<ul>
<li></li>
</ul>
<!-- 有序列表标签 -->
<ol>
<li></li>
</ol>
</body>
如果要只想让有序列表的超链接字体改为红色,我们就可以使用复合选择器的交集形式: