CSS基础知识

<code>css</code>，英文<code>cascading style sheets</code>，中文名：级联样式表。层叠样式表。

<code>css</code>是一种表现语言，是对网页语言的补充。

<code>css</code>用于网页的风格设计，包括字体，颜色，位置等。

<code>css</code>使用的4中方式：引入外部样式文件，导入外部样式文件，使用内部样式定义，使用内联样式定义。

引入外部样式文件：

导入外部样式文件:

使用内部样式定义：

使用内联样式定义：

层叠：层叠样式生效的优先级：

内联样式-&gt;内部样式-&gt;外部样式-&gt;浏览器默认效果。

继承，就是css属性可以从父元素向下传递到子元素。

元素选择器，是最简单的选择器。

通配符选择器，用<code>"*"</code>表示，表示对任意元素都有效。

属性选择器

格式：

语法

说明

<code>e[attribute]</code>

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

<code>e[attribute=value]</code>

用于选取带有指定属性和指定值的元素

<code>e[attribute~=value]</code>

用于选取属性值包含指定值的元素，该值必须是整个单词，可以前后有空格

<code>e[attribute\|=value]</code>

用于选取带有以指定值开头的属性值的元素，该值必须是整个单词或者后面跟着连字符“-”

派生选择器根据元素在其位置的上下文关系定义样式

派生选择器分3种：后代选择器，子元素选择器，相邻兄弟选择器

后代选择器是某元素后代的所有元素。

子元素选择器是相对于父元素的第一级子元素符合条件。

相邻兄弟选择器，针对的元素是同级元素，拥有相同的父元素，且两个元素是相邻的。

<code>id</code>选择器，以特定<code>id</code>值的html元素指定样式。

类选择器，以指定<code>class</code>的html元素指定样式。

伪类选择器

伪类选择器：伪类选择器和伪元素选择器

伪类以冒号<code>(:)</code>开头，元素选择符和冒号之间不能有空格，伪类名中间也不能有空格。

<code>css</code>中常用的伪类如下表所示：

伪类名

<code>:active</code>

向被激活的元素添加样式

<code>:focus</code>

向拥有输入焦点的元素添加样式

<code>:hover</code>

向鼠标悬停在上方的元素添加样式

<code>:link</code>

向未被访问的链接添加样式

<code>:visited</code>

向已被访问的链接添加样式

<code>:first-child</code>

向元素添加样式，且该元素是它的父元素的第一个子元素

<code>:lang</code>

向带有指定<code>lang</code>属性的元素添加样式

伪元素选择器

<code>css</code>中常用的伪元素如下表所示：

伪元素名

<code>:first-letter</code>

向文本的第一个字母添加样式

<code>:first-line</code>

向文本的第一行添加样式

<code>:after</code>

在元素之后添加内容

<code>:before</code>

在元素之前添加内容

<code>css</code>背景属性如下：

属性

<code>background-color</code>

定义背景颜色

<code>background-image</code>

定义背景图片

<code>background-repeat</code>

定义背景图片是否重复以及其重复方式

<code>background-attachment</code>

定义背景图片是否跟随内容滚动

<code>background-position</code>

定义背景图片的水平位置和垂直位置

<code>background</code>

可以用一条样式定义各种背景属性

<code>background-color</code>用于设置背景颜色，初始值为<code>transparent</code>透明色。

颜色取值3种如：颜色名，十六进制颜色，rgb函数。

<code>background-image</code>用于设置元素的背景图片，默认值为<code>none</code>。

<code>background-repeat</code>控制图像的平铺。

<code>background-repeat</code>默认值为<code>repeat</code>，即图像沿着x轴和y轴平铺，还可以指定沿着x轴平铺<code>rpeat-x</code>，沿着y轴平铺<code>repeat-y</code>，或者不平铺<code>no-repeat</code>，继承父元素该属性设置<code>inherit</code>。

<code>background-attachment</code>用于设置背景图像是否固定或者随着页面的其余部分滚动。默认值为：<code>scroll</code>，表示可以随着页面其余部分的滚动而滚动。设置<code>fixed</code>，表示当页面其余部分滚动时，背景图片不会滚动，设置<code>inherit</code>，继承父元素。

