css 所有属性大汇总

1.背景格式

body{

background-color:#ffffff; #背景颜色

background-image:url('img_tree.png'); #背景图片

background-repeat:no-repeat; #图片是否平铺, repeat-x水平铺,默认是垂直铺,no-repeat不铺

background-position:right top; #图片位置

background-attachment:fixed #背景图像是否固定或者随着页面的其余部分滚动

}

scroll背景图片随着页面的滚动而滚动，这是默认的。fixed背景图片不会随着页面的滚动而滚动。local背景图片会随着元素内容的滚动而滚动。

简略写法:body {background:#ffffff url('img_tree.png') no-repeat right top;}

2.文本格式

body {

color:red;text-align:center;

text-decoration:underline;text-transform:uppercase;

text-indent:50px;letter-spacing:2px;line-height:90%;

word-spacing:10px;text-shadow:2px 2px #FF0000;direction:rtl;

}

注释:color 文本颜色，text-align对齐方式，text-decoration文字装饰（overline上划线,line-through中划线,underline下划线）text-transform：字母大小写转换（uppercase 大写，lowercase 小写，capitalize 首字母大写）text-indent：文本缩进 letter-spacing：设置字间距，line-height行高，word-spacing元素中空白的处理方式 text-shadow：阴影

3.字体

.font{font-style:normal;font-size:40px;font-weight:bold;}

注意:

font-weight:字体加粗(bold),normal(正常),lighter(字体变细)

font-style:normal(正常),italic(斜体)

4.超链接

a:link {color:#000000;text-decoration:none;} /* 未访问链接*/

a:visited {color:#00FF00;text-decoration:none;} /* 已访问链接 */

a:hover {color:#FF00FF;font-size:150%;background:green;text-decoration:underline;} /* 鼠标移动到链接上 */

a:active {color:#0000FF;text-decoration:underline;} /* 鼠标点击时 */

注意:

1)a:hover 必须跟在 a:link 和 a:visited后面,a:active 必须跟在 a:hover后面

2)text-decoration下划线是否存在,none不存在,underline存在

5.列表样式:

1)list-style-type参数介绍:

lower-alpha(小写字母),upper-alpha(大写字母),lower-roman(小写罗马数字),upper-roman(大写罗马数字),none(没有样式),circle(空闲圆),square(方块),实心圆--->(默认)

2)list-style-image:将图像设置为列表项标志

3)list-style-position:设置列表中列表项标志的位置

6.表格

1)标题样式

caption {

caption-side:bottom; #标题的位置:top/bottom

font-size:25px;color:pink; #标题字体大小和颜色

text-align:right; #标题靠右居中

}

2)表格单元格样式设置:

td{

color:green; #字体颜色

background:red; #背景颜色

border:1px solid black; #td的边框颜色,像素,类型

text-align:center; #字体居中方式

vertical-align:bottom; #垂直对齐属性设置:bottom/top/middle

height:50px; #行高

}

3).表格的边框:

table{

border-collapse:collapse; #设置表格的边框是否被折叠成一个单一的边框或隔开

width:100%; #宽度

height:100%; #高度

border:1px solid red; #存在边框,如果单元格th,td设置了边框,.表格table可以省略,如果只设置table有表格,th,td没有,那只有外边框.

}

7.css盒子模型介绍:

css盒子模型

介绍盒子模型的构造:

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

7.1)margin(外边距)和padding(内边距)介绍:

margin(外边距)和padding(内边距)介绍

margin:

margin:25px; #上下左右外边距:25px

margin:25px 50px; #上下外边距:25px,左右外边距:50px

margin:25px 50px 70px; #上外边距:25px,左右外边距:50,下外边距:70px

margin:3cm 2cm 5cm 5cm; #上外边距:3cm,右外边距:2cm,下外边距:5cm,左外边距:7cm

margin-top上外边距;margin-bottom:下外边距;margin-right:右外边距;margin-left:左外边距;

