文章目录
Google字体
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
加在<style>之前
font-family: Lobster,monospace;
当link被注释掉,及Lobster字体失效,则会自动降级使用monospace字体
多个class
<img class="class1 class2">
在一个元素上可以同时应用多个 class,使用空格来分隔不同 class
圆角
圆角
border-radius: 10px;
圆形
border-radius: 50%;
margin外边距
margin-top、margin-right、margin-bottom、margin-left
顺时针标记指定元素的外边距
按顺时针排序:上、右、下、左
margin: 10px 20px 10px 20px;
margin负值
待定
padding 内边距
padding-top、padding-right、padding-bottom、padding-left
顺时针标记指定元素的内边距
按顺时针排序:上、右、下、左
padding: 10px 20px 10px 20px;
body
<body>
下的元素会继承 body 中所设置的样式。
如给body设定color:green,则其下所有字体颜色为绿色。
但是如果该元素设定了color:oink,则样式会覆盖body的样式,字体颜色变为pink
样式覆盖
多个class样式覆盖
.pink-text {
color: pink;
}
.blue-text{
color: blue;
}
<h1 class=" pink-text blue-text">Hello World!</h1>
读取CSS 是由上到下的。 如果发生冲突,浏览器将会应用最后声明的样式。也就是后读到的样式会覆盖之前的。上文最终显示颜色为蓝色
id选择器
id选择器优先级高于class,id 选择器无论在 style 标签的任何位置声明,都会覆盖 class 声明的样式
内联选择器
内联选择器优先级高于id选择器
<h1 style="color: green;">
!important优先级最高
color: pink !important;
可保证CSS 样式不受影响,不会被覆盖
CSS变量一次更改多个元素
<style>
.penguin {
/* 只修改这一行下面的代码 */
--penguin-skin: gray;
通过变量统一修改样式。在变量前添加”--“常见CSS变量
--penguin-belly: white;
--penguin-beak: orange;
/* 只修改这一行上面的代码 */
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}
.penguin-top {
top: 10%;
left: 25%;
background: var(--penguin-skin, gray);
#后者为备用值
#当你的变量有问题或找不到你的变量时,它会使用备用值颜色为gray
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
background: var(--penguin-skin, gray);
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-cheek {
top: 15%;
left: 35%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.right-feet {
top: 85%;
left: 60%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
}
</style>
:root
<style>
:root {
--penguin-belly :pink;
}
</style>
:root 里创建变量在全局都可用,即在任何选择器里都生效
注意:在元素里设定相同的变量时,会重写