CSS-Grundstil Inline-Stil : Verwenden Sie das Stilattribut des HTML-Tags direkt in der Seitendatei. Zum Beispiel: 程序员Nach dem Login kopieren Definieren Sie den Stil in der Seitendatei: Auf diese Weise wird der Stil über das Tag definiert. Das Syntaxformat ist wie folgt: </li> </ul> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><span style="color: #800000;"><style type="text/css"> h1 </span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 12px</span>;}<span style="color: #800000;"> #fromid </span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 12px</span>;}<span style="color: #800000;"> .classid</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 12px</span>;}<span style="color: #800000;"> Nach dem Login kopieren Einbetten eines externen Stylesheets in die Auslagerungsdatei: Die Syntax lautet wie folgt @import url("外部CSS样式文件名"); <!-- 外部文件名是以.css为扩展名的CSS文件，如果该文件和当前页面同一个目录下，则直接用文件名，不在同一个目录下，则要给出其相对路径。 -> Nach dem Login kopieren Externes Stylesheet verlinken: Die Syntax ist wie folgt Nach dem Login kopieren CSS-Annotationssyntax: CSS-Annotationsanweisung befindet sich in /* */Nach dem Login kopieren Aussageinhalt zwischen Tags CSS-Auswahl HTML-Tag Die Syntax ist wie folgt h1 {font-family: "微软雅黑";font-size: 12px;} /*在HTML文档中，所有该标记保护的文本都具有定义的CSS样式*/Nach dem Login kopieren KLASSEN-Selektor Die Syntax ist wie folgt .classid{font-family: "微软雅黑";font-size: 12px;}/* 在HTML文档中， 所有使用该类名标记的都具有定义的标签*/Nach dem Login kopieren ID-Selektor Die Syntax ist wie folgt #fromid {font-family: "微软雅黑";font-size: 12px;}/* 在HTML文档中，所有指定为该ID的标记都具有定义的标签*/Nach dem Login kopieren CSS-Stilpriorität Der direkt über das Style-Attribut des HTML-Tags auf der Seite festgelegte Stil hat die höchste Priorität. Andere Stildefinitionen werden in der Reihenfolge angezeigt, in der sie auf der Seite erscheinen, wobei die späteren die höchste Priorität haben. Der ID-Selektor hat eine höhere Priorität als der CLASS-Selektor. Inhalte, die nicht durch einen definierten Stil gesteuert werden, verwenden den Standardstil des Browsers. CSS-Basisattribute: umfassen hauptsächlich Hintergrundattribute, Textattribute, Schriftartattribute, Rahmenattribute, Randattribute, Randattribute, Listenattribute, Positionierungsattribute Hintergrundattribute: hintergrundbezogene Attribute in CSS, Hintergrundfarbeinstellungsattribute und Hintergrundbildeinstellungsattribute img{ background-color: red transparent; /* * 用于设置背景颜色 * 其中transparent表示透明 * 颜色的表示方式有多种 * 1.使用英文名称，如red,blue等。 * 2.用6位十六进制数（#rrggbb）表示。 * 3.用3位十六进制数（#rgb）表示。 * 4.用rgb(r,g,b)函数表示，其中3个参数的取值可为0~255的整数或百分比值， * 如rgb(0,0,0)表示黑色，rgb(100%,100%,100%)表示白色。 */ background-image: url("背景图片的路径")|none; /* * 用于设置要加载的背景图片 */ background-repeat: no-repeat; /* * 用于设置背景图片的排列方式，其属性设置格式如下： * background-repeat:repeat|repeat-x|repeat-y|no-repeat ; * 其中repeat表示以并列方式排列图片，是该属性的默认值，repeat-x表示以x轴方向并列排列图片； * repeat-y表示以y轴方向并列排列图片，no-repeat表示不以并列方式排列图片。 */ background-attachment: scroll; /* * 用于设置移动滚动条时背景图片位置是否固定，其属性设置格式如下： * background-attachment: scroll|fixed; * scroll表示移动滚动条时背景图片随之滚动，fixed表示移动滚动条时背景图片不动。 */ background-position: x,y; /* * 用于设置背景图片的插入位置，其属性设置格式如下： * 1.百分比，用于描述图片距区域元素边框的百分比值 * 2.数值，用具体数值描述，单位可分为任意的长度单位：em px in pt pc cm mm等。 * 3关键字，包括left right center top bottom */ }Nach dem Login kopieren Der Textstil wird hauptsächlich zum Festlegen der Textattribute verwendet h1{ text-indent: 20px; /* * 用于设置文本的首行缩进值，默认属性值为0，其属性数值用具体数值描述，单位可为任意长度单位：em px in pt pc cm mm等。 */ text-align: left; /* * 用于设置文本段落的水平对齐方式，其属性设置语法如下； * text-align:left|right|center|justify * 该属性的取值有4种： * left表示左对齐 * right表示右对齐 * center表示居中对齐 * justify表示左右对齐 */ vertical-align: baseline; /* * 用于设置文本段落的垂直对齐方式，其属性设置语法如下： * vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom; * baseline:属性的默认值，表示段落文本与上段落文本的基线对齐； * sub：表示文本以下标方式显示； * super:表示以上标方式显示； * top:表示垂直向上对齐； * text-top:表示文本垂直向上对齐； * middle：表示垂直居中对齐； * bottom：表示垂直向下对齐； * text-bottom:表示文字垂直向下对齐。 */ line-height: normal; /* * 用于设置文本的行距，属性设置语法如下： * line-height：normal|百分比|长度值 * normal：表示该属性的默认值； * 百分比：表示相对于字大小font-size的百分比 * 长度值：用具体的数值表示，其属性值可以问任意的长度单位：em px in pt pc cm mm等。 */ letter-spacing: normal; /* * 用于设置字符的间距，其属性设置语法如下： * letter-spacing：normal|长度值； * normal：表示该属性的默认值； * 长度值：用具体的数值表示，其属性值可以问任意的长度单位：em px in pt pc cm mm等。 * 我们也可以把长度值设置为负数，以打打紧缩字符行距的效果 */ }Nach dem Login kopieren CSS-Schriftartattribute legen hauptsächlich die Attribute von Text fest h2{ font-family: "微软雅黑"; /* * 用于设置文字的字体，语法设置如下： * font-family：字体； * 可以设置多种字体，用逗号隔开，浏览器按照顺序查找系统可匹配的字体，若查找不到，浏览器会使用默认的字体。 */ font-style: normal; /* * 用于设置文字的效果，其属性设置语法如下： * font-style:normal|italic|oblique; * normal:表示默认值 * italic：表示斜体 * oblique：表示歪斜体 */ font-size: 10px; /* * 用于设置字体的大小，其属性设置语法如下： * font-size:长度|关键字 * 长度：用具体的数值描述，单位可以问任意的长度单位：em px in pt pc cm mm等。 * 关键字;包括：XX-small、X-small、small、medium、large、XX-large、X-large、larger和smaller. */ font-weight: normal; /* * 用于设置文字的粗细，其属性设置语法如下： * font-weight：normal|bold|bolder|lighter|100~900 */ font-variant: normal; /* * 用于设置文字的变形属性，其属性设置语法如下： * font-variant：normal|small-caps */ }Nach dem Login kopieren