padding:

padding:25px; #上下左右内边距:25px

padding:25px 50px; #上下内边距:25px,左右内边距:50px

padding:25px 50px 70px; #上內边距:25px,左右內边距:50,下內边距:70px

padding:3cm 2cm 5cm 5cm; #上內边距:3cm,右內边距:2cm,下內边距:5cm,左內边距:7cm

padding-top(上內边距)padding-bottom(下內边距)padding-right(右內边距)padding-left(左內边距);

7.2-border(边框样式)

border-style:solid; #边框样式,dotted(点线边框),dashed(虚线边框),solid(实线边框),double(双边框)

border-width:1px; #边框的宽度

border-color:red; #边框的颜色

(border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式)

以上三个等价于: border:1px solid red;--------->所有边框设置样式

单独设置每条边框的样式:

border-top:thick solid #ff0000; #上边框样式

border-bottom:thick double yellow; #下边框样式

border-right:thick dashed green; #右边框样式

border-left:thick dotted grey; #左边框样式

7.3 outline样式

outline样式

此处占满了就是margin

outline:1px solid red;--------->宽度,样式(和边框border一样),颜色

8.嵌套选择器

p{ }: 为所有 p 元素指定一个样式。

.marked{ }: 为所有 class="marked" 的元素指定一个样式。

.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。

p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

9.元素显示还是隐藏(display),可见还是隐藏(visibility)

h1.hidden {visibility:hidden;} #实例中的隐藏标题h1的内容仍然占用空间,

h1.hidden {visibility:collapse;} #实例中的隐藏标题h1的内容不占用空间

h1.hidden {display:none;} #实例中的隐藏标题h1的内容不占用空间

li{display:inline;} #将列表元素内容由纵向显示变成横向显示

a{display:block;} #将元素中内容由横向显示变成纵向显示

10.position 位置

1) position: static; 无特殊定位，遵循正常的文档流对象

2)fixed 定位:元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动

p.pos_fixed{

position:fixed; #固定位置

top:30px; #位置高的距离

right:5px;} #位置右的距离

3)relative 定位:相对定位元素的定位是相对其正常位置

h2.pos_left{

position:relative; #相对定位元素

left:-20px; #从元素的原始左侧位置减去 20 像素,如果是正数就向左增加20px

}

4)absolute 定位:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

h2{ position:absolute;

left:100px;

top:150px;}

5) sticky 定位:基于用户的滚动位置来定位

div.sticky {

position: sticky;

top: 0;}

6)重叠元素:z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序

img{ position:absolute;

left:0px;

top:0px;

z-index:-1;} #正数显示在后面,不会被覆盖,负数可以被覆盖

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面

11.鼠标的各种状态:

p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>

<span style="cursor:auto">auto</span><br>

<span style="cursor:crosshair">crosshair</span><br>

<span style="cursor:default">default</span><br>

<span style="cursor:e-resize">e-resize</span><br>

<span style="cursor:help">help</span><br>

<span style="cursor:move">move</span><br>

<span style="cursor:n-resize">n-resize</span><br>

<span style="cursor:ne-resize">ne-resize</span><br>

<span style="cursor:nw-resize">nw-resize</span><br>

<span style="cursor:pointer">pointer</span><br>

<span style="cursor:progress">progress</span><br>

<span style="cursor:s-resize">s-resize</span><br>

<span style="cursor:se-resize">se-resize</span><br>

<span style="cursor:sw-resize">sw-resize</span><br>

<span style="cursor:text">text</span><br>

<span style="cursor:w-resize">w-resize</span><br>

<span style="cursor:wait">wait</span><br>

12.overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条

div {

background-color: #eee;

width: 200px;

height: 50px;

overflow: visible;}

visible默认值。内容不会被修剪，会呈现在元素框之外

hidden内容会被修剪，并且其余内容是不可见的

scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

inherit规定应该从父元素继承 overflow 属性的值

13. Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列

.thumbnail {

float:left;} #向左浮动

.text_line{

clear:both;} #取消浮动

13.居中---->尤其是div中的内容居中*******

14.css组合选择符

在 CSS3 中包含了四种组合方式:后代选择器(以空格分隔),子元素选择器(以大于号分隔）,相邻兄弟选择器（以加号分隔）,普通兄弟选择器（以破折号分隔）

1)后代选择器(空格分割)------>后代选择器用于选取某元素的后代元素:

div p{

color:red;} #作用于所有div中的p元素

2)子元素选择器(以大于号分隔）------>只能选择作为某元素子元素的元素

div>p{

color:red;} #只作用所有于div中一级子元素p,在以下一级就不会应用

<div><p>123</p><b><p>456</p></b></div> #只作用123,456没效果.

3)相邻兄弟选择器（以加号分隔）------>可选择紧接在另一元素后的元素，且二者有相同父元素

div+p{

color:green;} #选取了所有位于 <div> 元素后的第一个 <p> 元素

4)普通兄弟选择器（以破折号分隔）----->选取所有指定元素之后的相邻兄弟元素

div~p{

color:black;} #选取了所有 <div> 元素之后的所有相邻兄弟元素 <p>

css组合选择符

15.伪类

1)anchor伪类

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html">CSS 语法</a> ---->有red类的链接访问后的样式

a:visited {color:#FF0000;} --------------->所有链接访问之后的样式

2)first-child 伪类:(选择父元素的第一个子元素):

p:first-child{ color:blue;} #任何元素的第一个子元素的 <p> 元素

p > i:first-child{ color:blue;} #选择相匹配的所有<p>元素的第一个 <i> 元素

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

选择相匹配的所有<p>元素的第一个 <i> 元素

p:first-child i{ color:blue;}

#选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素

:checked input:checked 选择所有选中的表单元素

:disabled input:disabled 选择所有禁用的表单元素

:empty p:empty 选择所有没有子元素的p元素

:enabled input:enabled 选择所有启用的表单元素

:first-of-type p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素

:in-range input:in-range 选择元素指定范围内的值

:invalid input:invalid 选择所有无效的元素

:last-child p:last-child 选择所有p元素的最后一个子元素

:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素

:not(selector) :not(p) 选择所有p以外的元素

:nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素

:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素

:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素

:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素

:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素

:only-child p:only-child 选择所有仅有一个子元素的p元素

:optional input:optional 选择没有"required"的元素属性

:out-of-range input:out-of-range 选择指定范围以外的值的元素属性

:read-only input:read-only 选择只读属性的元素属性

:read-write input:read-write 选择没有只读属性的元素属性

:required input:required 选择有"required"属性指定的元素属性

:root root 选择文档的根元素

:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)

:valid input:valid 选择所有有效值的属性

:link a:link 选择所有未访问链接

:visited a:visited 选择所有访问过的链接

:active a:active 选择正在活动链接

:hover a:hover 把鼠标放在链接上的状态

:focus input:focus 选择元素输入后具有焦点

:first-letter p:first-letter 选择每个<p> 元素的第一个字母

:first-line p:first-line 选择每个<p> 元素的第一行

:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素

:before p:before 在每个<p>元素之前插入内容

:after p:after 在每个<p>元素之后插入内容

:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值

16.下拉菜单

