Dieses Mal zeige ich Ihnen die CSS-Sammlung (Cascading Style Sheets). Was sind die Vorsichtsmaßnahmen für die Verwendung der CSS-Sammlung (Cascading Style Sheets)?
(Hinweis: Die Attribute mit * sind neue Attribute von CSS3)
1. Grundregeln
1.css wird normalerweise im Stylesheet (Style) gespeichert, das verwendet wird Definieren Sie, wie HTML-Elemente angezeigt werden.
2.css besteht hauptsächlich aus zwei Teilen: einem Selektor und einer oder mehreren Anweisungen.
Der Selektor ist normalerweise das HTML-Element, dessen Stil geändert werden muss. Jede Deklaration muss in geschweifte Klammern eingeschlossen werden. Jede Deklaration endet mit einem Semikolon {color:red; text-align:center}
3. Kommentare: /*Hier sind Kommentare*/
4.css-Stil-Einfügemethode:
(1) Externer Stil, das heißt aus externem CSS Das Dateileseformat sollte in der Webseite enthalten sein; wenn der Stil auf mehrere Seiten angewendet werden muss, kann diese Methode verwendet werden:
<head><link rel="stylesheet" type="text/css" href="abc.css"></head>
Beispiel:
(3) Inline-Stil. Innerhalb einer einzelnen Element-Tag-Stilmethode geschrieben;
<head><style>p {margin-left:20px;}#x {color:yellow;}</style></head>
2. Attributdeklaration
backgroud-color 背景色，值可以是十六进制颜色值、RGB颜色表示法（如rgb(255,255,0)）、颜色名称（如：red））、transparent(透明，默认）
backgroud-image 背景图，默认是平铺样式；如：body {backgroud-image:url('ba.jpg');}
backgroud-repeat 背景图重复方式，值有repeat-x(水平方向平铺)、repeat-y(竖直方向平铺)、no-repeat(不平铺)
backgroud-attachment 背景图固定还随页面其余部分滚动设置，值有fixed（固定)、scroll(滚动，默认)
backgroud-position 背景图起始位置，由x,y两个方向组成，默认都是center，x方向值有left、right、center,y方向值有top、center、bottom;如果只指定了一个值，其他的值会是center;也可用坐标，可以是有单位的(0px0px)或者是百分比的(0%0%)
backgroud 合并简写，把以上的所有属性按以上顺序都写在这一起（可以省略不需要的属性）；如：body {backgroud:red url('p.png') no-repeat right top;}
backgroud-clip* 背景的绘制区域，值：border-box(默认),padding-box(衬距方框内)，content-box(内容方框内)；
backgroud-origin* 背景图片定位区域，padding-box(相对边框)，border-box(相对于外边距)，content-box(相对于内容框体)；
backgroud-size* 背景图片尺寸，值有高宽两个，如省略一个，另一个会按比例自动计算，值可以是长度单位和%color 文本颜色，值为CSS颜色值，可有多种表达方式；
direction 文本书写方向，值有rtl(从右到左)、ltr（默认从左到右）；
letter-spacing 字符间距，值为以px像素为单位的值，可以使用负值；
line-height 行间距，值可以使用像素(px),也可使用数字，也可使用百分比（是在当前字体尺寸上进行百分比缩放）；
text-align 对齐方式，值有left、right、center、justify（两端对齐）；
text-decoration 修饰，值有underline(下划线)、overline(上划线)、line-through(删除线)、blink(闪烁)、none(默认无);
text-indent 缩进，值为像素值；
text-shadow* 阴影，值有四个参数：h-shadow(垂直阴影)、v-shadow(水平阴影)、blur(模糊距离)、color(阴影颜色)前两个为必填项，值为像素px，后两个为可选
text-transform 文本大小写转换，值有capitalize(capitalize)、uppercase(全部为大写)、lowercase(全部小写)、none(默认无)
unicode-bidi 文本是否重写，值有normal(默认不使用附加嵌入层)、embed(创建一个附加嵌入层)、bidi-override(创建，重新排序取决于direction属性)、iniitial(设置属性为它的默认属性)
vertical-align 垂直对齐，值有baseline(默认)、sub(下标)、super(上标)、top(元素顶端与最高元素顶端对齐)、bottom(底端与最低元素底端对齐)、text-top(父元素顶端对齐)、middle(父元素居中)、text-bottom(父元素底端对齐)、%(使用line-height值百分比排列)
white-space 空白处理方式,值有normal(默认忽略空白)、pre(保留空白)、nowrap(文本不换行，直到<br>)、pre-wrap(保留空白符，也能正常换行)、pre-line(合并空白序列，保留换行)
word-spacing 字段单词间距，值为像素px;
hanging-punctuation*设置标点字符是否位于线框外，值none(不在框外放置),first(放在行首边缘外),last(行尾边缘),allow-end,force-end;
punctuation-trim* 对标点进行修剪，值：none,start(在开头放置标点）,end(在行尾修剪结束标点),allow-end,adjacent;
text-align-last* 最后一行对齐方式，值：auto(默认左）,left,right,center,justify（两端对齐），start,end,initial,inherit;
text-emphasis* 重点标记文本，包括两个值，风格和颜色；
text-justify* 规定当 text-align 设置为 "justify" 时所使用的对齐方法。值：auto,none,inter-word（增减单词间距）,inter-ideograph(用表意文本来排齐),inter-cluster(对不包含内部单词间隔内容对齐，如汉语）,kashida(对字符进行拉伸来对齐),distribute;
text-outline* 文本轮廓,包含三个值：thickness,blur,color;第一个为必需的，后两个为可选的；
text-overflow* 文本溢出时处理；值：clip(修剪),ellipsis（显示省略号），string(用给定字符来显示）；
text-wrap* 换行规则，值：normal,none(不换行),unrestricted(在任意两个字符间换行),suppress((压缩元素中的换行）；
word-break* 非中日韩文本换行规则，值：normal,break-all(允许在单词内换行),keep-all(只能在半角空格或连字符处换行);
word-wrap* 对长的不可分割单词进行分割并换到一下行；值：normal,break-word(可在单词内进行换行); font-family 类型，如果字体名字超过一个单词需要用引号包围起来，可以同时指定多个字体，用于浏览器不支持一种字体，会继续尝试下一种字体
font-size 大小，默认是16px,值可以使用绝对大小px，也可以使用相对大小em，此单位在当前浏览器的16px基础上进行缩放；还有：xx-samll,x-small,small,medium,large,x-large,xx-large,samller,larger;
font-style 样式，值有normal(默认)、italic（斜体）、oblique(倾斜)；
font-variant 字号，值small-caps小型大写字母字体，即虽然是大写字母，但大小会比普通的小；
font-weight 粗细，值有normal(默认,400)，bold(加粗，700)，lighter(更细)，也可以设为100-900的整百数值；
font 字体所有属性集合； list-style-image 列表项标记图像，值为url('anypicture.png')；
list-style-position 列表项目标记位置，值有inside(文本内)，outside(文本外，位于左侧)；
list-style-type 列表标记类型，值有none(无标记),disc(默认实心圆),circle(空心圆),square(实心方块)，decimal(数字),以及罗马英文拉丁等；
list-style 列表所有属性集合；顺序依次为type,position,image;如果是对其子项进行选择，只需使用ul li样式选择 border 边框所有属性合集；对所有边框设置统一格式，值为width style color的值；可缺省，无顺序要求；
border-style 边框所有样式合集；一个值表示四边，两个值依次为上下、左右，三个值依次为上、左右、下，四个值为上、右、下、左；
border-width 边框所有宽度合集；赋值顺序同上；
border-color 边框所有颜色合集；赋值顺序同上；
border-bottom 下边框所有属性合集；值为width style color的值；可缺省，无顺序要求；
border-bottom-color 下边框颜色，值为css颜色；
border-bottom-style 下边框样式，值有none(无边框)，hidden(同none，但在用于表格时除外)，dotted(点状),dashed(虚线),solid(实线),double(双线),groove(定义双线，宽度为border-width),ridge(三维菱形),inset(三维凹边框),outset(三维凸边框)；
border-bottom-width 下边框宽度，值有medium(默认),thick,thin,像素值px;
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 上边框宽度；
border-image* 以图片为边框样式合集；例：{ -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */ border-image: url(border.png) 30 round;}
border-image-source* 图片源，值为url(源)；
border-image-slice* 图像的边界向内偏移度，值为px,%,fill（保留图像的中间部分）；
border-image-width* 图像边界宽度，值为：auto,数字(border-width倍数)，%；
border-image-outset* 设置在边框外部绘制图片的量，包括上右下左四个值（例：1 1 1 1 ），两个值为上下、左右，三个值为上、左右、下；值为：数字（border-width倍数）,长度单位值；
border-image-repeat* 图片铺陈样式，值有stretch(默认拉伸)，repeat(平铺)，round(平铺，但如能完整平铺则会进行缩放)，space(如不能完整平铺，扩展空间分布在图片周围),initial,inherit;
border-radius* 指定从左上角开始顺时针四个角的圆角度，四个值，值可缺省；值：长度单位，%；
box-shadow* 把一个或多个下拉阴影添加到框上，例：h-shadow v-shadow blur spread color inset除了颜色外值都是长度单位值，前两个是必填的，其他为可选；Umriss Es handelt sich um eine Linie außerhalb des Randes, die das Element hervorheben kann
8 > outline 所有轮廓属性合集；无顺序要求；
outline-color 颜色；值为css颜色；
outline-style 样式；值有none(无边框)，dotted(点状),dashed(虚线),solid(实线),double(双线),groove(定义双线，宽度为outline-width),ridge(三维菱形),inset(三维凹边框),outset(三维凸边框)
outline-width 宽度；值有medium(默认),thick,thin,像素值px; margin 四边属性合集，值可以是像素、厘米、百分比（相对父元素）；一个值表示四边，两个值依次为上下、左右，三个值依次为上、左右、下，四个值为上、右、下、左； margin-bottom 下外边距；值可以是像素、厘米、百分比（相对父元素）；
margin-left 左外边距；值可以是像素、厘米、百分比（相对父元素）；
margin-right 右外边距；值可以是像素、厘米、百分比（相对父元素）；
margin-top 上外边距；值可以是像素、厘米、百分比（相对父元素）； padding 四边属性合集，值可以是像素、厘米、百分比（相对父元素）；一个值表示四边，两个值依次为上下、左右，三个值依次为上、左右、下，四个值为上、右、下、左；
padding-bottom 下内边距；值可以是像素、厘米、百分比（相对父元素）；
padding-left 左内边距；值可以是像素、厘米、百分比（相对父元素）；
padding-right 右内边距；值可以是像素、厘米、百分比（相对父元素）；
padding-top 上内边距；值可以是像素、厘米、百分比（相对父元素）； height 元素高度；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）；
max-height 元素最大高度；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）；
min-height 元素最小高度；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）；
width 元素宽度；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）；
max-width 元素最大宽度；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）；
min-width 元素最小宽度；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）；7 line-height 行高；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）； position 指定元素的定位类型；值有static(默认),absolute(绝对定位，相对static以外的第一个父元素进行定位),fixed(相对浏览器定位),relative(相对正常位置进行定位)
bottom 定位元素下边距边界与其包含块下边界之间的偏移，值为css单位值；
left 定位元素左边距边界与其包含块左边界之间的偏移，值为css单位值；
right 定位元素右边距边界与其包含块右边界之间的偏移，值为css单位值；
top 定位元素上边距边界与其包含块上边界之间的偏移，值为css单位值；
clip 剪辑一个绝对定位的元素；值为rect(top,righ,bottom,left)坐标的正方形，如果先有overflow,visible，那么clip属性则不起作用；
cursor 显示光标移动到元素区域的显示类型；值有url('picture'),default(默认),auto(浏览器默认),crosshair,pointer,move,e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize,text,wait,help;
overflow 元素内容溢出其区域时的处理;值有visible(默认呈现在元素框外),hidden(隐藏溢出部分),scroll(滚动显示)；
overflow-x 元素内容溢出左右区域时的处理;值有visible(默认呈现在元素框外),hidden(隐藏溢出部分),scroll(滚动显示),auto(如果溢出，则提供滚动机制)，no-display(如果内容不适合框体，则删除整个框),no-content(如果内容不适合框体，则隐藏整个内容)；
overflow-y 元素内容溢出上下区域时的处理;值有visible(默认呈现在元素框外),hidden(隐藏溢出部分),scroll(滚动显示),auto(如果溢出，则提供滚动机制)，no-display(如果内容不适合框体，则删除整个框),no-content(如果内容不适合框体，则隐藏整个内容)；
z-index 元素的堆叠顺序；值为数字，可为负，数字越高越显示在前边；使元素会向左或右移动，其周围的元素也会重新排列；清除这种效果需要使用clear属性；
float 值有left(向左浮动),right(向右浮动),none(不可浮动)
clear 指定段落的左侧或右侧不允许浮动的元素；值有left,right,both,none;opacity 透明度
Das obige ist der detaillierte Inhalt vonCSS (Cascading Style Sheets) ist nicht verfügbar. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So ändern Sie element.style
Win11 überspringt das Tutorial, um sich beim Microsoft-Konto anzumelden
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Einführung in das xmpp-Protokoll
So schließen Sie die App-Ressourcenbibliothek
Detaillierte Erläuterung der Nginx-Konfiguration
SQL-Anweisung zum Sichern der Datenbank
Was ist der Unterschied zwischen Leerzeichen voller Breite und Leerzeichen halber Breite?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