<code>background-position</code>用于设置背景图像圆点的位置。

<code>background</code>可以将<code>background-color</code>，<code>background-position</code>，<code>background-attachment</code>，<code>background-repeat</code>，<code>background-image</code>全部设置。

<code>css</code>常用字体属性表：

<code>font-family</code>

定义文本的字体系列

<code>font-size</code>

定义文本的字体尺寸

<code>font-variant</code>

定义是否以小型大写字母的字体显示文本

<code>font-style</code>

定义文本的字体是否是斜体

<code>font-weight</code>

定义字体的粗细

<code>font</code>

可以一条样式定义各种字体属性

<code>font-family</code>用于设置元素的字体，该元素属性值一般可以设置多个字体。

<code>font-size</code>用于设置字体的尺寸。

<code>font-style</code>用于设置字体是否是斜体，默认值为<code>normal</code>，当设置为<code>italic</code>，显示为一个斜体的样式，当设置为<code>oblique</code>，显示为一个倾斜的样式。

<code>font-variant</code>用于设置字体使用小写字体，默认为<code>normal</code>，一旦设置为<code>small-caps</code>，将所有小写字母变为大写。

<code>font-weight</code>用于设置字体的粗细，<code>normal</code>值等于400，<code>bold</code>的值等于700。

<code>font</code>，可以设置<code>font-family,font-size,font-style,font-variant,font-weight</code>。

<code>css</code>文本属性表：

<code>color</code>

文本颜色

<code>direction</code>

文本方向或者书写方向

<code>letter-spacing</code>

字符的间距

<code>line-height</code>

文本的行高

<code>text-align</code>

文本的水平对齐方式属性,设置元素中文本的水平方式，值有<code>left，right，center，inherit</code>。

<code>text-decoration</code>

给文本添加修饰效果，值有<code>underline为添加下画线，overline添加上画线，line-through添加删除线，blink添加闪烁的效果,none无如何修饰,inherit</code>。

<code>text-indent</code>

定义文本的首行缩进方式，默认值为0

<code>text-shadow</code>

为文本添加阴影效果

<code>text-transform</code>

切换文本的大小写

<code>white-space</code>

设置如何处理元素内的空白

<code>word-spacing</code>

定义单词之间的距离

<code>css</code>尺寸属性表：

<code>width</code>

设置元素的宽度

<code>min-width</code>

设置元素的最小宽度

<code>max-width</code>

设置元素的最大宽度

<code>height</code>

设置元素的高度

<code>min-height</code>

设置元素的最小高度

<code>max-height</code>

设置元素的最大高度

<code>css</code>列表属性表：

<code>list-style-image</code>

设置列表项标记样式为图像，<code>none/inherit/url</code>

<code>list-style-position</code>

设置列表项标记的位置，<code>inside/outside/inherit</code>

<code>list-style-type</code>

设置列表项标记的类型

<code>list-style</code>

可以用一条样式定义各种列表属性

值

<code>disc</code>

实心圆

<code>circle</code>

空心圆

<code>square</code>

方块

<code>decimal</code>

数字

<code>low-roman</code>

小写罗马数字

<code>upper-roman</code>

大写罗马数字

<code>low-alpha</code>

小写字母

<code>upper-alpha</code>

大写字母

<code>none</code>

无标记

<code>inherit</code>

继承父元素的该设置

<code>css</code>表格属性表：

<code>border-collapse</code>

设置是否合并表格边框

<code>border-spacing</code>

设置相邻单元格边框之间的距离

<code>caption-side</code>

设置表格标题的位置

<code>empty-cells</code>

设置是否显示表格中空单元格上的边框和背景

<code>table-layout</code>

设置用于表格单元格列宽的设置方式

<code>css</code>盒模型，包含元素内容<code>content</code>，内边距<code>padding</code>，边框<code>border</code>，外部距<code>margin</code>。

<code>css</code>内边距属性，元素的内边距在边框和内容之间。

<code>css</code>内边距的属性：