.dropbtn { #按钮的样式

background-color:red;

color: yellow;

padding: 20px;

font-size: 20px;

border: solid 2px green;

cursor: pointer; #鼠标变化--->变成小手样式}

.dropdown {

position: relative; #这将设置下拉菜单的内容放置在下拉按钮

display: inline-block; #行显示}

.dropdown-content {

#类中是实际的下拉菜单,默认是隐藏的,在鼠标移动到指定元素后会显示(默认隐藏)

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }

# box-shadow 属性让下拉菜单看起来像一个"卡片"

.dropdown-content a { #类是 dropdown-content元素下面的a属性样式

color: yellow;

padding: 10px 20px;

text-decoration: none; #没有超链接的横线

display: block;}

.dropdown-content a:hover {background-color:green} #指向超链接背景颜色变化

.dropdown:hover .dropdown-content { display: block;}

# 当类 dropdown被指向后类是 dropdown-content的样式

.dropdown:hover .dropbtn { background-color: #3e8e41;}

#当类 dropdown被指向后，按钮背景颜色变化

<div class='dropdown' style="float:right;">

<button class='dropbtn'>下拉菜单2</button>

<div class='dropdown-content'>

<a href='http://www.baidu.com'>百度1</a>

<a href='http://www.baidu.com'>百度2</a>

<a href='http://www.baidu.com'>百度3</a>

</div>

</div>

17.提示工具类似于下拉菜单---->主要搞明白提示框出现的位置

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

visibility: hidden;

width: 100px;

background-color: red;

color: yellow;

text-align: center;

border-radius: 6px;

padding: 10px 0;

/* 定位 */

position: absolute;

z-index: -1; #如果重叠覆盖规则。-1被覆盖，1不被覆盖

top: 100%;

left: 50%;

margin-left: -60px; #/* 使用一半宽度 (120/2 = 60) 来居中提示工具 */

opacity: 0; #淡入淡出效果

transition: opacity 1s;}

.tooltip .tooltiptext::after {

content: "";

position: absolute;

bottom: 100%;

left: 50%;

margin-left: -5px;

border-width: 5px;

border-style: solid;

border-color: transparent transparent red transparent ;} #指定提示框箭头的位置（下，左上右）

.tooltip:hover .tooltiptext {

visibility: visible;

opacity: 1;} #淡入淡出效果

html内容:

<div class="tooltip">鼠标移动到这 <span class="tooltiptext">提示文本</span> </div>

18.图片透明度

img{ opacity:0.4;

filter:alpha(opacity=40); /* IE8 及其更早版本 */}

img:hover{ opacity:1.0;

filter:alpha(opacity=100); /* IE8 及其更早版本 */}

# Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明

#IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明

19.属性选择器

[title] { color:blue;} #把包含标题（title）的所有元素变为蓝色

[title='hello'] { color:blue;} #改变了标题title='hello'元素的边框样式，精确匹配

[title~=hello] { color:blue; } #使用（~）分隔属性和值,必须作为单独的一个词hello存在,才被匹配

比如: 'hello world'

[lang|=en] { color:blue; } #模糊匹配~只要值有en就被匹配到(不必作为单独一个词en-*)

20.表单

input[type=text] {

-webkit-transition: width 0.4s ease-in-out;

transition: width 0.4s ease-in-out;

}

input[type=text]:focus { width: 100%;}

#输入框在获取焦点时会向右延展

2)文本框不可以自动调节大小

textarea { width: 100%;

height: 150px;

padding: 12px 20px;

box-sizing: border-box;

border: 2px solid #ccc;

border-radius: 4px;

background-color: #f8f8f8;

resize: none;} # resize 属性来禁用文本框可以重置大小的功能

21.计数器

<style>

body {

counter-reset: section;

}

h1 {

counter-reset: subsection;

}

h1::before {

counter-increment: section;

content: "Section " counter(section) ". ";

}

h2::before {

counter-increment: subsection;

content: counter(section) "." counter(subsection) " ";

}

</style>

</head>

<body>

<h1>HTML 教程:</h1>

<h2>HTML 教程</h2>

<h2>CSS 教程</h2>

<h1>Scripting 教程:</h1>

<h2>JavaScript</h2>

<h2>VBScript</h2>

<h1>XML 教程:</h1>

<h2>XML</h2>

<h2>XSL</h2>

counter-reset - 创建或者重置计数器

counter-increment - 递增变量

content - 插入生成的内容

counter() 或 counters() 函数 - 将计数器的值添加到元素