CSS

CSS概念：
CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过并且推荐使用的。简单地说，CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。它以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化游览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪和PDA等。CSS的引入随即引发了网页设计一个又一个新高潮，使用CSS设计的优秀页面层出不穷。
现在我们使用的是HTML5+CSS3。

CSS的基本语法：
CSS代码可以放在HTML文件的< style >标签内，也可以放在网页标签的style属性中，但推荐用法是放在单独的样式表文件中，然后通过标签或者使用@import命令导入网页文档。CSS样式表文件是一个文本文件，扩展名为.css，可以使用任何文本编辑器打开，并进行编辑。
CSS代码被分割为一个个样式，它也是CSS代码的最小单元。每一个CSS样式都必须由两部分组成：选择器（Selector）和声明（Declaration）。
声明又包括属性（Property）和属型（Value）。在每个声明之后要用分号表示一个生命的结束。其中，在样式的最后一条声明中可以省略分号。但建议使用分号结束声明。
基本语法如下：

body{
    font-size: 12px;
    color: #F00;
}

其中，body是选择器，表示元素本身，即< body >标签；font-size是属性，表示字体大小，12px表示属性值；color也是属性，表示颜色，#F00表示颜色的值。

引入方式：

  • 行内样式
    使用style属性引入CSS样式
<body style="color: black; font-size: 20px">
  • 内部样式表
    CSS代码写在< head >的< style >标签中
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> 
    body{
        color: black;
        font-size: 20px;
        font-family: 楷体;
    }
    </style>
  • 外部样式表
  1. 链接式
    需要使用link标签
    在< head >标签内使用link标签导入CSS文件的路径，一般导入相对路径比较好
<link rel="stylesheet" href="../CSS/Css1.css">
  1. 导入式
    在< style >标签中使用@import导入CSS文件
<style>
        @import url("../CSS/Css1.css");
    </style>

链接式和导入式的区别

  1. < link >标签属于XHTML，@import是属于CSS2.1
  2. 使用< link >标签链接的CSS文件先加载到网页中，再进行编译显示
  3. 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页中
  4. @import是属于CSS2.1特有的，对不兼容CSS2.1的游览器是无效的。
    建议使用link来链接CSS文件，因为先加载CSS文件对面用户来说比较好一些，如果用import那么会先显示HTML内容，之后才会显示出CSS布局结构。而link会先加载CSS文件之后才会显示HTML内容。

CSS样式优先级（就近原则）
行内样式>内部样式表>外部样式表

选择器

标签选择器
HTML标签作为标签选择器的名称
如body，h1~~h6，p等

h1{
    font-size: 12px;
    color: #F00;
}

类选择器
在标签后面加入 class=“类名称”
<标签名 class=“类名称”>标签内容</标签名>

<head>
    <style>
        .class{
            font-size: 20px;
            color: aquamarine;
        }
    </style>
</head>
<body>
<p class="class">JavaWeb</p>
</body>

id选择器
<标签名 id=“id名称”>标签内容</标签名>

<head>
    <style>
    #111{
        font-size: larger;
        color: black;
    }
    </style>
</head>
<body>
<p id="111">JavaWeb</p>
</body>

标签选择器可以直接应用于HTML标签
类选择器可以在页面内多次使用
id选择器在同一个页面中只能用一次

基本选择器的优先级
ID选择器>类选择器>标签选择器

高级选择器

层次选择器

选择器

类型

功能说明

E F

后代选择器

选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内

E>F

子选择器

选择匹配的F元素，且匹配的F元素时匹配的E元素的子元素

E+F

相邻兄弟选择器

选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面

E~F

通用兄弟选择器

选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    body p{
        background: #FF0000;
    }
    </style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>
    <ul>
    <li><p>4</p></li>
    <li><p>5</p></li>
    <li><p>6</p></li>
</ul>
</p>
</body>
</html>

选择body元素下所有的p元素

子选择器

body>p{
        background: #FF0000;
    }

选择body元素中所有的子元素p 与上一个不同的是 li中的p元素不会被选中，因为li中的p元素是属于li的子元素

相邻兄弟选择器
使用相邻兄弟选择器的前提是要定位的一个元素，是选择指定元素的相邻的下个相同元素。如果下个元素和指定元素不是相同的元素，就不会被选中。

<head>
    <style>
    #a+p{
        background: #FF0000;
    }
    </style>
</head>
<body>
<p id="a">1</p>
<p>2</p>
<p>3</p>
<p>
    <ul>
    <li><p>4</p></li>
    <li><p>5</p></li>
    <li><p>6</p></li>
</ul>
</p>
</body>

通用兄弟选择器
通用兄弟选择器的用法和相邻兄弟选择器大致相同，前提都是需要定位一个元素，选择定位元素后面的所有和定位元素同级的元素，但是不包括定位元素

<html lang="en">
<head>
    <style>
    #a~p{
        background: #FF0000;
    }
    </style>
</head>
<body>
<p id="a">1</p>
<p>2</p>
<p>3</p>
<hr>
<p>7</p>
<p>
    <ul>
    <li><p>4</p></li>
    <li><p>5</p></li>
    <li><p>6</p></li>
</ul>
</p>
</body>
</html>
结构伪类选择器

选择器

功能说明

E：first~child

作为父元素的第一个子元素的元素E

E：last~child

作为父元素的最后一个子元素的元素E

E F：nth-child(n)

选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd

E：first-of-type

选择父元素内具有指定类型的第一个E元素

E：last-of-type

选择父元素内具有指定类型的最后一个E元素

E F： nth-of-type(n)

选择父元素内具有指定类型的第n个F元素

属性选择器

属性选择器

功能描述

E[attr]

选择匹配具有属性attr的E元素

E[attr=val]

选择匹配具有属性attr的E元素，并且属性值为val（其中val区分大小写）

E[attr^=val]

选择匹配E元素，且E元素定义了属性attr，其属性值是以val开头的任意字符串

E[attr$=val]

选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串

E[attr*=val]

选择匹配元素E，且E元素定义了属性attr，其属性值包含了"val"，换句话说，字符串val与属性值中任意位置匹配