CSS

Cascading Style Sheet(CSS)层叠样式表，用于修饰网页。

CSS语法

每个声明用';'结尾

选择器 {
            声明1;
            声明2;
            ...
}

CSS引入方式

内部样式表：在HTML中时，一般写在<head></head>标签内，用<style></style>标签包裹。
外部样式表：与HTML文件分离实现，写在单独的css文件中
- 链接式：通过<link rel="stylesheet" href="css/style.css">链接，href属性中为css文件路径（相对/绝对路径）。
- 导入式：通过<style>@import url("css/style.css");</style>，url中为css文件路径，已经逐渐淘汰，缺点：先加载html内容，再加载css样式
  `
行内样式：在标签元素中添加style属性

优先级：就近原则，实现离元素最近的样式

CSS的优势

内容和表现分离
网页结构表现统一，可以实现复用
样式丰富
利于SEO搜索引擎优化

选择器

用于选择页面中的某个/某类元素。
关于选择器的详细参考：MDN：选择器

基本选择器

标签选择器：选择一类标签 标签 {}
类选择器 class，好处：可以复用 .class {}
id选择器 id，id全局唯一，不可复用 #id {}

优先级：id选择器 > 类选择器 > 类选择器

层次选择器

层次选择器不对分隔符前的标签生效，只对选择的标签生效。

后代选择器(以空格分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔），只对下方相邻兄弟元素有效
普通兄弟选择器（以波浪号～分隔），对下方所有兄弟元素有效

代码表示：
HTML结构：

<p id="p1">p1</p>
<p>p2</p>
<p>p3</p>
<p id="p4">p4</p>
<p>p5</p>
<p>p6</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

选择器分析：

/* 层次选择器 */
/* 后代选择器 ul p = p4-p6 */
ul p {
    background-color: aqua;
}
/* 子代选择器 body > p = p1-p6*/
body > p {
    background-color: orange;
}
/* 相邻兄弟选择器 #p1 + p = p2 */
#p1 + p {
    background-color: pink;
}
/* 普通兄弟选择器 #p4 ~ p = p5-p6 */
#p4 ~ p {
    background-color: blueviolet;
}

效果：

结构伪类选择器

伪类：根据条件对元素进行分类，格式：标签:条件
常见结构伪类选择器：

ul li:first-child,表示选中ul的第一个子元素
ul li:last-child,表示选中ul的最后一个子元素
p:nth-child(n),表示选中父类的子代中第n个元素且为p元素才生效
p:nth-of-type(n) 表示选中父类的子代中第n个类型为p的元素

属性选择器

属性选择器语法格式：标签[] {}
[]中可以填写：

属性名
属性名匹配运算符属性值（可以使用正则表达式），常用匹配运算符有：
- =：绝对等于
- *=：包含
- ^=：以...开头
- $=：以...结尾

属性选择器实例：

/* 选择有id属性的元素 */
a[id] {
    background-color: orange;
}
/* 选择id属性中first的元素 */
a[title=second] {
    background-color: darkgreen;
}
/* 选择class属性中包含links的元素 */
a[class*=links] {
    background-color: blue;
}
/* 选中href属性中以http开头的元素 */
a[href^=http] {
    background-color: brown;
}
/* 选择href属性中以pdf结尾的元素 */
a[href$=pdf] {
    background-color: purple;
}

美化网页元素

<span></span>标签，常用于包裹要突出的字。

字体样式

常用字体属性：

font-family：字体系列
font-style：字体风格：正常/斜体(italic)
font-size：字体大小
font-weight：字体粗细
color：字体颜色
font: font-styLe font-weight font-size/line-height font-family；，字体属性复合写法，一次设置多个属性，顺序不可变

文本样式

color：颜色
text-align：对齐方式
text-indent：首行缩进
line-height：行高，常用于上下居中
text-decoration：文本修饰，常用值：none、underline、line-through、overline

超链接伪类

未访问的链接：a:link
已访问的链接：a:visited
鼠标悬停链接：a:hover
已选择的链接：a:active

阴影

为元素样式添加shadow属性，text-shadow: 5px 5px 5px black;

背景

插入背景图片：background-image: url('link')
设置背景图片平铺样式：background-repeat属性，取值：repeat(默认)、repeat-x、repeat-y、no-repeat

渐变：background-image: linear-gradient(270deg, #d96cd6, #00cf52);

CSS入门01

CSS