CSS常用内容总结(一)

1. 选择器,即设置的样式可以应用到HTML的什么位置。

① 标签选择器

例 div{ background-color:red }

<div> </div>,则为div设置样式。

② class选择器

.classelect{ background-color:red }

<div class='classelect'> </div>,则为class为classelect的标签设置样式。

③ id选择器

#idselect{ background-color:red }

<div id='idselect'> </div>,则为id为idselect的标签设置样式。

④ 组合选择器

div,span,p{ background-color:red },即为多个标签设置此样式。

⑤ 层级选择器

.c1 #c2 span{ background-color:red }  ,即id为c1下的class为c2下的span标签的属性。

⑤属性选择器

input[type='button']{ height:100px },即为type属性为submit的标签设置样式。

2. background

background-color设置背景色。

background-image:urt('xxxx.jpg') 引用图片。

当在div中引用图片时,

<div style='background-image:url('image/111.jpg')'> </div>,此图片会这个div里不断重复,要是想要不重复或者只在某个方向上重复可以用

background-repeat(no-repeat;repeat-x;repeat-y)

截取一张图片的某个部分:background-position。

3. border

border:1px solid;  实线边框

border:1px dotted;  点状边框

border:1px dashed;   虚线边框

4. margin,设置外边距。

margin:20px;  距此标签的父级标签的四边都为20像素

margin-top: 20px;  距此标签的父级标签的上边20像素

margin-bottom: 20px;  距此标签的父级标签的下边20像素

margin-left: 20px;  距此标签的父级标签的左边20像素

margin-right: 20px;  距此标签的父级标签的右边20像素

5.padding,设置内边距。

原文地址:https://www.cnblogs.com/NoYone/p/8305041.html