ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css常用标签集合(上)

2022-01-24 20:59:46  阅读:223  来源: 互联网

标签:标签 元素 边框 设置 集合 border css 属性


css背景

background-color{十六进制:如#b0c4de;/RGB"rgb(255,0,0)"/颜色名称"red"}

background-image{url(/image/bg.gif); /*背景图片*/ }

background-repeat{repeat; /*重复排列-网页默认*/ no-repeat; /*不重复排列*/ repeat-x; /*在x轴重复排列*/ repeat-y; /*在y轴重复排列*/ }

background-attachment{fixed; /*浮水印固定背景*/ }

background-position{ 90% 90%; /*背景图片x与y轴的位置*/  top; /*向上对齐*/  buttom; /*向下对齐*/  left; /*向左对齐*/  right; /*向右对齐*/   center; /*居中对齐*/  }

css 文本

属性描述
color设置文本颜色
direction设置文本方向。
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写 
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距

css字体

Property描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式
font-variant以小型大写字体或者正常字体显示文本。
font-weight指定字体的粗细。

css链接

这四个链接状态是:

  • a:link - 正常,未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

css列表

属性描述
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图像设置为列表项标志。
list-style-position设置列表中列表项标志的位置。
list-style-type设置列表项标志的类型。


css Table表格

table{border/边框  border-collapse/ 设置表格的边框是否被折叠成一个单一的边框或隔开/  Width和height属性定义表格的宽度和高度/   text-align设置水平对齐方式,向左,右,或中心  /  background-color :颜色/  }

css盒子模型

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

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

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

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

css边框

属性描述
border简写属性,用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color设置元素的下边框的颜色。
border-bottom-style设置元素的下边框的样式。
border-bottom-width设置元素的下边框的宽度。
border-left简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color设置元素的左边框的颜色。
border-left-style设置元素的左边框的样式。
border-left-width设置元素的左边框的宽度。
border-right简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color设置元素的右边框的颜色。
border-right-style设置元素的右边框的样式。
border-right-width设置元素的右边框的宽度。
border-top简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color设置元素的上边框的颜色。
border-top-style设置元素的上边框的样式。
border-top-width设置元素的上边框的宽度。

css轮廓

属性说明CSS
outline在一个声明中设置所有的轮廓属性outline-color
outline-style
outline-width

inherit
2
outline-color设置轮廓的颜色color-name
hex-number
rgb-number

invert
inherit
2
outline-style设置轮廓的样式none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
2
outline-width设置轮廓的宽度thin
medium
thick
length
inherit

css外边距

属性描述
margin简写属性。在一个声明中设置所有外边距属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。

css padding(填充)

属性说明
padding使用简写属性设置在一个声明中的所有填充属性
padding-bottom设置元素的底部填充
padding-left设置元素的左部填充
padding-right设置元素的右部填充
padding-top设置元素的顶部填充

css分组和嵌套

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

css尺寸

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

CSS Display(显示) 与 Visibility(可见性)

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

css Position(定位)

属性说明CSS
bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。auto
length
%

inherit
2
clip剪辑一个绝对定位的元素shape
auto
inherit
2
cursor显示光标移动到指定的类型url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
2
left定义了定位元素左外边距边界与其包含块左边界之间的偏移。auto
length
%

inherit
2
overflow设置当元素的内容溢出其区域时发生的事情。auto
hidden
scroll
visible
inherit
2
overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域auto
hidden
scroll
visible
no-display
no-content
2
overflow-x指定如何处理右边/左边边缘的内容溢出元素的内容区域auto
hidden
scroll
visible
no-display
no-content
2
position指定元素的定位类型absolute
fixed
relative
static
inherit
2
right定义了定位元素右外边距边界与其包含块右边界之间的偏移。auto
length
%

inherit
2
top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。auto
length
%

inherit
2
z-index设置元素的堆叠顺序number
auto
inherit
2

css Overflow

描述
visible默认值。内容不会被修剪,会呈现在元素框之外。
hidden内容会被修剪,并且其余内容是不可见的。
scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

css浮动

属性描述CSS
clear指定不允许元素周围有浮动元素。left
right
both
none
inherit
1
float指定一个盒子(元素)是否可以浮动。left
right
none
inherit
1

标签:标签,元素,边框,设置,集合,border,css,属性
来源: https://blog.csdn.net/qq_60976312/article/details/122674419

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有