<code>padding-top</code>

元素的上内边距

<code>padding-right</code>

元素的右内边距

<code>padding-bottom</code>

元素的下内边距

<code>padding-left</code>

元素的左内边距

<code>padding</code>

用一个声明定义所有内边距属性

设置顺序为上右下左依次进行。

<code>css</code>外边距的属性：

<code>margin-top</code>

定义元素的上外边距

<code>margin-right</code>

定义元素的右外边距

<code>margin-bottom</code>

定义元素的下外边距

<code>margin-left</code>

定义元素的左外边距

<code>margin</code>

用一个声明定义所有外边距属性

<code>css</code>边框的属性：

<code>border-top-style</code>

上边框的样式属性

<code>border-right-style</code>

右边框的样式属性

<code>border-bottom-style</code>

下边框的样式属性

<code>border-left-style</code>

左边框的样式属性

<code>border-style</code>

设置4条边框的样式属性

<code>border-top-width</code>

设置上边框的宽度属性

<code>border-right-width</code>

设置右边框的宽度属性

<code>border-bottom-width</code>

设置下边框的宽度属性

<code>border-left-width</code>

<code>border-width</code>

设置4条边框的宽度属性

<code>border-top-color</code>

设置上边框的颜色属性

<code>border-right-color</code>

设置右边框的颜色属性

<code>border-bottom-color</code>

设置下边框的颜色属性

<code>border-left-color</code>

设置左边框的颜色属性

<code>border-color</code>

设置4条边框的颜色属性

<code>border-top</code>

用一条声明定义所有上边框的属性

<code>border-right</code>

用一条声明定义所有右边框的属性

<code>border-bottom</code>

用一条声明定义所有下边框的属性

<code>border-left</code>

用一条声明定义所有左边框的属性

<code>border</code>

用一条声明定义所有边框的属性

一次定义4条边框的宽度

一次定义4条边框的颜色

边框的样式

<code>none</code>，无边框效果

<code>hidden</code>，与<code>none</code>相同

<code>dotted</code>，点线边框效果

<code>dashed</code>，虚线边框效果

<code>double</code>，双线边框效果

<code>solid</code>，实线边框效果

<code>groove</code>，3d凹槽边框效果

<code>ridge</code>，3d凸槽边框效果

<code>css</code>轮廓是绘制在元素周围的一条线，位于边框边缘的外围，起到突出元素的作用。

<code>outline-style</code>

定义轮廓的样式属性

<code>outline-color</code>

定义轮廓的颜色属性

<code>outline-width</code>

定义轮廓的宽度属性

<code>outline</code>

同一个声明中定义所有的轮廓属性

布局属性是文档中元素排列显示的规则

布局方式3种：普通文档流，浮动，定位

<code>css</code>浮动涉及到的属性

<code>float</code>

设置框是否需要浮动以及浮动方向

<code>clear</code>

设置元素的哪一侧不允许出现其他浮动元素

<code>clip</code>

裁剪绝对定位元素，该元素必须是绝对定位，上右下左原则

<code>overflow</code>

设置内容溢出元素框时的处理方式，值：<code>visible,auto,hidden,scroll</code>

<code>display</code>

设置元素如何显示，值<code>none,block,inline,inline-block,inherit</code>

<code>visibility</code>

定义元素是否可见，<code>visibility</code>设置为隐藏，元素占用的空间依然会保留，但<code>display:none</code>不保留占用空间，值：<code>visible,hidden</code>

<code>css</code>定位的属性

<code>position</code>

元素的定位类型，值<code>static</code>,<code>absolute</code>绝对，<code>relative</code>相对

<code>top</code>

元素上外边距

<code>right</code>

元素右外边距

<code>bottom</code>

元素下外边距

<code>left</code>

元素的左外边距

<code>z-index</code>

元素的堆叠顺序

<code>z-index</code>用于设置目标对象的定位层序，数值越大，所在层级越高。该属性只在<code>position:absolute</code>时有效。

版权声明： 本博客所有文章除特别声明外，均采用 cc by-nc-sa 3.0 许可协议。转载请注明出处！