CSS

CSS

一、CSS概述

1、CSS简介

CSS指的是层叠样式表（Cascading Style Sheets），主要是用来定义HTML元素如何显示。

2、CSS使用

1）内联样式

内联样式：在HTML标签中嵌入样式。

<p style="color:red;font-family:'楷体';">这是一个有样式的段落。</p>

效果如下：

这是一个有样式的段落。

2）内部样式表

内部样式表：在HTML文件中的<style>标签中编写样式。

<style>  
p{
    color:red;
    font-family:'楷体';
}
</style>

3）外部样式表

外部样式表：将样式定义在外部的样式文件中，以.css后缀结尾。导入样式文件：

<link ref="stylesheet" type="text/css" href="mystyle.css"/>

二、通用样式

1、文字

1）字体

font：复合属性。语法：

font:font-style font-size font-family;

属性	描述
font-family	设置要使用的字体名称。
font-size	设置字体的大小。
font-style	设置字体样式。取值为：nomal(默认值)、italic（斜体）、oblique（认为倾斜字体）
font-weight	设置字体的粗细。取值为：lighter、normal（默认值）、bold、bolder。
font-stretch	设置字体是否横向拉伸变形。取址为：normal（默认值）、ultra-condensed、extra-condensed、condensed、semi-condensed、semi-expanded、expanded、extra-expanded、ultra-expanded。
font-variant	设置字体为小型的大写字母。

2）文本

（1）文本对齐

属性	描述
text-align	文本水平对齐方式，取值为left、center、right。
vertical-align	文本垂直对齐方式，取值为top、middle、bottom。

（2）文本装饰

text-decoration：复合属性，语法：

text-decoration:text-decoration-line text-decoration-style text-decoration-color;

属性	描述
text-decoration-line	设置文本装饰线条的位置，取值为none、underline、overline、line-throungh（贯穿线）、blink（闪烁）。
text-decoration-color	设置文本装饰线条的颜色。
text-decoration-style	设置文本装饰线条的形状，取值为sollid、double、dotted、dashed（虚线）、wavy（波浪线）。
text-decoration-skip	设置文本装饰线条必须略过哪些部分，取值为none、objects（略过内联元素）、spaces（略过空格）、ink（略过字符）、edges（边缘靠内，防止重合）、box-decoration（略过盒子的margin、padding、border）。

（3）其它

• text-shadow：设置文本中文字的阴影效果，语法：

text-shadow:length1 length2 length3 color;

length1：阴影水平偏移值；length2：阴影垂直偏移值；length3：可选，阴影模糊值；color：阴影的颜色。

• text-outline：设置文本的轮廓，语法：

text-outline:thickness blur color;

thick：必需，轮廓的粗细，px；blur：轮廓模糊半径，px。

属性	描述
text-indent	设置文本的缩进，块级或内联块级才可以使用，一般为2em。
text-transform	设置文本的大小写，取值为none、capitalize（首字母大写）、uppercase、lowercase、full-width（fullwidth形式）。
text-overflow	设置文本溢出包含元素时怎么处理，取值为clip（修剪文本）、ellipsis（显示省略号好代表修剪文本）、string（使用给定字符串代表修剪文本）。
direction	设置文本的书写方向，取值为ltr（默认值，从左到右）、rtl（从右到左）、inherit（从父元素继承）。

3）间距

属性	描述
word-spacing	设置单词间距，px。
letter-spacing	设置字符间距，px。
white-space	设置如何处理空白，取值为normal（默认值）、pre（空白保留）、nowrap（不换行）、pre-wrap（保留空白，正常换行）、pre-line（合并空白，保留换行）、inherit（继承父元素）。
word-wrap	长单词换行处理，取值为normal（在断点处换行）、break-word（在长单词或URL地址内部换行）。

4）多列

多列：一般<div>元素中的长文本会一列显示，从左到右，从上到下，逐行显示。但是有了多列属性后，允许在<div>元素中有多个列显示，从左到右逐列开始，每列然后从左到右，从上到下，逐行显示。

