带你快速上手前端三剑客之css

CSS介绍

CSS(Cascading Style Sheet , 层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

组成

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

选择器 {属性1：属性值；属性2：属性值}

h1 {color:red;font-size:14px}

CSS的三种引入方式

嵌入式是将CSS样式集中写在网页的 head标签对应的style标签对中。格式如下

行内样式：

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用

<p style="color:red">

    hello word.

</p>

内部样式：

嵌入式是将CSS样式集中写在网页的< head>< /head> 标签对的 < style>< /style> 标签对中。格式如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS三种引入方式</title>

    <style>

        p{

            background-color:#2b99ff;

        }

    </style>

</head>

<body>

	<p>

        qzk

    </p>

</body>

</html>

外部样式：
- 外部样式就是讲CSS写在一个单独的文件中，然后再页面进行引入即可。推荐使用此方法。
```
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
```

CSS选择器

Ⅰ 基本选择器

① 元素选择器

p{color:"red";}

② ID选择器

#i1{

background-color:red;

}

③ 类选择器

.c1{

font-size:14px

}

p.c1{

color:red;

}

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

④ 通用选择器

*{color:white;}

Ⅱ 组合选择器

①后代选择器

/*li内部的a标签设置字体颜色*/

li a {

    color:green;

}

②儿子选择器

/*选择所有父级是<div>元素的<p>元素*/

div>p{

    font-family: "Arial Black",arial-black,cursive;

}

③毗邻选择器

/*选择所有紧接着<div>元素后面的<p>元素*/

div+p{margin：5px;}

④弟弟选择器

/*i1后面所有的兄弟p标签*/

#i1~p{

    border:2px solid royalblue;

}

Ⅲ 属性选择器

/*用于选取带有指定属性的元素*/

p[title] {

    color:red;

}

/*用于选取所有指定属性和值的元素*/

p[title="213"]{

    color:green;

}

下面是不太常用的选择器

/*找到所有title属性以hello开头的元素*/

[title^="hello"] {

  color: red;

}

/*找到所有title属性以hello结尾的元素*/

[title$="hello"] {

  color: yellow;

}

/*找到所有title属性中包含（字符串包含）hello的元素*/

[title*="hello"] {

  color: red;

}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/

[title~="hello"] {

  color: green;

}

不怎么常用的属性选择器

Ⅳ 分组与嵌套

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：

div,

p {

    color:red;

}

上面代码为div标签和p标签统一设置为红色。

嵌套

多种选择器可以混合起来使用，比如：.c1 类内部所有的p标签设置字体颜色为红色

.c1 p{

    color:red;

}

Ⅴ 伪类选择器

一般用在 a标签超链接网页的时候

/* 未访问的链接 */

a:link {

  color: #FF0000

}

/* 已访问的链接 */

a:visited {

  color: #00FF00

} 

/* 鼠标移动到链接上 */

a:hover {

  color: #FF00FF

} 

/* 选定的链接 */

a:active {

  color: #0000FF

}

/*input输入框获取焦点时样式*/

input:focus {

  outline: none;

  background-color: #eee;

}

Ⅵ 伪元素选择器

first-letter 常用的给首字母设置特殊样式

p:first-letter{

    font-size:48px;

    color:red;

}

before

/*在每个<p>元素之前插入内容*/

p:before{

    content:"*";

    color:red;

}

after

/*在每个<p>元素之后插入内容*/

p:after{

    content:"[?]";

    color:blue;

}

注：before 和 after 多用于清除浮动

选择器优先级

CSS继承

继承是CSS的一个主要特征，它依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用与某个特定的元素，还可以应用与他的后代。例如一个body定义了一个字体颜色值也会应用到段落文本中

body{

    color:red;

}

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重非常低的，是比普通元素的权重还要低的，我们只要给对应的标签设置字体颜色就可以覆盖掉他的继承的样式。

p{

    color:green;

}

此外，继承是CSS重要的一部分，我们甚至不同区考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能继承。如：border，margin，padding等。

选择器的集体优先级决定于选择器的权重：

内联样式的权重为10000

id选择器的权重为100

类选择器的权重为10

元素选择器的权重为1

注：权重计算永不进位。

简单的说就是一般情况下：内联样式 > id选择器 > 类选择器 > 标签选择器

除此之外，还可以通过添加！important 方式来强制让样式生效，但是并不推荐使用。因为如果过多的使用会是样式文件混乱不易维护。

CSS属性相关

宽和高

width属性可以为元素设置宽度

height属性可以为元素设置高度

块级标签才能设置宽度，内联标签的宽度有内容来决定

字体属性

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个，浏览器会使用它可识别的第一个值。

body {

  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

}

/*设置字体大小*/

p {

  font-size: 14px;

}

字重（字体粗细）

font-weight用来设置字体的字重（粗细）

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal ，700等同于bold
inherit	继承父元素字体的粗细值

文本颜色

颜色属性被用来设置文字的颜色

颜色是通过css最近常的制定：

十六进制值 - 如：#FF0000

一个RBG值 - 如：RBG(255,0,0)

颜色名称 - 如：red

还有rgba(255,0,0,0.3),第四个值是 alpha 指定了色彩的透明度/不透明度，它的范围为0.0-1.0之间

文字属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰

text-decoration 属性用来给文字添加特殊效果

值	描述
none	默认定义标准的文本常用
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本的一条线
inherit	继承父元素的 text-decoration属性值

a {

    text-decoration:none;

}

首行缩进

将段落的第一行缩进32个像素

p{

    text-indent:32px;

}

背景属性

/*背景颜色*/

background-color：red;

/*背景图片*/

background-image:url('1.jpg')

/*被禁重复*/

repeat(默认)：背景图片平铺排满真个网页

repeat-x：背景图片只在水平方向上平铺

repeat-y：背景图片只在垂直方向上平铺

no-repeat：背景图片不平铺

/*背景位置*/

background-position：left top;

/*background-position:200px 200px*/

/*支持简写*/

background：#336699 url('1.png') no-repeat left top;

边框

border-width

border-style

border-color

#i1{

    border-width:2px;

    border-style:solid;

    border-color:red;

}

值	描述
none	无边框
dotted	点状虚线边框
dashed	矩形虚线边框
solid	实现边框

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#i1 {

  border-top-style:dotted;

  border-top-color: red;

  border-right-style:solid;

  border-bottom-style:dotted;

  border-left-style:none;

}

border-radius：可以实现圆角边框的效果

将border-radius设置为长或高的一半即可得到一个圆形

display属性

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

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

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

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

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