定义方式
行内样式表：只作用在单个元素
<!--CSS定义方式1：行内样式表-->
<img src="/static/images/mountain.jpg" alt="山1" width="300">
<img src="/static/images/mountain.jpg" alt="山2" style="width: 30%;">
<!--二者效果相同-->
内部样式表：在单个页面内定义，作用域为整个页面
内部样式表一般定义在head域内，也可定义在body域内
<style type="text/css">
/* 设置页面中所有图片的样式 */
img{
width: 300px;
height: 200px;
border-radius: 10%;
}
/* 设置页面中所有段落的样式 */
p{
width: 50px;
height: 50px;
background-color: lightseagreen;
}
/* 设置页面中所有class为blue-p的样式，注意类名前有. */
.blue-p{
background-color:lightblue;
}
/* 设置页面中所有class为big的样式，注意类名前有. */
.big{
height: 70px;
width: 70px;
}
</style>
外部样式表：定义在页面外的单个css文件中，作用域为多个页面
在页面中使用link来应用外部样式表
<link rel="stylesheet" href="/static/css/style1.css" type="text/css">
<link> 标签常用的 MIME 类型是 "text/css"，它规定样式表。
type 属性规定被链接文档/资源的 MIME 类型。只有当设置了 href 属性时，才能使用该属性。
注释
CSS只有多行注释
/*我是注释*/
选择器
标签选择器：选择所有标签
div{
width: 100px;
height: 100px;
background-color: aquamarine;
margin-bottom: 10px; /*外边距*/
}
p{
width: 50px;
height: 70px;
background-color: lightblue;
}
ID选择器：选择对应ID的标签
外部css文件
#mydiv{
background-color: coral;
}
#myp{
background-color: blueviolet;
}
页面文件
<div id="mydiv">div 3</div>
类选择器：选择对应class的标签
外部CSS文件
/* 类选择器 */
.red-tag{
background-color: brown;
}
.blue-tag{
background-color: lightblue;
}
.big-tag{
width: 120px;
height: 120px;
}
页面文件
<p class="big-tag">p 4</p>
<div class="red-tag blue-tag">div 4</div>
伪类选择器：用于定义元素的特殊状态
链接伪类选择器
- :link：链接访问前的样式
- :visited：链接访问后的样式
- :active：鼠标点击长按时的样式
- :focus：聚焦后的样式
a:link{
color: red;
}
a:visited{
color:green;
}
a:hover{
color:orange;
}
a:active{
color:purple;
}
- :hover：鼠标悬停时的样式
.effect:hover{
transform: scale(1.2);
transition: 200ms;
}
/* 鼠标悬停，标签在200ms内逐渐变大1.2倍 */
位置伪类选择器
- :nth-child(n)：选择是其父标签第n个子元素的所有元素。
括号内接受an+b的形式，a代表一个循环的大小，n是一个计数器（从0开始），以及b是偏移量。
判断逻辑：若存在自然数n满足标签编号为an+b，则选中该标签
目标伪类选择器
- :target：当url指向该元素时生效。
p:target{
transform: scale(1.2);
color:orange;
transition: 1000ms;
}
/*通过链接访问时变色为橙色，同时在1s内变大1.2倍
<a href="#myp">about</a>
<p id="myp">p 3</p>
复合选择器：由两个及以上基础选择器组合而成的选择器
- element1, element2：同时选择元素element1和元素element2。
p,div{
width: 50px;
height: 70px;
background-color: greenyellow;
}
- element.class：选则包含某类的element元素。
div.big{
transform: scale(1.2);
}
- element1 + element2：选择紧跟element1的element2元素。
p + div{
background-color: blueviolet;
}
//作用在紧跟在p后面的div
- element1 element2：选择element1内的所有element2元素。
ul ul{
color:gold;
}
//选择ul内的ul元素
<ul>
<li>1
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li>2</li>
<li>3</li>
</ul>
- element1 > element2：选择父标签是element1的所有element2元素。
通配符选择器
- ：选择所有标签
[attribute]：选择具有某个属性的所有标签
input[required]{
background-color:red;
}
/*选择属性为required的input标签*/
[attribute=value]：选择attribute值为value的所有标签
input[type=text]{
background-color: aqua;
}
/*选择type属性为text的input标签*/
伪元素标签
将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。
::first-letter：选择第一个字母
p::first-letter{
color: red;
font-size: 110%;
}
/*选择每段第一个字符*/
::first-line：选择第一行
p::first-line{
color: red;
font-size: 110%;
}
::selection：选择已被选中的内容
p::selection{
background-color: aquamarine;
color:yellow;
}
::after：可以在元素后插入内容
::before：可以在元素前插入内容
h1::before{
content: "《";
}
h1::after{
content:"》";
}
/*给h1标题加上书名号*/
样式优先级
- 权重大小，越具体的选择器权重越大：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
- 权重相同时，后面的样式会覆盖前面的样式
- 继承自父元素的权重最低