• columns：复合属性，语法：

columns:column-width column-fill;

属性	描述
column-width	规定列的宽度。
column-count	规定元素被分隔的列数。
column-gap	设置每列之间的间距。
column-span	设置元素横跨的列数，取值为数字或alll。

- column-rule：复合属性，语法：

column-rule:column-rule-width column-rule-style column-rule-color;

属性	描述
column-rule-width	设置列之间的宽度规则，取址为thin、medium、thick、length（px）。
column-rule-style	设置列之间的样式规则，取值为none、hidden、dotted、dashed、solid、double。
column-rule-color	设置列之间的颜色规则。

2、颜色

1）color

color：通常用来规定文字的颜色，可以取十六进制值、rgb值。

常用颜色

颜色	颜色 HEX	颜色 RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

2）opacity

opacity：用于设置元素的透明度（0.0-1.0）。

3）背景

background：复合属性，语法：

background:bg-image bg-position bg-size bg-repeat bg-attachment

属性	描述
background-color	设置元素背景颜色。
background-image	设置元素的背景图像，例url(bgimage.gif)。
background-position	设置背景图像的开始位置，取值为top left、top center、top right；center left、center center、center right；bottom left、bottom center、bottom right。
background-size	规定背景图片的大小，宽度和高度px。
background-repeat	设置是否重复背景图像，取值为repeat（默认值）、repeat-x、repeat-y、no-repeat、inherit。
background-attachment	设置图像是否固定或随页面滚动，取值为scroll（默认）、fixed、inherit。
background-clip	规定背景的绘制区域，取值为border-box、padding-box、content-box。
background-origin	规定背景图片的定位区域，取值为padding-box（相对内边距定位）、border-box（相对边框定位）、content-box（相对内容定位）。

3、盒模型

1）尺寸

属性	描述
width	设置元素的宽度。
height	设hi元素的高度。
max-width	设置元素的最大宽度。
max-height	设置元素的最大高度。
min-width	设置元素的最小宽度。
min-height	舍子元素的最小高度。

2）边框

（1）border

border：复合属性，设置元素四边的边框，可以分解为下面四个属性：

• border-top
• border-bottom
• border-left
• border-right

语法：

border:border-width border-style color;

（2）border-width

border-width：设置元素的边框宽度，可分解为下面四个属性：

• border-top-width
• border-bottom-width
• border-left-width
• border-right-width

（3）border-style

border-style：设置边框样式，取值为dotted、dashed、solid、double，可分解为下面四个属性：

• border-top-style
• border-bottom-style
• border-left-style
• border-right-style

（4）border-color

border-color：设置边框的颜色，可以分解为下面四个属性：

• border-top-color
• border-bottom-color
• border-left-color
• border-right-color

（5）border-image

border-image：复合属性，设置对象的边框是否用图像填充，语法：

border-image:bi-source bi-slice bi-width bi-outset bi-repeat;

属性	描述
border-image-source	设置边框填充图像的路径，例url(border.png)。
border-image-slice	设置边框图像四方向内偏移，px。
border-image-width	设置边框图像的宽度。
border-image-outset	设置边框图像四方超出边框的值，px。
border-image-repeat	设置边框图像的平铺方式，取值为stretch、repeat、round。

（6）border-radius

border-radius：设置边框四角的圆角，参数–水平半径、垂直半径，可分解为下面四个属性：

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

3）内边距

padding：设置元素的内边距，可分解为下面四个属性：

• padding-top
• padding-bottom
• padding-left
• padding-right

4）外边距

margin：设置元素的外边距，可分解为下面四个属性：

• margin-top
• margin-bottom
• margin-left
• margin-right

5）轮廓

outline：复合元素，在元素边框边缘的外围绘制线段，可起到突出元素的作用，语法：

outline:outline-color outline-style outline-width;

属性	描述
outline-color	设置轮廓的颜色。
outline-style	设置轮廓的样式，取值为dotted、dashed、solid、double。
outline-width	设置轮廓的宽度
outline-offset	对论口进行偏移，并在超出边缘的位置绘制轮廓。

