【沿路行走】-CSS

修改文字颜色

1.在html标签中使用style属性设定字体颜色

<h2 style="color: red;">CatPhotoApp</h2>

2.推荐在html的顶端添加<style>标签，在该标签里面写CSS

如要将所有h2标签的内容颜色设置成蓝色：

<style>

h2 {

color: blue;

}

</style>

3.使用CSS class属性设置颜色

<style>

.red-text { html中所有class="red-text"的元素颜色都为红色

color: red;

}

</style>

<h2 class="red-text">CatPhotoApp</h2> 在需要是红色的元素标签中添加class属性

修改字体大小

font-size:16px;

设置字体

font-family:monospace;

还可以参照以下链接，使用google网站字体

https://developers.google.com/fonts/docs/getting_startedhttps://developers.google.com/fonts/docs/getting_started

大体步骤：

导入google font，在html开头添加<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 其中family属性决定使用的字体；

使用导入的字体：

h2 {

font-family: Lobster;

}

可以设置默认字体

monospace, serif and sans-serif 都可作为默认字体，当指定的字体不可用时可以使用指定的默认字体。

h2 {

font-family: Lobster,monospace;第二个字体为指定的默认字体

}

设置图片大小

width:100px

<style>

.smaller-image {

width: 100px;

}

</style>

<body>

</body>

设置元素边界

<style>

.thick-green-border{

border-color:green;边框颜色

border-width:10px;边框粗细

border-style:solid;设置边框为实线

border-radius: 10px;设置边框圆角（也可用百分比，比如50%）

}

</style>

<img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."> 用空格分开同一元素的多个类属性

背景颜色

<style>

.silver-background{

background-color:silver;

}

</style>

...

</div>

通过id属性设置CSS

每个元素的id最好是独一无二的，如果class和id针对同意元素设置的格式有冲突，按照id的样式

#cat-photo-form{

background-color:green;

}

...

</form>

设置元素的内边距属性

html元素本质是一个个小方块

padding/border/margin控制包围在元素周围的空白

padding决定元素内容到边界的空白填充 padding-top/padding-bottom/padding-right/padding-left设置距离上下右左的距离

margin决定元素的边界到它周围元素之间的空白填充，正值，元素框小，负值元素框会变大

margin-top/margin-bottom/margin-left/margin-right设置距离上下左右的距离

padding和margin除了使用上面的上下左右分别设置距离，还可以使用一条语句设置4个值，四个值对应顺时针方向:上右下左：

margin:40px 20px 20px 40px;

CSS选择器

[attr=value]属性选择器

[type='checkbox']{

margin-top:10px;

margin-bottom:15px;

}

长度单位

除了px还有mm/in（这两个是绝对长度单位）还有em/rem(这两个是相对长度单位，取决于字体大小）

html默认有body标签，就是整个html

<style>

body {

background-color: black;

color:green;

font-family:monospace;

}

</style>

直接可以设置全局背景颜色为黑色，字体颜色和字体;

如果一个元素又通过class重复设置了不同的字体颜色，class决定的style生效

如果一个元素有多个class重复设置了不同的字体颜色，那么在style中后定义的class类型生效

id设置的属性优先级比class高

元素标签内置的style属性优先级最高

但是!important标记的不会被任何覆盖

.pink-text {

color: pink !important;

}

十六进制表示颜色

一共6个十六进制数，每两个表示一个颜色强弱，分别表示RGB

#000000表示黑色

也可以使用0-255的十进制表示：rgb(0,0,0)表示黑色

创建CSS变量

在style标签中：

<style>

.class-name{

--variable-name:gray; 设置变量，前面带--的是变量，后面是变量值

}

可以在其他属性中使用上面定义的变量

.other-property{

background-color: var(--variable-name); 这样背景就被设置成灰色

或者：background-color: var(--variable-name，black);当变量不可用时，使用第二个颜色

也可以重复设置两个：

background-color:red;当浏览器不支持变量使用时，会直接忽略下面的语句，不至于引起错误

background-color:var(--variable-name);

}

</style>

变量作用域

变量在定义它的选择器及选择器的后代中可以用；

如果变量定义在:root{}中，则为全局变量，在所有选择器中都可以使用

:root {

--penguin-belly:pink;

}

在选择器中也可以定义全局变量同名变量并赋值覆盖全局变量的值，修改的部分只在当前选择器中生效。

media查询

:root {

--penguin-size: 300px;

--penguin-skin: gray;

--penguin-belly: white;

--penguin-beak: orange;

}

@media (max-width: 350px) {当屏幕大小大于或小于350px时，会使用下面的变量值，其他使用上面的变量值

:root {

/* Only change code below this line */

--penguin-size: 200px;

--penguin-skin: black;

/* Only change code above this line */

}

文本排列

text-align:justify; 间隔文本使所有行都具有相同的宽度

text-align:center;居中文本

text-align:right;右对齐

text-align:left;左对齐

调节元素宽度

width

调节元素高度

height

字体加粗

<strong></strong>标签包围的内容会被加粗

下划线

<u></u>

斜体

删除线

<s></s>

水平线

<hr>

可调节背景颜色透明度

rgba(r,g,b,a);a取值范围为0-1对应颜色透明度，1完全不透明

添加边框阴影

box-shadow:

offset-x 阴影距离元素的水平距离

offset-y阴影距离元素的垂直距离

blur-radius可以不设置

spread-radius可以不设置

color

设置的时候排列设置上述值，可以叠加设置多个阴影，以逗号分隔

box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

调节元素透明度

opacity:0-1;

调节文本展示（大小写等）

text-transform:

lowercase 小写

uppercase 大写

capitalize 所有单词首字母大写

initial默认格式

inherit继承父节点的格式

none保持原样

调节文本粗细

font-weight:100;

调节文本行间距

line-height:25px

设置锚点a标签链接在鼠标悬停时的状态

a:hover{

color:#001;鼠标悬停时a标签对应的文本颜色变成蓝色

}

设置元素相对位置（只影响当前元素，不影响它周围的元素位置）

h2 {

position:relative;将元素位置设置为相对类型

top:15px;距离顶部15px（还可以是bottom/right/left)

}

设置元素相对其最近的relative祖先（默认）的绝对距离

#searchbar {

position:absolute; 相对section的绝对距离（不管section怎么变，它都保持距离section的这个距离）

top:50px;

right:50px;

}

