前端之 CSS选择器、样式

CSS介绍

什么是 CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或 XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS的使用

语法结构：

选择器 { 属性 : 属性值 ; 属性 : 属性值 ; 属性 : 属性值 ; }

三种引入方式：

行间式

<div style="width: 100px; height: 100px; background-color: red">CSS的第一种装饰方式</div>

内联式

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div>CSS的第二种装饰方式</div>
</body>

外联式

file: my.css
div {
	width: 100px;
    height: 100px;
    background-color: red;
}

file: my.html
<head>
    <link rel="stylesheet" type="text/css" href="my.css" />
</head>
<body>
<div> CSS的第三种装饰方式</div>
</body>

注意页面css样式通常都应该写在单独的css文件中

选择器

基本选择器

标签选择器

匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span

div {
    background-color: yellow;
}

类选择器

匹配文档中所有拥有class属性且属性值为red的标签：如<sup class=“red”></sup> <sub class=“red”></sub>均会被匹配

.red {
    color: red;
}

注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。

id选择器

匹配文档中所有拥有id属性且属性值为div的标签：如<div id=“div”></div> <section id=“div”></section>均会被匹配，id选择器必须保证单文档的唯一性

#div {
    text-align: center;
}

通配选择器

匹配文档中所有标签：通常指html、body及body中所有显示类的标签

* {
    border: solid;
}

基础选择器优先级

基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器

组合选择器

群组(分组和嵌套)选择器

分组，不同的选择器可以共用一个样式
div, p, span{
    color: red;
}
嵌套，后代选择器与标签组合使用
div  p,span{
    color: red;
}

分组一次性控制多个选择器，嵌套一次性控制被嵌套的多个选择器
选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合

子代(后代)选择器

子代选择器用>连接
div > span {
    color: red;
}
后代选择器用空格连接
.sup .sub {
    color: red;
}

一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
每一个选择器位均可以为任意合法选择器或选择器组合
子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系

相邻(兄弟)选择器

相邻选择器用+连接 对下不对上
.d1 + .d2 {
    color: red;
}
兄弟选择器用~连接 对下不对上
.d1 ~ .d3 {
    color: red;
}

一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
每一个选择器位均可以为任意合法选择器或选择器组合
相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系

组合选择器优先级

组合选择器优先级与权值相关，权值为权重和
权重对应关系

选择器	权重
通配	1
标签	10
类、属性	100
id	1000
!important	10000

选择器权值比较，只关心权重和，不更新选择器位置
不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合

属性选择器

选择器	功能描述
[ attr ]	匹配拥有attr属性的标签
[ attr = val ]	匹配拥有attr属性，属性值为val的标签
[ attr ~= val ]	匹配拥有attr属性，属性值中包含指定词汇的标签。
[ attr \|= val ]	匹配拥有attr属性，属性值带有以指定值开头的属性值的标签，该值必须是整个单词。
[ attr ^= val ]	匹配拥有attr属性，属性值以val开头的标签
[ attr $= val ]	匹配拥有attr属性，属性值以val结尾的标签
[ attr *= val ]	匹配拥有attr属性，属性值包含val的标签

<head>
    <style>
		只要有xxx属性名的标签都找到
        [xxx] {
            color: red;
        }
        只要标签有属性名为xxx并且值为
        [xxx='1'] {
            color: blue;
        }
        规定p标签内部必须有属性名为xxx并且值为2的标签
        p[xxx='2'] {
          color: green;
        }
    </style>
</head>
<body>
<p xxx>我只有属性名</p>
<p xxx="1">我有属性名和属性值并且值为1</p>
<p xxx="2">我有属性名和属性值并且值为2</p>
</body>

伪类选择器

选择器	类型	功能描述
a:link	链接伪类选择器	选择匹配的a元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
a:hover	用户行为选择器	选择匹配的a元素，且用户鼠标停留在元素a上。
a:active	用户行为选择器	选择匹配的a元素，且匹配元素被激活。常用于链接描点和按钮上
a:visited	链接伪类选择器	选择匹配的a元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
a:focus	用户行为选择器	选择匹配的a元素，而且匹配元素获取焦点