6）box

• box-shadow：向方框添加阴影，语法：

box-shadow:h-offset v-offset blur spread color inset;

h-offset：阴影水平偏移值；v-offset：阴影垂直偏移值；后面皆为可选值，blur：阴影模糊距离；spread：阴影外延值；color：阴影颜色；inset：将外部阴影该为内部阴影，值即为inset。

属性	描述
box-align	设置子元素对齐方式，取值为start、end、center、baseline、stretch。
box-flex	设置子元素如何分配剩余空间。
box-flex-group	设置子元素所属组。
box-lines	设置子元素是否和换行显示。
box-ordinal-group	设置子元素的显示顺序。
box-orient	设置子元素的排列方式。
box-pack	设置子元素的对齐方式。
box-sizing	设置盒模型组成模式，取值为content-box、border-box。

4、定位

1）类型

position：设置元素定位方式，可取值：

值	描述
static	默认值，没有定位，元素处于正常流中。
absolute	绝对定位，将元素从正常文档流中移出来，相对于最近的一个具有定位属性的父元素进行定位。
relative	相对定位，元素相对于正常的位置进行偏移。
fixed	固定定位，相对于视图窗口进行定位。

2）浮动

float：定义元素向哪个方向浮动，取值为left、right。

3）偏移

偏移：设置定位元素向着某一方向进行偏移，有以下四种：上下左右。

• top
• bottom
• left
• right

4）显示

属性	描述
visibility	设置元素是否可见，取值为visible（默认值）、hidden、collapse。
display	设置元素的类型，取值为none、block、inline、inline-block。
clip	剪裁绝对定位元素，例rect(0px,0px,100px,100px)，设置要剪裁的矩形区域。
z-index	设置元素的堆叠顺序，越高的元素处在上面。
overflow	设置元素溢出时怎么处理，取值为visible（默认值）、hidden、scroll（显示滚动条）、auto。
cursor	设置光标显示的类型，取值为default（默认值）、crosshair（十字线）、pointer（手指）、move（指示对象可移动）等。

5、动画

1）animation

animation：复合属性，用来绑定动画，语法：

animation:name duration timing-function delay iteration-count direction;

属性	描述
animation-name	设置要绑定到选择器的keyframe名称。
animation-duration	设置完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	设置动画的速度曲线，取值为linear（速度不变）。、ease（默认，低俗开始，然后加快，结束前变慢）、ease-in（低速开始）、ease-out（低速结束）、ease-in-out（低速开始和结束）、cubic-bezier(n,n,n,n)（，使用函数，值在0-1）。
animation-delay	设置动画开始之前的延迟。
animation-iteration-count	设置动画应该播放的次数，取值为数字n、infinite（无限次）。
animation-direction	设置是否应该轮流反向播放动画，取值为nomal（默认值）、alternate（循环播放）。
animation-play-state	设置动画状态，取值为paused、running。
animation-fill-mode	设置动画在播放之前或之后，效果是否可见，取值为none、forwards、backwards、both。

div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
}

@keyframes mymove
{
    from {left:0px;}
    to {left:200px;}
}

2）transform

transform：向元素应用变换，如旋转、缩放、移动或倾斜，可取值：

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

3）transition

transition：复合属性，用于设置过度，语法：

transition:property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

div{
    width:100px;
    height:100px;
    background:blue;
    transition:width 2s;
}
div:hover
{
    width:300px;
}

三、元素样式

1、<a>

属性	值
text-decoration	当设置为none时，<a>标签没有下划线。
target	设置打开新的文档的方式，取值为_blank、_parent、_top

2、<list>

属性	值
list-style	复合属性，设置列表样式，包含以下三个。
list-style-type	设置列表标记项的类型，取值为none、disc、circle、square、decimal等。
list-style-position	设置列表项标记位置，
list-type-image	设置图像作为列表项标记，取值为inside（文本以内）、outside（默认值，文本左侧）、inherit。