section{

position:relative;

}

<label for="search">Search:</label>

</form>

</section>

设置元素相对屏幕的绝对距离（用户滚动鼠标它也不动）

postion:fixed;

设置漂浮元素

漂浮元素通过设置float属性来决定是漂浮在父元素的左边还是右边，附加一个width属性决定它占用的水平宽度。

#left {

float:left;

width: 50%;

}

#right {

float:right;

width: 40%;

}

<h2>Content</h2>

<p>Good stuff</p>

</section>

<h2>Sidebar</h2>

<p>Links</p>

</aside>

交换两个重叠元素的覆盖顺序

z-index 值大的在上面，值小的在下面

设置元素水平居中

margin:auto;

hsl设置颜色/透明度/亮度

background-color:hsl(120,100%,50%);

hsl的三个参数分别表示颜色（0-360，0-red,中间值绿色，360附近是蓝色，其他数值填充到三原色中间的过渡色）、饱和度（0-100% 相当于往颜色中加入灰色的比例)、亮度（0-100% 0全黑，100%全白，相当于往颜色中加入黑色和白色的比例）

渐变色设置

linear-gradient(gradient-direction,color1,color2.......);

gradient-direction设置颜色渐变方向（例：90deg水平渐变/45deg 45度方向渐变)

background:linear-gradient(35deg,#CCFFFF,#FFCCCC);设置背景颜色为35度方向渐变，从#CCFFFF到#FFCCCC。

重复渐变条纹带设置

repeating-linear-gradient();

第一个参数是渐变方向，后面的颜色每两个一组，每个颜色后面跟这个颜色的位置，每组决定一个条纹带的渐变颜色及宽度（两个颜色位置之差）。

background: repeating-linear-gradient(

45deg,

yellow 0px,

yellow 40px,宽度为40px的黄色条纹带

black 40px,

black 80px,宽度为40px的黑色条纹带

red 80px,

green 120px宽度为40px的红色到绿色的渐变条纹带

);

最终背景就是重复的斜向上45度渐变的三个条纹带。

插入其他背景图片作为背景

background:url(https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png);

url中提供背景图片的地址。

设置元素大小

transform:scale(2);元素大小变成原来的两倍

div:hover{

transform:scale(1.1);

}设置悬停变化

设置元素绕轴旋转后的状态

transform:skewX(30deg);绕x轴旋转30度，也可以是负度数

skewY绕Y轴旋转

设置简单动画

#rect {

animation-name:rainbow;设置动画名称

animation-duration:4s;设置动画时长

}

@keyframes rainbow{设置对应动画名称的动画规则

0%{开始规则

background-color:blue;开始颜色是蓝色

}

50%{中间时间规则

background-color:green;中间颜色变成绿色

}

100%{最后规则

background-color:yellow;动画最后颜色为黄色

}

0-100%中间的任意百分比都可以设置

当设置悬停动画样式时，动画完成后样式会恢复到最初的样式，为了保持样式填充，可以使用animation-fill-mode:forward
让元素运动，可以在每个阶段设置top/right/bottom/left属性设置不同的位置
animation-iteration-count:指定动画重复次数，infinite无限循环
animation-timing-function:控制动画速度，默认是ease（开始慢中间加速最后慢）、ease-out（开始快然后慢慢减速）、ease-in（开始慢，然后慢慢加速）、linear（匀速）