CSS basic style Inline style: Use the style attribute of the HTML tag directly in the page file. For example: 程序员Copy after login Define the style in the page file: This way is to define the style through the tag. The syntax format is as follows: </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;"> Copy after login Embed an external style sheet in the page file: The syntax is as follows @import url("外部CSS样式文件名"); <!-- 外部文件名是以.css为扩展名的CSS文件，如果该文件和当前页面同一个目录下，则直接用文件名，不在同一个目录下，则要给出其相对路径。 -> Copy after login Link external style sheet:The syntax is as follows Copy after login CSS annotation syntax: CSS annotation statement is located in /* */Copy after login Statement content between tags CSS Selector HTML tag The syntax is as follows h1 {font-family: "微软雅黑";font-size: 12px;} /*在HTML文档中，所有该标记保护的文本都具有定义的CSS样式*/Copy after login CLASS selector The syntax is as follows .classid{font-family: "微软雅黑";font-size: 12px;}/* 在HTML文档中， 所有使用该类名标记的都具有定义的标签*/Copy after login ID selector The syntax is as follows #fromid {font-family: "微软雅黑";font-size: 12px;}/* 在HTML文档中，所有指定为该ID的标记都具有定义的标签*/Copy after login CSS style priority The style set directly using the Style attribute of the HTML tag on the page has the highest priority. Other style definitions are in the order they appear on the page, with the later ones having the highest priority. ID selector has higher priority than CLASS selector. Content that is not controlled by a defined style will use the browser's default style. CSS basic attributes: mainly include background attributes, text attributes, font attributes, border attributes, border attributes, margin attributes, list attributes, positioning attributes Background attributes: background-related attributes in CSS, background color setting attributes and background image setting attributes 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 */ }Copy after login Text style is mainly used to set the properties of text 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等。 * 我们也可以把长度值设置为负数，以打打紧缩字符行距的效果 */ }Copy after login CSS font attributes mainly set the attributes of text 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 */ }Copy after login
