CSS

CSS是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部导入，比较三种方式的优缺点。

语法：style = “key1:value1;key2:value2;”

• 在标签中使用 style=”xx:xxx;”（任何一个标签都可以使用style属性来编写样式）
• 在页面中嵌入 块(rel可省略)
• 导入外部css文件 @important”yangshi.css” 引号内路径是url的格式
• 导入式会在网页装载完后再装载CSS文件，嵌入式在网页主体装载前装载CSS文件，因而显示出来的网页一开始就是带样式效果的，不会像导入式先显示无样式网页再显示有样式网页。这是页面嵌入方式的优点。

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必需知道是如何实现的。

CSS选择器（编写CSS样式）

选择器指的是，在标签中的标签中编写样式（或者在CSS文件中编写），在内的标签来选择已经写好的样式，提高了重用率，减轻了body中的代码臃肿。

一、基本选择器

1.id选择器(不建议用)

样式编写以#开头，标签选择用id属性，每个标签使用的id都不能相同（唯一配对）

#名称{ …….. }

2.标签选择器

如下所示，将所有div标签设置成此样式。

div{ …… }

3.class样式选择器(最常用)

样式编写以 . 开头，可以使用相同的设置

.名称{ …….. }

4.通用选择器

使用*选择所有元素

*{color:black}

二、组合选择器

1.并集选择器

并列关系，用逗号隔开

.c1,.c2,div{ ……… }

2.层级选择器（后代选择器，常用）

样式的选择具备层级关系，相似于目录(用空格隔开)

span div{ ……… }

.c1 div{ ……… }

.c1 .c2{ ……… }

1

2

div>p{ …… } 儿子选择器：从div的子标签中找到p标签，设置样式

div + p{ ……. } 毗邻选择器：匹配所有紧邻div元素之后的同级p元素

三、属性选择器

先做一遍挑选，对挑选出来的标签根据属性再做挑选，并设置该样式

格式：标签名 [ 属性 = “值” ]{ …编写的样式… }

如：input[name=”alex”]{width:10px;height:20px;}

.c1[type=”password”]{height:40px;width:30px;}

+ View Code

四、伪类选择器

CSS伪类是用来给选择器增加少量特殊效果。

a:link{ … } 没有访问的超链接的样式

a:visited{ … } 访问过的额超链接的样式

a:hover{ … } 鼠标悬浮在标签上方的样式

a:active{ … } 鼠标点击瞬间的样式

input:focus{ … } input输入框获取焦点时的样式

:before{ … } 在元素内容前面插入新内容

:after{ … } 在元素内容后面插入新内容

:first-letter{ … } 为文本首字母设置特殊样式

在定义a标签样式时，由于浏览器按照就近准则来解释css，定义的顺序不同，显示的效果就不同。正确的顺序是：a:link 、a:visited 、a:hover 、a:active

+ View Code

伪类标签还可以这样用：

+ View Code

注意：必需是标签内的子标签才可以应用，假如改成，企图将以上样式应用于自己本身是无法实现的

五、CSS优先级和继承

CSS优先级：

应用的优先级，按照选择器的权重规则来决定。当权重相同时，按照就近准则：style内联 > 书写距离近 > 书写距离远。

1

2

3

4

5

内联样式权重为 1000

ID选择器权重为 100

class选择器权重为 10

元素选择器权重为 1

权重计算永不进位

例如：

+ View Code

CSS的继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如body中定义了字体颜色，它也会应用到字标签的文本中。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。因而任何显示申明的规则都可以覆盖其继承样式。　

此外，CSS继承也是有限制的，有少量属性不能被继承，如：border，margin，padding，background等。

另外：!important 公告方式强制样式生效，不推荐使用，由于大量使用 !inportant 的代码是无法维护的。假如!important公告冲突，则比较优先权。

基本样式

标签大小

高度： height

宽度： width

最小宽度： min-width

字体文本

字体： font-famliy: “Microsoft Yahei”, “微软雅黑”, “Arial”; 假如系统不支持第一个字体，会尝试下一个。

文本大小： font-size：20px / 50% / 1rem；

字体粗细： font-weight 取值：normal(默认值)，bold粗体(700)，bolder(更粗)，lighter(更细)，设置具体值(100-900)

字体颜色： color 取值：①十六进制值：＃FF0000；②颜色名称：red；③RGB值：rgb(255,0,0)；④RGBA值：rgba(255,0,0,0.5)

水平对齐：　text-align 取值：left(默认)，right，center，justify(两端对齐)

行高： line-height 可以调整水平居中：标签多高，这里就要设置多高

垂直对齐： vertical-align 设置元素的垂直对齐方式，只对行内元素有效。常用值：top，text-top，bottom，text-bottom，middle，像素值，百分比。