<head>
    <style>
        未访问的链接
        a:link {
            color: red;
        }
        鼠标移动到链接上
        a:hover {
            color: yellow;
        }
        选定的连接
        a:active {
            color: black;
        }
        已访问的链接
        a:visited {
            color: green;
        }
        input输入框获取焦点时样式
        input:focus {
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">笑话网</a>
<a href="http://www.sogo.com">sogo网</a>
<input type="text">
</body>

伪元素选择器

first-letter

常用的给首字母设置特殊样式
p:first-letter {
  font-size: 48px;
  color: red;
}

before

在每个<p>元素之前插入内容
p:before {
  content:"*";
  color:red;
}

after

在每个<p>元素之后插入内容
p:after {
  content:"[?]";
  color:blue;
}

选择器优先级

相同选择器，不同的引入方式：就进原则，谁越靠近标签谁说了算
不同选择器，相同的引入方式：行内样式 > id选择器> 类选择器 > 标签选择器

标签样式

基本样式

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

长度

px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
mm：毫米
cm：厘米
in：英寸
pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
em：相当长度，通常1em=16px，应用于流式布局

颜色

red；直接写英文单词
rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
rgba()：前三个值可为像素或是百分比，最后一个透明度为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness）
hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
#AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc

常用样式

字体样式

font-family：字体族科，多值用于备用，以,隔开

font-family: "STSong", "Arial";

font-size：字体大小
font-style：字体风格 normal、italic、oblique
font-weight：字体重量 normal、bold、lighter、100~900
line-height：行高
font：字重风格大小/行高字族

文本样式

color：文本颜色
text-align：横向排列

left 居左 、center 居中 、right 居右、justify 两端对齐

vertical-align：纵向排列

baseline：将支持valign特性的对象的内容与基线对齐 
sub：垂直对齐文本的下标 
super：垂直对齐文本的上标 
top：将支持valign特性的对象的内容与对象顶端对齐 
text-top：将支持valign特性的对象的文本与对象顶端对齐 
middle：将支持valign特性的对象的内容与对象中部对齐 
bottom：将支持valign特性的对象的文本与对象底端对齐 
text-bottom：将支持valign特性的对象的文本与对象底端对齐

text-indent：字体缩减

p{
    text-indent: 48px;
}

text-decoration：字划线

underline：下划线、overline：上划线、line-through：中划线、none：没有划线、inherit：承父元素的text-decoration属性的值

letter-spacing：字间距
word-spacing：词间距
word-break：自动换行

normal：默认换行规则
break-all：允许在单词内换行

背景样式

background-color：颜色

background-color: green;

background-image：图片，通过 opacity：(0-1) 来控制透明度

background-image: url("bg.png");

background-repeat：重复

background-repeat: no-repeat;
repeat(重复)、 no-repeat(不重复) 、repeat-x(X轴重复) 、repeat-y(Y轴重复)

background-position：定位

background-position: center;
top、bottom、left、right 、center

background-attachment：滚动模式

scroll、fixed

可以写到一起：

background: no-repeat center url("bg.png") blue ;

边框

border-width：边框宽度

border-width: 3px;

border-style：边框类型

none: 默认无边框、dotted: 点线框、dashed: 虚线框、solid: 实线边界、double: 两个边界、groove: 3D沟槽边界、ridge: 3D脊边界

border-color：边框颜色

border-color:
transparent：透明

单独为某一个边框设置样式

{
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-style：上右下左；对不同的边框进行设置

属性可以有1-4个值
border-style:dotted solid double dashed;

可以写到一起：

border: 3px solid red;

border-radius：边框圆弧的角度

div {
    width: 400px;
    height: 400px;
    background-color: red;
    border: 3px solid black;
    border-radius: 50%;
        }

新边框属性

属性	说明
border-image	设置所有边框图像的属性。
border-radius	一个用于设置所有四个边框- *-半径属性属性
box-shadow	附加一个或多个下拉框的阴影

dispaly属性

用于控制HTML元素的显示效果。

值	意义
display:“none”	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:“block”	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:“inline”	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:“inline-block”	使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。