3、<table>

属性	值
border-collapse	设置是否合并表格边框，取值为separate（默认值，table和td边框分开）、collapse、inherit。会忽略border-spacing和empty-cells属性
border-spacing	相邻单元格边框之间的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中空单元格的边框和背景。
table-layout	设置表格的布局算法，取值为automatic（默认）、fixed。

4、<marquee>

<marquee>标签是用来创建滚动字幕，有以下属性。

属性	描述
behavior	设置滚动方式，取值为alternate（来回滚动）、scroll（单方向循环滚动）、slide（只滚动一次）。
bgcolor	文字滚动范围的背景颜色。
direction	文字滚动的方向，取值为down、left、right、up。
width	文字滚动范围的宽度。
height	为你在滚动范围的高度。
hspace	水平间距。
vspace	垂直间距。
loop	设置滚动次数。
scrollamount	滚动速度，数字越大，速度越快。
scrolldelay	滚动延时，数字越大，滚动越慢。
align	设置文字位于矩形的上下左右位置，取值为top、middle、bottom。
onmouseove	可设置鼠标移上，便停止滚动，onmouseove=this.stop()。
onmouseout	可设置鼠标移出，并开始滚动，onmouseout=this.start()

四、CSS选择器

1、基本选择器

1）通配选择器

通配选择器：用*标识，可以匹配任何HTML元素，一般用来去掉边距，减少浏览器之间的差异。

*{
    margin:0px;
    padding:0px;
    list-style-type:none;
}

2）元素选择器

元素选择器：根据元素的类型来匹配元素，所以又称类型选择器。

p{
    color:red;
}

h1{
    font-weight:bold;
}

3）类选择器

类选择器：根据元素的class属性来匹配元素，用.标识。

<div class="divclass"></div>

.divclass{
    border:1px solid red;
}

4）id选择器

id选择器：根据元素的id属性来匹配元素，用#标识。

<div id="divid"></div>

#divid{
    border:1px solid red;
}

2、复合选择器

1）后代选择器

后代选择器：对基本选择器进行再次缩小范围，对已选择元素的所有后代子孙进行匹配，用空格标识。

div span{
    color:red
}

2）子选择器

子选择器：对基本选择器进行再次缩小范围，对已选择元素的直接子元素进行匹配，用>标识。

div>span{
    color:red;
}

3）兄弟选择器

兄弟选择器：对基本选择器进行再次缩小范围，对与已选择元素具有相同父元素的后面一个元素进行匹配，用+标识。

<h1>标题</h1>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

h1+p{
    color:red;
}

会选中第一个p元素，文字会变红。

4）属性选择器

属性选择器：对基本选择器进行再次缩小范围，对已选择元素中具有指定属性的元素进行匹配，用[]标识。

a[href]{
    color:red;
}

对具有href属性的<a>标签进行匹配，没有的不能匹配。

5）伪类选择器

伪类选择器：对基本选择器进行再次缩小范围，对已选择元素的某些状态进行匹配。有以下常用伪类：

属性	描述
:active	向被激活的元素添加样式。
:focus	向拥有键盘输入焦点的元素添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:first-child	向元素的第一个子元素添加样式。
:lang	向带有指定 lang 属性的元素添加样式。

a:hover{
    color:red;
}

当鼠标滑动到<a>标签上时，<a>标签变红色。

6）伪元素选择器

伪元素选择器：对基本选择器进行再次缩小范围，对已选择元素的设置特殊效果。有以下常用伪元素：

属性	描述
:first-letter	向文本的第一个字母添加特殊样式。
:first-line	向文本的首行添加特殊样式。
:before	在元素之前添加内容。
:after	在元素之后添加内容。

p:first-letter{
    font-weight:bold;
}

所有的<p>标签中的第一个字母都会加粗。

3、选择器分组

选择器分组：多个具有相同样式的选择器可以分成一组，直接写一次样式即可。使得样式可以重用，更加简洁，用,标识。

h1,h2,h3{
    font-weight:bold;
}