文字装饰：　text-decoration 取值：none(默认)，underline(文本下划线)，overline(文本上划线)，line-through(穿过文本的一条线)

字体的风格：font-sytle 取值：normal，italic(斜体)，oblique(倾斜)

首行缩进：　text-ident 取值：像素值，百分比。

字符间距： letter-spacing 取值：normal，像素值。

字间距： word-spacing 取值：normal，像素值。

控制文本大小写：text-transform 取值：none(默认)，capitalize(单词首字母大写)，uppercase(一律大写)，lowercase(一律小写)

文本阴影效果：text-shadow 取值：h(必须)水平阴影的位置，v(必须)垂直阴影的位置，blur模糊的距离，color阴影的颜色。例：text-shadow: 1px 3px 5px #FF0000;

换行： word-break 取值：normal(浏览器默认的换行规则)，break-all(允许在单词内换行)，keep-all(只能在半角空格或者字符处换行)

word-wrap 取值：normal(浏览器默认的换行规则)，break-word(允许长单词或者url地址内部换行)

浏览器默认换行规则：中文自动换行，英文数字以单词为最小单位(空格间隔)自动换行，假如一连串字符没有空格，浏览器认为它是一个单词不予换行。

关于RGB(A)色彩模式：rgba(red,green,blue,alpha) ，其中alpha取值0~1，表示透明度。red，green，blue三个参数取值0~255，也可用百分比。色彩模式与RGB相同（通过对红绿蓝三个颜色通道的变化和他们相互之间的叠加来得到各式各样的颜色。（0，0，0）表示黑色，（255，255，255）表示白色）

背景 background

background 分为以下几类：

background-color 背景颜色设置为红色 如：background-color:red;

background-image 设置背景图片 如：background-image::url(“image/4.jpg”);

background-size 设置背景图片的尺寸，有三类可选的值：宽高（px值或者百分比，1或者2个值）、cover、contain。如：background-size:10px 10px;

background-repeat 假如设置了背景图片，这个属性则可以设置重复平铺。默认是no-repeat不平铺。还可以设置repeat表示背景图片横向纵向都平铺。 repeat-x表示只在横向平铺，repeat-y表示只在纵向平铺。

background-position 设置背景图片的起始位置。如：background-position：center | right bottom | top center | left bottom | 10% 20% | 50px 60px 。

background-origin 规定background-position属性相对什么来定位。值：padding-box | border-box | content-box ，分别表示相对于内边距框定位、相对边框定位、相对内容框定位。

background-clip 规定背景的绘制区域，值：border-box | padding-box | content-box ，分别表示背景被剪裁到边框、内边距框，内容框。

background-scroll 规定背景图像能否固定或者随页面滚动。 值：scroll(默认)随着滚动，fixed图像不会移动。

注意：假如将背景图片加在body上，要设置body的高度，否则无法撑起背景图片。

边框 border

样式：border: 宽度 样式 颜色 。样式中：dotted表示点线，dashed表示虚线，solid表示实线

如：border：2px dotted red;

可以拆分成：border-width :2px；border-style :dotted；border-color :red；

border-radius:50%

列表属性

针对ul，ol的设置，list-style 是一个简写属性，包括了list-style-type，list-style-position，list-style-image

list-style-type：设置列表项标记的类型。none(无标记)，disc(默认，实心圆)，circle(空心圆)，square(方块)，decimal(数字)……等等。

list-style-position：设置在何处放置列表项标记。inside(放在文本内)，outside(默认值，放在文本的左侧)

list-style-image：使用图像来替换列表项的标记。（请始终规定一个list-style-type属性以防图像不可用）URL(图像的路径)，none(默认，无图像)

display

可以将标签设为行内或者块级属性。设置 inline 为行内，设置 block 为块级。

假如设置 inline-block 则同时具备：

inline的属性：默认自己有多少空间占多少空间

block的属性：可以设置高度，宽度，边距 （ 行内标签不可设置高度和宽度，而块级标签可以）

值为none，则隐藏标签，不显示也不占据页面空间。

※ inline-block的间隙

+ View Code

(1) 我们可以通过margin:-3px来处理，但是

1.我们布局一定很多元素，不可能每个都增加margin负这样维护成本太大了

2.我们线上代码假如压缩，那么我们就不存在哪个4px的问题了，那么我们的margin负就回造成布局混乱！

(2)我们可以给几个标签加一个父级div，而后：

1

div{word-spacing: -5px;} 设置字间距

visibility

该属性能设置元素能否可见，与display：none不同的是，visibility：hidden会不可见，但占据页面空间。

值：visible 默认值，可见的。

hidden 隐藏

内边距和外边距（margin padding）